Although large backgrounds at website look very nice it kills bandwidth and scares of visitors with slow internet connections.
So here are some tips&tricks how to use large background images and still have a fast loading speed:
– use the .gif extension (max 256 colors, with transparency support)
– use the .jpg extension with a higher compression (between 60 and 70)
– split the large image into smaller chunks, but requires some extra CSS
– load the background at the bottom of the HTML, requires some extra CSS

Thanks. Seamless patterns are boring.

That’s a very cool technique, every useful. Thanks a lot!

Have you thought about using the html selector when adding two images? One on html and one on the body.

very geek trick!! I like the tiling image of sky from example #3..

omg, i’m so waiting to get your new post, and now,,, very great technique,,, thanks nick

@2 : I think several small images will take longer to load than a big, because of several server requests instead of one. Plus the ugly “mosaic-effect”…

Thanks,
large background websites seem to be the in thing and once the image is cached you have a beautiful website that loads very quickly.

I personally have a large background on my blog (http://ozblog.com) and spent some time making the image wrap neatly so it would works on widescreen and high resolution displays.

Thanks again and the demo zip is a big help.

it is as clear as noonday, but thx for work.

That double background image trick is excellent. Is there a reason why display:table works for this? As in, the element is bigger than the display but doesn’t make the browser scrollbars appear. The W3C CSS spec isn’t that clear on display: table’s unique traits, other than it makes the element display as a table!

Wow… thank you sooooo much….. am surely going to redesign my website based on these guidelines and design.

Hi

Great article about this technics… But it seems there’s a problem with IE 6.0 and smaller displays than backgrounds (the background isn’t centered as good as it should to be, and is docked on the left !)

Have you a solution for that ?

Very Nice

Very nice. Thanks for sharing.

Very good, this site provides really good stuff always. I’d like to point that

width: 100%;
display: table;

may arise some background positioning issues when used in Chrome & Safari.

How did you create the background image? I can keep looking at it for a long time. Good luck, dude.

Simply amazing, the grapich tech tutorial are so easy to understand, thanks for this tutorial!

Nice tutorial. maybe you can help me.
I’ve been doing the full background stuff for yonks but I have only recently noticed a horrendous problem.
I like to position my menus over the background graphic for nice effects.
Well that’s all rather splendid until someone changes the text size in the browser, then all sorts of problems occur.
Is there any code which does a sort of noresize for text?
yours confusedly…….Stephen

Thanks, it’s great tutorial, for a long time i was searching this
Gracias, es un gran tutorial, por mucho tiempo yo buscaba esto.

Thanks for useful tut ;)

@Tor, Aaron Bassett
Setting a background for an html tag (thus, forcing the browser to calculate the width and height of the html element) will cause the body tag to be rendered as div and *not* fill the browser window’s full height (only as far as the content goes).
In such cases height/min-height properties should be set additionally.

@Colin
display:table works here because the body is not *shown* as table, but *rendered* as table, i.e. the minimal box width is calculated. No side effect on seo/semantics :-)

@Cédric
Notes for IE6
1. setting expression like property for body’s min-width will fix this issue.
2. In some cases the width of the image needs to be wider than the container’s width.
For example:
* html body {
width: expression(document.documentElement.clientWidth < 904 ? "904px" : "auto");
}
Please note that such css selector is not valid so it should be placed in a separate CSS file and linked using conditional comments. 904px is a value for webdesignerwall.com site’s min-width.

@Daxion
Could you please clarify what issues arise in Chrome & Safari?
There might be some issue when printing the page, however print-versions are usually created without backgrounds so for media=”print” display: table is not used.
There *might* be some rendering issues due to the usage of background of html and body at the same time, but these browsers are updated very frequently so this shouldn’t be an issue (early versions of safari 3 for windows did not even render strong tag at all ;-))

Thanks for the tips…

But i really wanted to find a way to preload a large body bg image using javascript/jquery and make it fade in when its loaded…but i failed.. i used the jquery load(), append() functions,etc.. it worked with images in other divs but not with the body bg… its available in flash, but i didnt find this technique done with javascript. anyone tried this?

..and yeah, keep up man!

Great. This tutorial would have helped much when I tried to put a fixed background on my site.

