As an integral part of websites, backgrounds with fixed positions are getting more and more innovative in a way that it can create an optical illusion that it changes the image without you noticing that it has a fixed position as it provides a neat effect of transitioning to the next section of the page.
It was on the early parallax days when it became popular. Images and text moving upward while the fixed background stuck behind creating a magnificent user experience to your site visitors.
In today’s tutorial, we’re going to create a background fixed effect (CSS and jQuery) that changes element while scrolling changing the screen of the Macbook computer.
Please note that this only works on larger screens and we need to set a default layout on smaller screens. Let’s get started.
Getting Started with Markup
Our HTML structure will be straightforward. We will set first our header section as our main slide and followed with a series of sections. Each section will have a class of background-fixed along with the img-(nth) which will contain the image set. We will also set the section number id for our navigation. I set up four sections and one header.
<header id="section1"> <h1 class="animate fx">Background Fixed Effect</h1> </header> <section class="background-fixed img-1" id="section2"> </section> <section class="background-fixed img-2" id="section3"> </section> <section class="background-fixed img-3" id="section4"> </section> <section class="background-fixed img-4" id="section5"> </section>
Next, we’ll set up the main-content div and place an image inside it along with h3 and p tags content.
The image will have a class hide as we need to hide this first and will show it on smaller devices. (Let’s also not forgot our footer.)
<header id="section1">
<h1 class="animate fx">Background Fixed Effect</h1>
</header>
<section class="background-fixed img-1" id="section2">
<div class="main-content">
<img src="img/img1-mobile.png" class="hide">
<h3>Mac are Awesome</h3>
<p>You can preview any file (even Photoshop files and videos) by selecting it and pressing the spacebar. Press it again to close the preview. While in the preview you can also press the arrow keys to change between files.</p>
</div>
</section>
<section class="background-fixed img-2" id="section3">
<div class="main-content">
<img src="img/img2-mobile.png" class="hide">
<h3>Summarize text</h3>
<p>Mac OS X allows you to quickly summarize long pieces of text in just a few seconds. To summarize a text first select it, right click on the selection and click on "Summarize". To enable the summary feature, click on the app name in the status bar ("Chrome" for instance) > Services > Services Preferences... > scroll down and check "Summarize".</p>
</div>
</section>
<section class="background-fixed img-3" id="section4">
<div class="main-content dark">
<img src="img/img3-mobile.png" class="hide">
<h3>Hot Corners</h3>
<p>Hot corners allow you to trigger certain events by touching a corner of your screen. You can start and disable a screensaver, open mission control, application windows, show the desktop, dashboard, notification center or lauchpad or put your display to sleep.</p>
</div>
</section>
<section class="background-fixed img-4" id="section5">
<div class="main-content">
<img src="img/img4-mobile.png" class="hide">
<h3>Automate actions</h3>
<p>Everyone forgets about Automator, the application that lets you automate repetitive tasks. It works by clicking together actions into a chain of events.</p>
</div>
</section>
<footer>
<p>© 2015 - Designmodo.com - All Rights Reserved
</footer>
Working with Navigation
For the navigation, we’ll create an unordered list with an id of nav. Each list will have a link with an id of the section number and with the class scroll along for our jQuery code later. I will place the code above our markup.
<ul id="nav"> <li><a href="#section1" title="Next Section" class="scroll"> <img src="img/dot1.png" alt="Link"></a></li> <li><a href="#section2" title="Next Section" class="scroll"> <img src="img/dot2.png" alt="Link"></a></li> <li><a href="#section3" title="Next Section" class="scroll"> <img src="img/dot3.png" alt="Link"></a></li> <li><a href="#section4" title="Next Section" class="scroll"> <img src="img/dot4.png" alt="Link"></a></li> <li><a href="#section5" title="Next Section" class="scroll"> <img src="img/dot5.png" alt="Link"></a></li> </ul>
The CSS
Before starting out with general styles, I will add the reset styles from Eric Meyer’s website to to reduce browser inconsistencies on our layout.
Let’s start with our general styles. We will set the html and body height to 100% and then give the body, header and h1 generic styles. I will also place the style for the hide class here to hide the crop images and show them later on smaller viewports.
html, body {
height: 100%;
}
body {
font: 15px 'Lato', Helvetica, sans-serif;
color: #0f594d;
background-color: #fff;
}
header {
background-color: #34495e;
z-index: 999;
position: relative;
height: 100%;
}
header h1 {
font: 45px 'Lato', Helvetica, sans-serif;
color: #fff;
font-weight: 300;
border: 1px solid #fff;
padding: 20px 25px;
text-align: center;
position: absolute;
bottom: auto;
right: auto;
left: 30.3%;
top: 42%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
img.hide{
display: none;
}
Since I created a circle PNG image, we need to position this element to the right side of browser and then give it a position fixed.
#nav {
list-style: none;
position: fixed;
right: 20px;
z-index: 999999;
top: 260px;
}
#nav li {
margin: 0 0 15px 0;
}
.background-fixed {
background-size: cover;
position: relative;
padding: 45px 20px 0;
background-repeat: no-repeat;
background-position: center center;
}
Next, let’s work with background styles. First, I will use generic styles on our h3 tag, which is the title and paragraph tag as well. Notice that I’ve set up a border white on my h3 to make it a bit attractive. Now for each background image, I set up a different background color. This will be use later on as we try to make some changes on our layout on smaller viewports. Let’s also include here the styles for our footer. Just basic blocks of code.
.background-fixed h3 {
font-family: "Lato", Arial, serif;
font-size: 45px;
color: #fff;
margin-bottom: 16px;
font-weight: 300;
border: 1px solid #fff;
width: 100%;
padding: 10px 15px;
text-align: center;
}
.background-fixed p {
font-family: "Lato", Arial, serif;
font-size: 18px;
}
.background-fixed.img-1 {
background-color: #2dcc70;
}
.background-fixed.img-2 {
background-color: #e84c3d;
}
.background-fixed.img-3 {
background-color: #d25400;
}
.background-fixed.img-4 {
background-color: #9b58b5;
}
footer{
background: #172029;
padding: 15px 0;
}
footer p{
text-align: center;
color: #fff;
font-weight: 300;
}
Since the background fixed effect will only work on large screen and will not appear on mobile size viewports, we need to hide the whole big background image on small devices and display our default images that have a class of hide. Let’s have fun with our media queries and fix the look of the layout on smaller screens.
@media only screen and (min-width: 1048px) {
.background-fixed {
background-attachment: fixed;
}
.main-content {
width: 30%;
left: 8%;
}
}
@media only screen and (min-width: 768px) {
.background-fixed {
height:100%;
padding:0
}
.background-fixed.img-1 {
background-image:url(../img/img-1.jpg)
}
.background-fixed.img-2 {
background-image:url(../img/img-2.jpg)
}
.background-fixed.img-3 {
background-image:url(../img/img-3.jpg)
}
.background-fixed.img-4 {
background-image:url(../img/img-4.jpg)
}
.main-content {
width:38%;
position:absolute;
left:8%;
bottom:auto;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%)
}
.main-content h3 {
font-size:45px;
font-weight:300
}
.main-content p {
font-weight:300;
font-size:18px;
line-height:1.8;
color:#fff
}
}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
header h1 {
left: 50%;
margin-left: -260px;
}
.main-content {
width: 35%;
}
.background-fixed h3 {
font-size: 40px;
}
}
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
header h1 {
left: 50%;
margin-left: -173px;
}
.main-content {
left: auto;
margin: 0 auto;
padding: 25px 20px 20px;
text-align: center;
width: 480px;
}
.background-fixed h3 {
font-size: 28px;
width: initial;
}
.background-fixed p {
line-height: 1.6;
color:#fff;
font-size: 16px;
}
img.hide {
display: block;
margin: 0 auto 20px;
max-width: 100%;
width: 60%;
}
.background-fixed {
padding: 0;
}
}
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
header h1 {
font-size: 25px;
left: 50%;
margin-left: -165px;
}
.main-content {
left: auto;
margin: 0 auto;
padding: 25px 20px 20px;
text-align: center;
width: 320px;
}
.background-fixed h3 {
font-size: 28px;
width: initial;
}
.main-content.dark > p {
color: #fff;
}
.background-fixed p {
line-height: 1.6;
color: #fff;
font-size: 16px;
}
img.hide {
display: block;
margin-bottom: 20px;
max-width: 100%;
}
.background-fixed {
padding: 0;
}
}
jQuery for Navigation
Our circle navigation on the right side of the screen will not work yet with plain CSS. To make this functional, add our jQuery below the <script> tags. We’ve used click function along with our scrollTop function and offset function to set the coordinates of every element and make the scrolling effect active on every slide via scroll class.
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
Wrapping Up
This is a perfect example on how to create a background-fixed effect. With pure CSS, there is no logic or additional DOM manipulation needed to create this illusion effect of course aside from the navigation that we’ve created.
background-attachment: fixed will lead to much more creativity to your websites. Try out this little gem, it’s so quick and feel free to mess around; I am confident you’re likely to get hooked!
2 Comments