Full screen backgrounds are ubiquitous across the web. In this quick and simple tutorial I will show you how to create stacked full page backgrounds all with centered elements. This will be achieved with pure HTML and the CSS viewport unit properties (vh, vw, vmax, vmin)
PREREQUISITES
- There’s a myraid of websites which offer free high resolution images. The three images I used came from unsplash.com
- I also used a Google font ‘Ubuntu medium’. Copy and paste this code into your header to retrieve the font:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:500' rel='stylesheet' type='text/css'>
Firstly lets set up the scene. Within the <body> tag we will have three <divs> all with a class of ‘sections’ and id of ‘section-1’, ‘section-2’ and ‘section-3’ respectively. In this example I will have three full page background “sections”, you can have as many as you want.
<div class="sections" id="section-1"> </div> <div class="sections" id="section-2"> </div> <div class="sections" id="section-3"> </div>
Now lets add the full screen images. Within your <header> tags add <style> tags to hold our CSS code. By default every <html> and <body> tag comes with some predefined padding and margin, so set these values to 0. To understand why we set overflow-x to hidden, you need to understand what we have done in the .sections class. Each div containing the .sections class will span the entire width and height of the window (to hold the full screen bg images), to achieve this we use viewport units:
vh– equal to 1% of the height of the browser windowvw– equal to 1% of the width of the browser windowvmax– equal to the larger of ‘vw’ or ‘vh’vmin– equal to the smaller of ‘vw’ or ‘vh’
The thing to take note of with viewport units is that they also take into consideration the browser scroll bars. So they’ll be a slight overflow in horizontal since the image size will be width of viewport + scroll bar width. This isn’t a issue with OS X as the scroll bar is hidden and doesn’t register as having any pixels, but for all others, 17px will be added together with viewport width. A nice simple trick to circumvent this issue is just to set the parents (in this case its the <body>) overflow-x property to hidden. Thus the 17px will be hidden away from view. Other solutions would mean adding some javascript, of which this tutorial is only meant to use CSS and HTML
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
.sections {
position: relative;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
text-align: center;
}
#section-1 {
background-image: url('cross.jpg');
background-position: center;
background-size: cover;
}
#section-2 {
background-image: url('deer.jpg');
background-position: center;
background-size: cover;
}
#section-3 {
background-image: url('balloons.jpg');
background-position: center;
background-size: cover;
}
To add the images to the different sections we resort to their unique id names. We select the image we want to use using background-image: url('.../image.jpg);, background-position: center; centers the image onto the screen and background-size: cover; enlarges the image such that both its height and width engulf entire window whilst retaining the images intrinsic aspect ratio.
To date, the top two most prevalent screen resolutions are 1366×768 and 1920×1080 pixels. The images you pick have to accommodate these screen sizes with no scaling. Using Photoshop I scaled the images to roughly 2000×1500 pixels, each image taking up about 400kB of memory. Devices such as phones/ tablets, do not require such large images. Half the size of each image to about 1000×750 pixels. Use the CSS @media query to select these mobile friendly images when it detects that the user screen size is below a certain threshold (e.g. max-width: 992px)
@media screen and (max-width:992px){
#section-1 {
background-image: url('cross_mob.jpg');
}
#section-2 {
background-image: url('boat_mob.jpg');
}
#section-3 {
background-image: url('balloons_mob.jpg');
}
}
At this point you should have three gorgeous full screen images stacked directly on top of each other. Now lets add the content within each section:
Within each <div> with class ‘section’, add another <div> giving it the class ‘content-wrapper‘ with following CSS code:
.content-wrapper {
color: white;
position: absolute;
margin: 0 auto;
padding: 0;
width: 60%;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
left: 0;
right: 0;
}
margin: 0 auto; horizontally centers the .content-wrapper, setting all margin values to 0. Since we’ve declared its position as absolute, we will use the top, left and right properties to further align the .content-wrapper. top: 50%; moves the whole .content-wrapper vertically down by 50% of the total window height. Set both left and right to 0 (since already horizontally centred). In order for the different .content-wrapper divs to be perfectly centered vertically, we will need to move them up by half their respective dimensions. This is what the transform: translateY(-50%); code does. translateY(-50%) moves the respective div in the negative y-direction by a value which matches 50% of the div’s width. Thus if the div has a width of 200px, translateY(-50%) will move the div 100px up the screen. For cross browser compatibility, include transform properties with the -webkit- (Google Chrome), -moz- (Firefox) and -o- (Opera) prefixes.
Within this div is where we will embed all the different elements (images, text, divs etc.) we want to display in the middle of each full screen background section.
<div class="sections" id="section-1">
<div class="content-wrapper">
<h2>OPENING SECTION</h2>
<div class="divider"></div>
<p class="text-para1">Some text to discuss apologetics</p>
<p class="text-para2">pic courtesy of www.unsplash.com</p>
</div>
</div>
<div class="sections" id="section-2">
<div class="content-wrapper">
<h2>SECOND SECTION</h2>
<img src="divider.png" class="divider2" />
<p class="text-para1">More text to talk of the deer and whatever else</p>
<p class="text-para2">pic courtesy of www.unsplash.com</p>
</div>
</div>
<div class="sections" id="section-3">
<div class="content-wrapper">
<img src="portrait.png" class="portrait" />
<h2>NAME AND SURNAME</h2>
<img src="divider.png" class="divider2" />
<p class="text-para1">Some other text goes here</p>
</div>
</div>
And the subsequent CSS code:
h2 {
font-family: 'Ubuntu', "Book Antiqua", 'Sans-serif';
font-size: 6vmax;
font-weight: 500;
margin: 15px 0 auto;
}
.text-para1 {
font-family: 'Garamond', 'Ubuntu';
font-weight: 300;
font-size: 3vmax;
margin: 0;
}
.text-para2 {
font-family: 'Garamond', 'Ubuntu';
font-weight: 100;
font-size: 2vmax;
margin: 0;
}
.divider {
background-color: white;
height: 1px;
width: 45vw;
margin: 15px auto;
padding: 0;
}
.divider2 {
width: 50vw;
height: auto;
}
.portrait {
width: 30vmin;
height: auto;
}
By using the viewport units to initialize all the dimensional data of our elements we ensure that the dimensions will be commensurate to whichever screen resolution they’re being displayed on
BROWSER SUPPORT
It is important to note that viewport units are only supported in IE 9+. And even then the support is partial. You can always resort to using % instead of the viewport units
Pingback: Smooth scrolling to anchor on different page | TC | Programmer, Artist, Blogger()