If anybody is willing to try it, the CSS would look like this:

body {
background: fixed url(‘./images/lacajita.jpg’) no-repeat center;
color: #333333;
}

This way, with “fixed” and without “top”, it stays completely centered, even when you’re seeing just a little part of the website through a small browser window.

i always love when people dissect their sites and show their css tricks to making stuff work.

Sweetness! Thanks for the tips. I am not the best with css but I was looking at the code and it looks like you applied the second background image to #page, not #wrapper, is that right? This is a dumb question but do I have to call it Page or Wrapper for it to work? For example, when you specify the cork image it will only show if you enter Body.

I would be more careful with huge backgrounds in terms of using website for different browsers – and I’m not talking about chrome/safari issue. Major problem is still pixel rounding which is different in different browsers.
E.g. FF3 will put offset 1px to the left, while IE7 will do it other way plus 1px more. Issue is appearing mainly when ‘center’ is in use.
Personally I found the way doing backgrounds in separate divs (one below body) with ‘top left’ or ‘top right’ (image is still fixed with pixel size, so shouldn’t be any problems with it). That way makes it safer for cross-browssing & saving your time to make fixes in IE.

I hope pixel rounding will be unified one day in all of the browsers (knowing market actually, proofs me wrong).

Great tips! thanks everybody

I was just recently wondering how to do the big background CSS image stuff, and bang I find this link on another blog… I should have known it was going to direct me to web designer wall… this site is a freaking wealth of information.

Excellent tutorial, Keep up the good work.

That’s great !
I really appreciate your explanation.
It’s help me a lot.
: )

Pretty useful article. Thanks for that. Exspecially the last solution with the html&body background.

This article came at a nice timing. I just wrote a WordPress tutorial on using Custom Field, so each WP blog entry can be customized to have its own look. In my specific examples, I included the use of a large background also.

http://www.8164.org/wordpress-custom-field/

I hope someone finds this helpful.

Nothin to advanced here, tho always appreciated.

In your first example, what do you mean by “two extra lines in the body element?” Im guessing you meant ‘2 extra declarations in the body selector” (width & height)? I’ve never experienced this so I’ll have to check it out.

Thanks again

Awesome! Ive been trying to do this for sometime. Can’t believe i didn’t think of using the HTML tag to add a background – http://www.dubblevision.com

Cheers :)

very useful tips you have here.

Logic applied to webdesign. Good article.

Hi!
Great article!

Great article, but i have a doubt. “display: table” i do not understand this. Can someone explain me?

Thanks you all, and greetings from Argentina

Thanks for the tip. Working with large backgrounds is one of the earliest CSS problems a designer faces. This is a great tutorial on a solution.

whoah, it’s nice but… I don’t know if 1280px is large..

I have a query with Common Mistake,the bgimgage is not tally with the bgcolor.if reader do it like this .i thinks the result maybe not well.

Thx for Markup4U team ;-)

Nice article.

You can also fix the background image thing by using a min-width property, you then dont get the background sliding after it has hit the min-width.

This works in all browsers as far as I can tell!

Just set the body to min-width:900px; or something. Pretty sure this works the same.

Still good article with some nice examples.

yeah large backgrounds are the best. i like pages with background photos. i have launched a new page with big bg fotos. i love it :)

check it: http://www.area241.com

that’s very handy to know! as am busy updating my site atm!
thanks again for the tutorial…

http://www.mediacake.net

I’d like to see a tutorial on how to have a website where there is a large background image that resizes to fit the browser window without having any scaling issues or the image being cut off on larger displays. A good representation of this is http://www.august.com.au/. Resize the window and you will see what I mean.

I know it has something to do with Flash, but I’m not really sure how this was accomplished.

Thnx for sharing your technique!

@MattZ
It’s flash based website

Wow… AWESOME!! Your tutorials are really fantastic… Your site is a master piece in itself.. Thanks for sharing this cool stuff.

Pure awesomeness :)

Brilliant work yet again, keep them coming :-D

Thanks, but sometimes “display:table” not work properly in IE6.

Very impressive again another tutorial that is quite simple and will help a lot of people. Keep on the good work

