CSS & CSS3 Full Screen Background Image – Dreamweaver CS6

1. Choosing The Background Image

This may go without saying, but just to be thorough you want to make sure that your background image is probably at least 2000px wide or so. Bigger is better when dealing with web background images, just take care to optimize that image as much as you can.

2. CSS Technique: Place The Image

With the plain CSS technique we need to first place our image that will be the background image. For the sake of placing this is the proper place, let’s jump into Code view and drag our background image from the Files panel into the first line beneath the opening “body” tag.

3. Assign ID To Image

Go to the Design view and select that large image which will probably be covering everything (You can scroll down to see your website below this image if you’re worried) and once you’ve selected the image, look to the Properties panel and give this image an ID name of “fsbg” which will be our little acronym for “full-screen-back-ground”.

4. Start Adding CSS

We will use Dreamweaver’s tools for adding CSS and add CSS right to this document. If you’re advanced enough that you’re writing CSS and/or using an external CSS file that’s great and highly recommended, but we’re going to keep it simple here. Go Window>CSS Styles to open the CSS panel and choose the little “Add New CSS Rule” button in the bottom right of the panel.

5. Target The ID With CSS

In the New CSS Rule dialog box we want to set the selector type to “ID” and then set the ID to “#fsbg” and the rule definition as “(This Document Only)”. This will place the CSS code in our page here and target any HTML element with the ID “fsbg”.

6. Background Scaling With Proportion

Choose the “Box” option and set the width to “100%” and set the height to “Auto”. Hit the “Apply” button and move on to the next step.

7. Lock The Background In Place With Positioning

Next, choose the “Position” option and set the Top and Left options to “0” -this presses the image to the top left corner always. Also set the Position to “fixed” -this will allow our content to scroll over the background image. Finally, set the Z-index to “-100” -this will push the background “below” all of the other content so our website sit “on top” of our background. Hit “OK” to commit the changes.

8. Manually Add CSS Properties

We still need to add two little bits of CSS. Back in our CSS panel hit the “Add Property” link button and add these properties: “min-height” set to “100%” this will ensure that our image fills the screen area top to bottom. Also add a property “min-width” set to “1040px” this is the width of the wrapper on my site so I always want the background image to at least be as wide as that. Refer to my screenshot if you have questions about what you type where.

9. Preview in Browser

Hit “F12” to preview in your browser and check it out. Resize your browser window and watch the background change too.

10. This Method Works In These Browsers

This version is great for Google Chrome, Mozilla Firefox, Opera, and Safari. It also works in IE7, 8, and 9.

11. CSS3 Technique

Now we’re going to use the more modern and faster technique which utilizes CSS3 and we will also write our CSS in an external CSS file by hand. Let’s have some fun with this. We are using a technique that can be found on CSS-Tricks.com, kudos to Chris and his amazing site!

12. Attach The Background Image

Start by targeting the “body” tag with CSS and attach a background image and we’ve set the background not to repeat, to be centered horizontally and vertically, and it is also set to a fixed position.
[code type=”css” title=”Code”]body {
background: url(../images/fullscreen-bg.jpg) no-repeat center center fixed;
}
[/code]

13. Set The background-size CSS3

We are now going to use “background-size” to specify that this image must cover the whole screen area. We duplicate “background-size” with the prefix for Safari & Chrome (-webkit-) and then again with the prefix for Firefox (-moz-) and then again with the prefix for Opera (-o-). The original “background-size” is adequate for nearly all modern browsers, but we still want to be specific for the older versions of those browsers.
[code type=”css” title=”Code”]-webkit-background-size: cover; /*Used by Safari & Chrome*/
-moz-background-size: cover; /* Used by Firefox */
-o-background-size: cover; /* Used by Opera */
background-size: cover; /* All Modern Browsers */
[/code]

14. This Method Works In These Browsers

This version is great for Google Chrome, Mozilla Firefox 3.6+, Opera 10+, and Safari 3+. It also works in IE9+.

15. Finished Product

Hit “F12” to preview the background in your browser and admire your handiwork!

Additional Solutions: jQuery Packaged Solution: jQuery Backstretch

http://srobbin.com/jquery-plugins/backstretch/

Additional Solutions: jQuery Packaged Solution: Supersized

http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/

Follow Me On Twitter!

Like Tutvid on Facebook!