Full Image Background Slideshow Part 1 of 3

jQuery Slideshow

full-imageBkgrd1 This post isn’t technically the jQuery slideshow that I’ve been referencing in my jQuery Slideshow Tutorials, but I’ll be using quite a bit of the same coding so I decided to include it in the list.

[list_category name=”jQuery Slideshow”]

The Goal

This 3 part post will include setting up a full-image website background that is also a slideshow. For an example, check out the jsFiddle at the bottom of this post (it will ONLY have part 1, not the working slideshow).

jsFiddle heads-up: the background image in the embedded jsFiddle will scroll down, but that’s an issue with the jsFiddle embedding. If you view it on their site, it will not scroll.

We’ll have two basic parts of Part 1 Tutorial: the HTML and the CSS. Parts 2 and 3 will have the jQuery necessary to make it work.

The HTML

The HTML is very important to set up correctly because everything else will be effected by how we organize this portion. Here’s the full code:

<div id="backgroundImage">
 <img src="http://kimjoyfox.com/wp-content/uploads/Beijing-2011-5.jpg" style="opacity: 1;">
</div>
<div id="arrowPrev" style="opacity: 1;"></div>
<div id="arrowNext" style="opacity: 1;"></div>

Explanation:

Line 1-3. The Div “backgroundImage” is where the images will actually exist. We’re starting with the first image in our slideshow already loading directly in the HTML. Also, we’ll add in a “style=opacity:1”. Don’t worry about that yet, as it will become clear why we put it there instead of in the CSS later on.

Line 4 & 6. These are the arrows that we’ll add into our full-background slideshow so that the user can cycle through the images. If you don’t want that capability, simply leave off the elements that pertain to the arrows at each step in the process (I’ll warn you along the way).

The CSS

The first piece of magic happens here: we make sure the image is the full-width of the screen.

Note: I won’t be talking about a full-image background website in light of Responsive Design at all in these posts, but hopefully down the line might add another post discussing this.

#backgroundImage {
 position: fixed;
 z-index: -1;
 width: 100%;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 top: 0px;
}

We’ll start with the Div that the image is housed in, “backgroundImage”. Starting with top line, we’ll go through each.

Position: fixed; This makes the background stay in the background, regardless if the user scrolls down.
z-index:-1; Puts the Div behind everything else on the page
width:100%; makes the width of this Div 100% of the screen
background-size:cover; (and all the variations thereof – just in case) makes the background expand to cover the entire width of the Div.

#backgroundImage img {
 min-height: 100%;
 width: 100%;
 height: auto;
 position: fixed;
 top: 0;
 left: 0;
}

Next we’ll deal with the actual image inside the Div “backgroundImage”. Here’s the line by line!

min-height:100%; The minimum height of the image will be the whole height of the screen.
width:100%; again, width is 100%.
height:auto; we set both of these because we want the height to set automatically (so that it doesn’t mess up the dimensions).
position:fixed; same as the last
top:0; setting the position of the image to start on the top.
left:0; setting the position of the image to start on the left.

#arrowPrev, #arrowNext {
width: 30px;
height: 30px;
position: fixed;
top: 50%;
opacity: 1;
z-index: 99999;
}

Now this CSS is all about the arrows – all the coding that deals with both arrows. Here’s your warning: if you don’t want the users to be able to navigate the slideshow, just leave this out.

width & height: this will set the width and the height of the two divs.
position: fixed; we want these to be in the same place on the screen regardless.
top:50%; we want the arrows to be 50% from the top of the screen.
opacity:1; if you want these to not be visible when the page first loads, you can change it to 0.
z-index:99999; so this might be a bit extreme… but I put it at 99999 so that it’s over every other thing that you might add to the page.

#arrowNext {
right: 10px;
 background: url('http://new.llhinteriors.com/wp-content/uploads/arrows-next.png'); }
#arrowPrev {
left: 10px;
background: url('http://new.llhinteriors.com/wp-content/uploads/arrows-prev.png');
}

and finally, the last CSS! These also deal with the arrows, but only the code that is individual to each one.

right/left:10px; This sets where on the screen the buttons will each go – one on the right, one on the left.
background:img src; We’ll give each arrow its own respective image.

Full Image Background – Finished!

And that’s it! We’re done with the CSS and the HTML. The next posts will deal with the jQuery to make the thing work.

Sidenote: If you wanted just a full-image background, this post was all you needed!

jsFiddle heads-up: the background image in the embedded jsFiddle will scroll down, but that’s an issue with the jsFiddle embedding. If you view it on their site, it will not scroll.

A big Thank You to Amber Fox for her fantastic photos of China!

Comments