@Skracanie linków
Not entirely. The Background is flash, but all content is displayed using HTML / CSS. However, after delving into the source code it seems that the background is loaded at 100% width and 100% height via Javascript. It uses the SWFObject script, http://blog.deconcept.com/swfobject/, and a small Javascript function called in the header. I’m wondering if this is all that is necessary, or we need to do some extra stuff in the actual Flash file.

@flash designer
IE6 and IE7 do not fully / properly support ‘display:table’. Not sure if IE8 will. I think that IE8 beta is supposed to, but MS may drop support.

@Daxion
Could you please send us a link to the test site or the local version of site with the issue mentioned? You are welcome to use our contact form or send email directly to dev at markup4u dot com

thanks for the info..really appreciate it..well done!

Very useful article, thankyou very much!!!

Thanks for showing us all the possible methods :) My own blog is much simpler and basic, but maybe in the future I will use this technique for other sites. I’ve searched before for tutorials on how to achieve it, but this is a very complete one. In this tut you can figure out your self what’s the best way for you.

That’s great! But you don’t tell us how make backgraunds such as in your collection of Large Background Websites!
How creates a large background site using big pnoto. For example
http://www.geo-alliance.com.ua for difference resolutiion of display!

This is a great website I will recommend it to everybody.. Thank you for the info great help.
Iceman

This is great web design — THANKS!

Any chance on getting an article on footer layout techniques as well?

cheers

Dave Cutts

In the sample files inside demo.zip, the content area continues all the way down until the end of pages. What do you do to end the content are earlier. Do you simply add one more div for the footer under the content div and use the same background colour that you use in the body?

Just another quick question, I’m find it easy to learn CSS and build websites with CSS layout but I can only build static HTML websites. I see that you use wordpress in your sites. Could you write a beginners quide on implementing wordpress into your designs? Where do we start?

Cheers
Erdinç

Great tutorial, but as some guys mentioned over here, you still don’t give a solution for a scalable background image across the entire page, maybe this can help those people: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

Cheers from Holland,
Dennis

Nice article.
Thanks a lot for your explication.

A common technique that I’ve used for some time now, thanks for sharing :)

This was the exact project I am working on this weekend. Thank you for help as always ;)

Hi Nick,
Just wondering if my site was the inspiration for Example #3.
http://www.webdesignerbristol.co.uk
Or is it that my site is just the most unoriginal concept ever!
Cheers Geoff Ellis
PS. Love web designer wall and best web gallery

The two extra lines in body save me.
Thank you!

Great explanation, the two extra lines did the trick!

This is what I always do since those large flat screens, what I really want to know is how you make a large background like http://ringvemedia.com/
That background will grow if you make you browser bigger. :)

I’ve always loved this look, but what kind of size do you have?

us men love this book too.

i agree with william green

what I really want to know is how you make a large background like http://ringvemedia.com/
That background will grow if you make you browser bigger.

You can see the CSS code for ringvemedia.com at this link: http://ringvemedia.com/g/a.css
That shows you how the background stretches out. It is a cool effect.

This is a great tutorial! I would like to see more published. Maybe on a weekly basis? Your site is great!

Big shout out to Smash in “Y” Town! What Up YO!

Wow, it’s really a good tip ;-)
Thanks a lot,

Hi from Caribbean,
T&T
http://www.tropical-paradise.net

The design is really pretty

I’m glad you took the time to go into this topic, there are a lot of people who bugger it up so touch would we’re gonna see improvements coming soon :)

Diego

http://www.corporatewebsolutions.net

I learned something here – about backgrounds shifting in Firefox. Thanks.
But what do you do about IE 7? Backgrounds declared on BODY do not zoom along with the rest of the page.

Great Tutorial
Thanks

Nice tutorial and thanks for the pointers

its my birthday today and this website has made it the best day ever
thankyou

Nice article…
I love large background images and working on a site that uses one.
I think designers should use them more.
Cheers

Thank you so much for this article! Your timing is impeccable. Now I’m ready to design and code websites with large backgrounds!

Nice practice I also like to use this on my sites. Thanks for sharing.

Awesome … Nice Experimental …Really you’re making good professionals for ever… I will pray for you..
please have the look my site give your feedback
www,nxsofts.com

with love
Mohan
[email protected]

