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/
Bro thanks for this tutorial this helps me a lot , you really explained it smoothly 🙂
Glad it helped you out! Thanks for the kind words.
i want to download it not have a look
Just want to say a big thank you for this and other tutorials. Tutvids tutorials have really helped me over the years. Appreciate you taking the time!
Hi, Nathaniel,
I only can pray you will read this. I did everything as you said and I have created wonderful website with buautiful picture as a background (perfectly working offline), and I thought – WOW and I rushed to update my wensite. When I copied my files to the server it did not work! I can not see the background picture at all (it is still white). I have checked everything few times and yes I have the picture and all the paths right and it works offline perfectly which is strange. Do you know what might be the reason?
Thank you very much. Help will be very appreciated.
Hey Elena,
Somehow my post got lost here so I’m re-posting. Presumably you’ve found a solution by now or you’ve given up since it’s been 5 months. For other people who run into this problem it’s important to know it’s important to keep consistent with the case in your file names and paths. Windows in NOT case sensitive however LINUX / UNIX which makes up many of the web-servers IS case sensitive. For example in Windows ImageFileName.jpg looks the same as imagefilename.jpg however in LINUX/UNIX they are not the same and your tags will not point to the files correctly. Good coding practice it to always keep your file names and paths consistent. Hope this helps, if not you then someone else.
Hi Nathaniel, thanks for the tutorial, but…if I want a scrollable effect in a div that adapt at the screen height of any computers??? exsample: http://mahzedahrbakery.com/
PLEASE HELP ME!
Cheers! was looking for a solution for a few hours.
can you give me the codes of this please.. i need this bc i need to make some project for school :'(
Just discovered this amazing website! Many Thanks!
Thanks! Worked like a charm. 🙂
Wait a minute. At around 6:48
there was the full background and one second later the (pre-prepared) white box / website stuff was below the background and one second later it’s all groovy with the white opaque website on top. NO explanation? I do I get there? I saw the CSS below and tried that, no luck. Help???
cool thanks worked for me
Hi! Thank you so much! However, my background image doesn’t keep its ratio when the page is narrow… It stretches. Is this normal behavior? Please have a look: http://handmade.lafacade.com/test.html THANKS! I appreciate it a lot!
Anyone? Thanks!
Nobody’s answering. I took my link off. Too bad. Thanks.