Full Screen Orbit With Background Image
How do I make an full screen orbit with background image?
Full Screen Orbit With Background Image. The solution for the issue . What is a full screen orbit with background image? How do you make a full screen orbit with background image? This script and codes were developed by Wing-Hou Chan on 06 December 2022, Tuesday.
Full Screen Orbit With Background Image - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full Screen Orbit With Background Image</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://cdn.foundation5.zurb.com/foundation.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul data-orbit> <li class="slide1"> <div class="small-12 columns text-center y-center"> <h1>Full Screen Orbit</h1> <h2>with background image</h2> <p>Place content within this div</p> </div> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.foundation5.zurb.com/foundation.js'></script> <script src="js/index.js"></script>
</body>
</html>
Full Screen Orbit With Background Image - Script Codes CSS Codes
.orbit-container { width: 100%; height: 100%;
}
.orbit-slides-container { width: 100%; height: 100% !important;
}
ul[data-orbit] li { width: 100%; height: 100%; background-size: cover;
}
.slide1 { background: url("http://www.hiphoprepublican.com/wp-content/uploads/2013/06/New-York-City-Sun.jpg") no-repeat center;
}
h1, h2, p { color: #fff; font-family: 'Open Sans', sans-serif;
}
.y-center { position: relative;
}
Full Screen Orbit With Background Image - Script Codes JS Codes
$(document).foundation();
$(document).ready(function(){ $(".y-center").css("top",$(".y-center").parent().height()/2);
});
Developer | Wing-Hou Chan |
Username | winghouchan |
Uploaded | December 06, 2022 |
Rating | 3.5 |
Size | 2,102 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Opening Reveal Modal On Document Ready | 1,787 Kb |
Custom Close ZURB Foundation Reveal Modal With Image | 2,114 Kb |
Foundation Dropdowns Demo | 1,820 Kb |
Making Element Height Fill Remaining Document Space | 2,201 Kb |
Clearing Form With Abide Validation | 1,924 Kb |
Offcanvas with Icon Bar | 2,171 Kb |
Confirm Close Of Foundation Reveal Modal | 1,818 Kb |
Using a Range Slider Inside a Reveal Modal | 1,858 Kb |
Stop Page Jumping To Top When Sticky Topbar Menu Icon Is Clicked | 2,936 Kb |
Custom Close Foundation Reveal Modal | 2,036 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Filter inputs | Rowinf | 1,721 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Mario | Takaneichinose | 3,902 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Speech bubbles | Something | 1,547 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!