I can’t get large images to work in IE properly in vista. IE7 and 8 both repaint the background image, like it is not caching? Basically took a blank doc in dreamweaver, attached a style sheet that had one style body with one big image. No problem in FFox or on a mac.

Oddly if I put the style sheet in the document, and not link it, it doesn’t work. I have a bunch of includes and can not go this way.

Thanks for this article and sharing your skills!
Very useful!
Regards

Great job, thank you so much. Quick question, I used your trick; “width: 100%;
display: table” in the body tag but in Firefox the browser is shifting by one pixel every other pixel? Sorry about my English, any help would be extremely appropriated. The link is http://www.studiodork.com

Hi, i have a problem to add a beautyful image as background of my new site i’m developing. I want to use this image: http://www.lost-italia.net/test/background.jpg
I have tho big problem: the image has to be screen resolution-indipendent and if i decided to repeat the image to cover all the screen, i don’t have to notice too much there’s a repeating.
Thanks very much for the help and congratulation for the site!

Luca

I ever missed “center top”..that’s a good tip.
my blog

sorry i meant top center

I can’t quite think of a website on which the background gets croped off?!?

thanks i have implemented this on my website, its not as good looking as yours but with practice im sure i will get better. thanks i love this site :D

ive implemented this on my bebo skins website.

http://www.wantaskin.com

its not the best, but im still learning, what do you guys think?

another interesting one is the display:table. Whao!! just did the magic i wanted. Couldnt help but say thank you again ;) This is simply awesome!!!

Thanks for this, I plan to use this for a new site, will keep you posted, as I think it will be a pretty one!

XHTML and CSS was implementing a project in my browser and all worked very well, but in IE (6,7 and 8), resize the browser when the Background “walk” with the screen ..

to resolve some CSS Hack?

thanxs for the manual, I´ll use it in my nex poject.

Once again, a brilliant addition to the site.
Once again, exactly what I was looking for.

There was a theme on OSWD that uses this and I was interested in doing this as well with a design I have been playing around with. And sure enough, webdesignerwall has it in stock!
Click the ads people, this site deserves it!

I love you comment script. Where can I purchase its PHP code from?

Thank you

Yamen Elasadi

Needed to skin a word press site in a flash and your tutorial came in very handy with a large custom background image.

Thanks M Kelly

If the table is blank and you have a background displayed there it would not display in Mozilla and Netscape. You need to have some content there for the background to display.

On the last example (html selector), on a 1024×768 screen resolution, if you make the text large enough (~10 times) to appear horizontal scroll-bars, if you scroll to the right, the body background appears cropped to the width of the browser.

And that is my problem too:
wide background on html, wide background on body, and if there is a horizontal scrollbar (1024 resolution, and a #wrapper of 1060px width, or a wide element on the page, or….anything else) the body background appears cropped to the width of the browser (not the #wrapper).
if you remove the html background rule, the body background appears ok.

my question: how can you have backgrounds on html and body, and not be cropped if scrolled?

it’s good tutorial..thanks 4 your info..

Hello,
I want CCS code and PHP Code with script, can you advice me how to i get it?

My Best,

Hedie. I don’t know why the display:table is not working for you, however there is another approach. In your body tag just put min-width: “width-size of your content”; This should work as well.

I have been looking for some backgrounds to use for my next project.

Nice :) Thanks, Nick!

this is absolutely beautiful.
I hope one day I will get more skills under my belt to be able to use it.

Thanks for this tutorial. It really helps set things up when starting to develop a website. Cheers!

How did you dealing with .png (transparency) in ie6 as with the “corkboard” layout?
Thanks!

how do you move the content section down so the background logo at the top can be seen?

why in firefox i cannot see the background colour? :( am i doing something wrong?

it is very intersting useful topic,
Please keep going , i am a fan of your site now
Viktorja

Ive been trying to figure out how to keep the background from shifting everytime I resize a window…this is the best and easiest tutorial I’ve found.

Thanks!

Thank you so much for this tutorial. Very clear and easy to understand!

Very nice. It opens up a whole new avenue in web design techniques. Keep up the good work!

I am still a bit of a beginner when it comes to CSS but I may have found a solution to display your background color beyond your content in firefox. (please correct me if I’m wrong)

I changed the display from ‘table’ to ‘block’.

Not sure if this will work for everyone, but for me it works in both firefox and IE.

Hope this helps yall.
-Michael

http://www.olins.cn/en/how-to-css-large-background/ …someone swiped your content (and then used google twice to translate:from and back to English)

I love this article. I knew how to do example #1, but I’ve been trying so many ways to come up with something like example #2. I’m trying to understand why the #wrapper code makes it work the way it does. I love it! I think I need to understand display: table better. Thanks so much!

when I saw this blog some time ago
I also ask… how to make this ….???
and finally … I can find the answers here
thank you have shared
regard

The best place to start with CSS

Thank you, i tried to figure myself about double BG and i couldn’t get it done and your tutorial is the divine answer to that might!
Keep it up!

Hello.

Excellent tutorials here.

An issue: When you move the mouse wheel, a white area appears under the page in the Large BG sites.

Wow, I’m so glad I found this. I had this very problem this morning and was looking for a solution, great job, thanks!

Hey,

That sky background, is that something i could use on my own site? Buy somewhere or something?

I don’t wanna just steel it you know, nice guide by the way!

hi
in my case, the above demos are working fine in IE with transparent png images but when i do the same with my pages the png are not coming transperent in IE..
please help it out.. its freeking me .. as i tried evrything……..

Thanks , this is one of a great idea for web decoration.

good job！
i like it very much!

The “display: table;” tip was a LIFE SAVER. Thanks loads.

Hi,

I’m in the process of coding a site with a large background. I’ve been using this tutorial to attempt to get the background to display properly but I’ve run in to a problem with IE (surprise, surprise).

You can see what I’m working on here: http://www.comminternet.com/websites/innoftreasuredmemories.com/index.html

It’s working fine in Firefox and Safari. The problem seems to be that “body { display:table; width:100% }” which I got from your tutorial, doesn’t seem to take effect in IE7.

In fact, in your tutorial it doesn’t work properly in IE7 either. This example:https://webdesignerwall.mystagingwebsite.com/demo/large-background/cork-board.html is doing the same thing as my site in IE7, where the background continues to shift when you resize the browser smaller than the content area.

This is rather frustrating because I can see that webdesignerwall.com has implemented the same “body { display:table; width:100% }” method for the large background and it is working fine in IE7. I’ve been looking at your site’s code and I can’t figure out what the trick is to make this work in IE. Help please?

Efectively as Mariano Ripoll suggested, the min-width aplied to the body fixes the issue for IE7.

PS – I’m giving up for now, reverting back to CSS that had some sticky footer code (which btw is mutually exclusive with display:table). Just so nobody kindly spends time and effort to tell me what I already know.

PS – first of all, I discovered recently that as of a week ago my php was inserting a single html comment before my doctype, meaning IE was in quirks mode. This is immensely frustrating but at least now it’s behaving a bit more civilized. Still, the central problem of centering background AND having a sticky footer is unsolved. I discovered one interesting trick, which was to give the HTML element a background color – for some odd reason, this centers the BODY background image perfectly in everything! However, this doesn’t work correctly either because now the browser window cuts off the background bottom prematurely. I’ll update if I find a fix.

OK, so my solution isn’t perfect:

1. If the browser is narrower than the content, the background shifts. This doesn’t bother me, at least it stays still when the browser is narrower than the background image (which was my biggest problem with IE). The display:table method more strictly controls this behavior, but again, at the cost of the sticky footer.

2. If the browser is shorter than the background image, the page is made as high as the bg image, and the footer rests inside that height (assuming your content is short enough not to push it down). So basically if you have a tiny browser displaying a super-short page with a tall background image and a short footer, it looks like there is a randomly large space between the content and the footer. This doesn’t bother me either, it will pretty much never happen on my site with my userbase.

I hope my method is helpful to some of you regardless.

Agree with Gianfranco, if you add any background to HTML and then min-width to the BODY (width of your wrapper), then you can get rid of {width: 100%; display: table}.
And the good new is that it even work on IE6 (which doesn’t support min-width) because for strange reasons in IE6 the background is always centered without using workarounds.

Awesome! So it looks like the best solution is to apply a background color to HTML, and a min-width of your content width to BODY, and a min-height of your background to BODY. So for example, on a site with a 1400x600px background image and a 800px-wide content wrapper:

html{background: #000;}
body{min-width: 800px; min-height: 600px;}

Thanks to everyone here who helped develop this method!

Thanks for this!

What’s the license on the demos – e.g. this background image:
https://webdesignerwall.mystagingwebsite.com/demo/large-background/images/cork-bg.png

I cannot thank you enough for this post. The display: table and width: 100% were the last two pieces of the puzzle that I could not figure out.

Thank you so much!

Hi there,

This tutorial is just awesome! I’ve been looking for information on this feature in CSS for a really long time. I’m glad that I came across your site. Thank you very much for sharing this valuable information with your readers. This will help me alot in developing my very own WordPress themes.

Cheers,
Eddie Gear

Nice and thanks for this article..

Thank you. This is an useful information for background image setup in CSS..

Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.

I I’ve been working on a website for Moby dick and I am using a large background but have problems with the black background in the page properties not showing up in fire fox. Is there a work around for this as I see other large back ground sites with color backgrounds that fill up below the site. I even tried making the background image longer to go further beyond the bottom of the site but that did not work either. Help!

Doe Join

Nice and simple tute. I used a similar method on my website. Works like a charm, just need to make sure that the image file size isn’t too large. :-)

OH my!
Not to worry, found the answer by looking at the css file.

Thnx
FG

i have one question though,How can convert my banner image to a background so i can put another banner or text above it?Can you please reply to me if you do no t mind thanks.I left my email addr on this comment.Please help.

Nice Job! Clear and concise. I makes it so easy to get the concepts because of the screenshots..

always nice to read useful tutorials.
makes it easy to explain to others.
thx

Nice and simple tute. Really helpful

Great , How to: CSS Large Background
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

Thanks very much for this!!!!!!!!!!!!!!!!!!!!!!!!

the first tutorial on this topic i was actually able to follow! Thanks for that.

I tried to use this to have a full page background ad option on my site. Now I am wondering, is there any easy way to make it clickable (in case of an ad so that the whole backgroundimage is clickable)?

wow, but in the “sky background” source code, why did you wrote the body properties in the and not after the body tag?
thanks

Where can i find a theme which would allow me to use that CSS? I need the stuff that the background goes around ( i know its wordpress but i need the theme kind of like what is on here, the middle part which will expand as posts are added, and sidebar

any direction appreciated

I run into a problem with this. In internet explorer only there is a flash every time the background color and the background image loads its like in ie its delayed and it does it on every page/post Every time its like it doesnt even cache

Very cool tutorial! Very useful ideas too now that large LCD monitors are getting so cheap and popular.

This is a great tutorial, you made the examples very clear. Love the look of the web site with this background and color scheme.

very good!

Its Great, Please also describe about footer image like in this page. i.e. https://webdesignerwall.mystagingwebsite.com/tutorials/how-to-css-large-background/

It should keep hold with bottom even no text in a page.

Thanks in advance.

You have the prettiest website I have ever seen.

Great tutorial! Thanks! Just one doubt about the ones with “Photographic Styles”…

Wicked, Thanks!

Thanks very much for the excellent advice and clarity of presentation.

Thank’s for tutorial..very helpful

{width: 100%; display: table} css trick causes sticky footer css to break.

I had tried a workaround with respect to the IE-8 issue, wherein the background moves out of the page when your screen resize smaller-in large background scenarios.

Solution:
All you need to do is load the same image twice, one for the body, and the other for a header div container. Difference being the body will be showing the full width of 100% but the header container will show only say 1000px, of center of the image.

Have a look at the CSS for an idea:
body {
background:url(Images/bg.png) no-repeat center top;
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
width:100%;
}
#ms-container
{
background:url(Images/bg.png) no-repeat center top;
margin:0 auto;
position:relative;
width:1000px;
}

Trick here is – during resizing to higher resolution, the background keeps showing, while the center section remains steady, you get a continuous image- actually overlapping, one with 1000px centered to your screen, while the other being the big image, 100% to the body, in its full glory.

And when you resize to smaller resolution, the 1000px guy comes into play, while the body background image keeps on moving in the behind (who cares ;) all you see is the div container, which is stationary)

Worked successfully in almost all the browsers. But do verify it.

One note: ensure that you play with paddings, borders, positioning and any css property that can shift the div container position by a pixel or two. You dont wanna show the end user that you are loading two images. Also, site performance wud be affected a bit. Can’t help it.

Hope this solves the problem!

u rock!

ok

dat web site SUCKS:(

Thanks so much for double background example. This is the best technique I’ve seen so far. BTW, this site is so pretty. ;)

Sweet! Great tutorial…

Any chance you can expand once more explaining how to do an example similar to the clouds, but give the container a transparent drop-shadow (both sides) sort of thing? Guess the whole thing would be to include the html background horizontal gradient, then the centered ‘cloud’ image, then the drop shadow with the trasparent ‘feathered’ edge providing a few of the image it would be shadowing (vertical repeat?).

Again – Love the site!

You are a champion.

Awesome article. It has come in handy for a couple of my client websites :)

You save me from crop layout

Xcellent thank YOU!

Great article, thanks a lot!

Thanks , this is one of a great idea for web decoration.

Hi,

I wanted to know if there is a way to make the “Sticky Footer” technique AND the “Large Background” technique work toghether (as Gabriel says, they mutually exclude each other.)

The probelm with the display: table in the body is that it screws up the sticky footer (but it does its job with the resizing problem).

Any solution to fix this and have both to work toghether?
Thanks.

Excellent – This is exactly what I’m after. Thanks very much for sharing.

Once again I plough the net for a solution to a simple yet annoying problem. Once again I find the answer at WDW. Thank you!

Wow – you got loads of spam comments.

I’ve been trying to make a background with 100% height for at least 2 hours with no luck and finally this makes it work! thank you so much! I didn’t know that “display: table” option.

Thank you!
Fred

Superb, Thanks very much for good info………

Great Site, thank’s for the tutorials.

Hi

Thanks worked like a charm. Looks alot better now. Thanks Again!

Great Site, thank’s for the tutorials. We been very useful tutorial. We appreciate the effort and dedication. A cordial greeting from Spain.

Thanks! Great article. You save me a lot of time ;)

hi this is better

Great tutorial thank u so much going to share this page ^^

I’ve been like drowning on the WWW looking on how to do this. Thanks a lot Nick!

Just want to say what a great blog you got here!I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!

@ Pete Parks… I just did exactly that.

1) Using Firebug in Firefox, Inspect the background. This will give you the location of the background file. It will also tell you the CSS file and the line in that CSS file, which defines your background image.

2) Replace the background image file with your new big background image.

3) Edit the CSS for the background image so that it includes the “no-repeat center top” text as specified in this article.

Enjoy!

Ok, I think I made a big breakthrough. The diplay and width settings were not stopping the shifting at resize of the browser smaller than the content. Someone told me that it would be better to create a wrapper height with a 100% height (width is obviously automatic.) I tried but it didn’t work until I found this method: http://www.tutwow.com/tips/quick-tip-css-100-height/

It worked! At least in my Mac versions of Safari and Fireworks. I haven’t tested it in Windows yet. If you have any insights, much appreciated.

Hi!
Nice post…yesterday i wrote a similar entry in my blog: http://thepolarway.com/diary/web-development/a-vueltas-con-el-background-image hope it helps :)
cheers

hello
any guide how to use in link menu in sprite css & how put in pop up menu in css.
thanks
chirag

Great info! Thank you so much for sharing this.

hey come in two models, 11-inch and 13-inch models, and white iphone 4 are quite affordable as well starting at just US$999. They are available today and the best model you can get is the 13-inch with 256 GB of storage, 4GB of RAM, and a 2.13GHz Intel Core 2 Duo processor.

As iphone 4 white 3GS has something of non-update to the iPhone range, but there are finally decent alternatives in the smartphone market, with the HTC Desire and Samsung Galaxy S leading the Android fight right to Apple’s door.

I am a student of s s c examination.

Awesome Post Dude! Concise and idiot proof instructions, I like :)

FINALLY!! Thanks for this info…after days of struggling this hit the spot!!! You are appreciated. Blessings. You have a beautiful site!

mustafadan selamlar

Thanks for sharing. Lol

I was looking something like this to clarify my doubts

Thanks!!!

I love your page. Nice Job

FINALLY!! Thanks for this info…after days of struggling this hit the spot!!! You are appreciated. Blessings. You have a beautiful site!

Thanks a million for the great tutorial I have tried to do this for quite some time and nothing has worked like this your awesome for taking the time to share this with us THANK YOU :)

great method…thanks for sharing this….

Regarding… Update: Sky Background Using HTML Selector (see demo)

Hello, I’m a new designer… I’m a little confuse with the “Sky Background Using HTML Selector”. If you do that wouldn’t then have to do it each and everytime for different page? Wouldn’t the CSS make easier and only have to change once for each page of the whole website? Sorry, my question sounds rudementary but I’m confuse why the HTML is cleaner than the CSS… again I’m a new designer. Thanks!

It was very interesting to read.
serve as a reference

Thanks Dude.This was very helpful.Keep it up :)

It’s alright if I sleep in class. This article explains it better.

This is amazing! Anybody please point me to a tut/s on how to assign a different background image each day of the week? Thanks a lot.

Another questionnaire, the participants’ problem identification and structuring, idea generation, problem elaboration and clarification, such as creativity, problem solving insertion sezkin idea which one’s preferred styles are evaluated. While participants preferred the style of non-disclosure and intellectual development of ADHD, with ADHD, participants chose to produce ideas.

Love the explanation and it works in IE which is what I’m looking for until IE get up to speed with with CSS3 (allows for multiple backgrounds super easy)
I’m a 100% visual person with limited HTML understanding so I use a WYSIWYG web design software… I set up a sample of your sky sample. http://threefooter.com/2backgrounds/
I see yours is written in HTML; the program I use only writes in which I hear is a very forgiven Doctype… but
Is there anyway to get my sample to work utilizing what I have? I’ve been playing with two image backgrounds for three weeks now with nothing to show.

Any help would be greatly appreciated.
Lasa

Brilliant! I have for so long been puzzled about working with background images in CSS. This has now cleared up any confusion I had! Thanks so much! :)

Tutorial for using large backgrounds in CSS

thanks!!!!

wallah… tha was really interesting! where do we get gif image for background u used in example 2 ???

Really a grat page. Good good good job.
I found so many interesting things I was looking for.
U rock!!

thank u for this great tutorial,very helpful at all in progress my project

very nice tutorial, a smaller background with center/top position can make your website to load faster.

Thx ALOT!!! Had a huge prob when i centered the background in css. Some of the background dissapeared in the top. This solved it ! Thx :)

Thx a lot, couldn´t figure it out myself.

This is a very good article. Everyone else do wrong things, but this article is showing people how to do things right.
Do ***NOT*** cheap-o-scale your bacground-image. It’s ugly, it’s pixellated and it makes the browser sluggish.
Instead use the examples provided in this article; it’s the right way to do it, and your Web-site will get a professional touch.

I havent even used CSS before and decided I would try it based on this tutorial. It was simple and very easy to do. Well done.

whoah this weblog is excellent i like reading your posts. Stay up the great paintings! You know, many individuals are hunting round for this information, you could aid them greatly.

Hi! I like your post! Could you please help me to find the brown image for 2nd Example? Thank you! Agatha

bitch nigga

How do you make the background to be whatever you want but the content that is the writing area is always white. How did the background not overlay it??

Thank you Thank you!! This is organized very nicely

This solution aways work for me. Some times have problem with IE 6. But guys not use this anymore

Thanks for the post, it gave me some ideas for a site I am working on. By the way, I love the artwork on this page and on the example 1. Really beautiful.

hey there and thank yοu for your infoгmatіon – I’ve certainly picked up something new from right here. I did however expertise a few technical points using this web site, as I experienced to reload the website a lot of times previous to I could get it to load correctly. I had been wondering if your web host is OK? Not that I’m сomplаіning, but sluggiѕh loаdіng іnstanceѕ tіmeѕ will often аffect your placеment in gοοgle and can damage yоur quаlity ѕcore if aԁs аnd
marκetіng with Αԁworԁѕ.
Well I’m adding this RSS to my email and could look out for a lot more of your respective exciting content. Ensure that you update this again very soon.

Wow , this solutions was great… Thanks