Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.

Common Mistake: Background Gets Cropped (see demo)

Take a look at the demo file, it looks fine under 1280px. But if you have a high resolution display, you will see the background gets cut off on the sides.

background cuts off

Example #1: Single Image (see demo)

A quick solution to fix the problem mentioned earlier: make the edge of the image the same color as the BODY background color. Here, I’m going to use Web Designer Wall as an example. Take a look at the image below and notice the edge is a solid color?

WDW background image

CSS Part

The CSS part is very simple. Specify the background image (position it center, top) for the BODY element.

CSS overview

Here is the CSS code:

body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

  width: 100%;
  display: table;
}

Notice there are two extra lines in the BODY selector. That is to prevent the background image from shifting when you resize the browser smaller than the content width (it happens in Firefox).

Firefox bug

Example #2: Double Images (see demo)

For this example, I’m going to use the job board design, Design Jobs on the Wall. I have a cork board pattern repeating in the BODY tag and a wrapper background in the center.

cork board

The trick here is to export the GIF matte with a brown color that is similar to the cork board pattern.

cork board overlay background

Example #3: Sky Background (see demo)

In this example, I have a 1px gradient that is repeated horizontally for the BODY tag. Then I attached a cloud background in the center of the #wrapper tag.

sky background

Update: Sky Background Using HTML Selector (see demo)

Thanks to the comments from the readers. Below is an example of the sky background using HTML selector to display the gradient background, so the #wrapper DIV tag is not required. It is a much more cleaner approach.

sky background 2

Download the demo zip now and don’t forget to check out the Large Background Websites.

Credits: thanks to Alex from markup4u.com for the {width: 100%; display: table} CSS trick.

496 Comments

Marco
Oct 20, 2008 at 3:34 am

That wasn’t really hard, but it was well explained, thanks Nick. Especially the “GIF-Trick” was well-implemented, keep up the good work!

Johan de Jong
Oct 20, 2008 at 3:57 am

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

Mitternacht
Oct 20, 2008 at 4:03 am

Nice to see you back !

Ivo
Oct 20, 2008 at 4:07 am

Thanks. Seamless patterns are boring.

art
Oct 20, 2008 at 4:19 am

and it’s interesting to work with large background on footer, especially when image is higher than footer

Jay
Oct 20, 2008 at 4:27 am

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

avanzaweb
Oct 20, 2008 at 4:27 am

A good explanation for css beginners.

Tor Løvskogen
Oct 20, 2008 at 4:27 am

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

Brtk
Oct 20, 2008 at 4:29 am

short, but great tutorial, thanks a lot !

gLENN
Oct 20, 2008 at 4:30 am

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

Agus MU
Oct 20, 2008 at 4:31 am

in the past, i learned about this form your iTheme wordpress theme. Great Job Nick!!!

taufiq
Oct 20, 2008 at 4:41 am

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

Giridhar
Oct 20, 2008 at 4:43 am

very very useful tips… maybe..ill start over my abandoned wordpress theme creation process :-) thanks 2u

binocle
Oct 20, 2008 at 4:58 am

@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”…

NetOperator Wibby
Oct 20, 2008 at 5:07 am

Wow, this is great! I had to rethink one of my site designs because of this.

levi
Oct 20, 2008 at 6:00 am

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.

Htoo Tay Zar
Oct 20, 2008 at 6:03 am

Thanks a lot for this tut. I’ll try to built large background site tonight.

Anton
Oct 20, 2008 at 6:24 am

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

LL` Leo Lemos
Oct 20, 2008 at 6:32 am

Cool!!! I love this tutorial. Congrats

Colin
Oct 20, 2008 at 7:37 am

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!

Neal G
Oct 20, 2008 at 8:11 am

Nick, you should also write an article about optimizing your large background image since yours clocks in at 172kb: http://www.webdesignerwall.com/wp-content/themes/wdw/images/main-bg.jpg

Or Matt’s (who more or less ripped of your site) who’s image is 130kb+
http://s.ma.tt/blog-content/themes/mahtete/img/bg_container_2col.jpg

BTW I also use the large BG technique on my website.

Designer
Oct 20, 2008 at 8:52 am

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

Aaron Bassett
Oct 20, 2008 at 9:42 am

Rather than place the 2nd background image on a wrapper div could we not place it on the body tag and place the 1st background image on the html tag?

Cédric
Oct 20, 2008 at 9:47 am

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 ?

Dan
Oct 20, 2008 at 10:19 am

For sites that need to background images, much like the last example with a gradient and the sky, i would set the html selector’s background to the gradient and the body to the sky image.

No need for so many nested divs. They both do the job though.

ODIN
Oct 20, 2008 at 10:43 am

Very Nice

Stephanie
Oct 20, 2008 at 11:02 am

Great tutorial, and so timely! I’m teaching an intermediate-level Web Design class, and will be sure to send them here shortly. I’ve not used the display:table CSS property before in this context–I’ll have to look into it more now to see how others are using it.

Buzu
Oct 20, 2008 at 11:20 am

Very nice. Thanks for sharing.

Steve Ambielli
Oct 20, 2008 at 11:38 am

Very nice, quick tutorial.

Daxion
Oct 20, 2008 at 11:39 am

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.

linda
Oct 20, 2008 at 11:51 am

How small or large can one go for the weight of each page? It seems people can take larger downloads now, but I wonder if there is a study on the average kb per page that results in a good recommendation for designers and developers…

Prabu Rajasekaran
Oct 20, 2008 at 11:52 am

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

afewtips.com
Oct 20, 2008 at 12:13 pm

Real nice – type of stuff I can’t visualize or realize I have liked until someone comes along and spells it out for me. Thanks very much.

IhateDesign
Oct 20, 2008 at 12:14 pm

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

webdeveloper
Oct 20, 2008 at 12:26 pm

Great, will be useful for many!

Stephen kennedy
Oct 20, 2008 at 12:31 pm

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

Stephen kennedy
Oct 20, 2008 at 12:41 pm

oops, just changed the screen to less than 100% with mse and your page goes out of alignment

Juan Antonio
Oct 20, 2008 at 12:44 pm

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

Aaron Rivera
Oct 20, 2008 at 1:08 pm

that’s a great way to learn people about your CSS news templates. Thank you very much for the fun and quick tutorials. You help the search engines and the community with a lot of good content. This is exactly what the Internet is looking for. I will recommend your CSS layout website anywhere on the web thank you very much. I have a coin massage therapy website and a blog that’s attached to it and maybe offering free tutorials on how to build a better website for the search engines these toils will be coming out soon. http://www.kauaimassages.com/blog

Tommy_Gun
Oct 20, 2008 at 1:14 pm

Thanks for useful tut ;)

CSSJockey
Oct 20, 2008 at 1:26 pm

Good read!!

I am using this technique on all my designer website projects :).

Tip:- Keep a check on the size of the background image, I have seen a few websites where the background image takes too long to show up and it looks unorganized till the time its fully loaded in the cache.

Regards,
CSSJockey

Markup4U team
Oct 20, 2008 at 1:38 pm

@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.

Popeye
Oct 20, 2008 at 1:45 pm

Have you heard Chase Talk?

Regards.

Markup4U team
Oct 20, 2008 at 1:51 pm

@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 ;-))

Max | Design Shard
Oct 20, 2008 at 2:02 pm

Nice explanations

ashvin
Oct 20, 2008 at 3:15 pm

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!

Josh Gutteridge
Oct 20, 2008 at 4:55 pm

What a great tutorial, thanks for this!

I am currently in the process of thinking of what to do with my background…this tutorial definately got me thinking!

http://www.skytemedia.com

JT
Oct 20, 2008 at 5:22 pm

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.

Lollielala
Oct 20, 2008 at 6:05 pm

This something that has
been in the back
on my mind for some time,
like since win vista
was first promo’d a wide angle
pic looking over a valley on there
site how ever
long ago that was…
I’ve quickly skimmed over this page but
I’ll be coming back to it on my next
site what ever it may be.
btw thanks & also for
the list – very inspiring

http://www.webdesignerwall.com/trends/80-large-background-websites/

cheers
Lollie

Eric-from-Boston
Oct 20, 2008 at 6:23 pm

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

Joey
Oct 20, 2008 at 7:40 pm

You are a good send!

Thank you for all the tips and for always being so cutting edge!

I honestly would have never started my own .com Blog if it wasn’t for all the inspiration from this website!

I look forward to every post!

Jonathan Patterson
Oct 20, 2008 at 7:42 pm

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.

Josue
Oct 20, 2008 at 10:45 pm

Thanks for the tips. Very creative, detailed, and definitely useful!

RedRock
Oct 21, 2008 at 4:04 am

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).

Leila
Oct 21, 2008 at 4:08 am

thank you for your sharing!

Criação de Sites Sorocaba
Oct 21, 2008 at 7:03 am

Great tips! thanks everybody

Chary
Oct 21, 2008 at 7:22 am

Wow quite a useful Tips on Background Image!!!!
cooool

Kyle Gallant
Oct 21, 2008 at 7:49 am

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.

Neowster
Oct 21, 2008 at 8:17 am

I definitely learned something here. Any tutorial and sharing is good. But one so clear and concise, it rocks! Thanks.

Jean from Taiwan
Oct 21, 2008 at 9:39 am

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

Jon
Oct 21, 2008 at 9:57 am

Thats wicked – Cheers!

http://www.graylabel.co.uk

Rudolf.Pasztor
Oct 21, 2008 at 10:09 am

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

Shawn
Oct 21, 2008 at 10:31 am

Good post, I really like the double image concept and think I am going to play around with it.

I wrote a short post on how to embed a very large swf file and keep it centered with CSS if anyone is interested in that.

Jin
Oct 21, 2008 at 11:59 am

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.

mabonic
Oct 21, 2008 at 2:18 pm

thank to share

Darek
Oct 21, 2008 at 3:51 pm

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

Steven Clark
Oct 21, 2008 at 4:37 pm

I’d probably still go with a #wrapper on the cloud for one reason – is the image content or design? Putting it in content is mixing presentation and markup, so it’s a trade-off really. While superfluous divs are bad I think the ability to redesign solely from the CSS file is more important than that 1 extra div.

Nice article (pics always sell me).

Tim
Oct 21, 2008 at 7:19 pm

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 :)

Shaka
Oct 21, 2008 at 8:39 pm

Thanks. I am finding this tutorial. it’s helpful.

insic
Oct 22, 2008 at 1:05 am

very useful tips you have here.

KEISYUU∞
Oct 22, 2008 at 2:51 am

Thanks! I always like your CSS tutorials!

Rafa Garcia
Oct 22, 2008 at 3:03 am

Logic applied to webdesign. Good article.

Indra
Oct 22, 2008 at 3:09 am

Wow Nick, another great tutorial. Thanks heaps for sharing this. Looking forward for another great tutorials from you

Maier Erik
Oct 22, 2008 at 4:48 am

Hi!
Great article!

Conrad Gorny
Oct 22, 2008 at 5:13 am

Ah this is very logical and usefull, thanks mate

Conrad Gorny
Freelance Graphic Designer
http://www.conradgorny.com

Esteban Presa
Oct 22, 2008 at 8:09 am

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

Web designer
Oct 22, 2008 at 8:11 am

Good work!
Thanks for share it here.

Brad Strickland
Oct 22, 2008 at 9:06 am

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.

thezman
Oct 22, 2008 at 9:10 am

Great tip on using the HTML tag for backgrounds too. I’ve always used a “wrapper” like you did in the example. There goes the wrapper. Thanks!

Radek K.
Oct 22, 2008 at 9:22 am

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

Steven Clark
Oct 22, 2008 at 4:37 pm

Ahh sorry, I thought the image was going into the HTML, ignore my last comment (duh)… mmm HTML selector is not a bad idea at all. In fact, it’s kind of obvious after the fact. Nice work.

sagil
Oct 22, 2008 at 9:01 pm

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.

Justin
Oct 22, 2008 at 11:18 pm

Good article, display:table on the body tag for the firefox issue is a nice tip.

Another tip: For very complex bgs, another good method can be to use absolute positioned divs (just for the bgs). I do this aswell if I want a bg color behind the image (for the sake of a more elegant load) or I want to overlap divs with bgs.

Here is a example of what I mean (disabling bg images will make it clearer): http://www.pixel-house.com.au/pond/

Cédric
Oct 23, 2008 at 3:53 am

Thx for Markup4U team ;-)

drlovecat
Oct 23, 2008 at 6:05 am

Good review
Thanks for sharing

Rob
Oct 23, 2008 at 7:37 am

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.

William Li
Oct 23, 2008 at 10:35 am

Great, nice article. Seems like the thing of the moment is to use huge backgrounds. Display: table is a great tip, but min-width does the trick too.

David Hellmann
Oct 23, 2008 at 4:11 pm

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

F. Yang
Oct 23, 2008 at 4:41 pm

Any one wants to participate in a logo design contest to win $125?
http://www.laptask.com/task/show_task.php?task_id=379

dan
Oct 24, 2008 at 2:46 am

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

http://www.mediacake.net

Yon
Oct 24, 2008 at 5:13 am

Another solution I’ve seen in the earlier post is the mirrored background image, so you can repeat it on the y axis and it never ends. Like in Surf in Paradise.
good with clouds, skylines, horizons…

MattZ
Oct 24, 2008 at 3:01 pm

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.

Lucas Loyola
Oct 24, 2008 at 10:59 pm

Man, nice article.. i’m on development of a large bg web site now!

Tom
Oct 24, 2008 at 11:00 pm

Thnx for sharing your technique!

Skracanie linków
Oct 25, 2008 at 6:45 am

Large image backgrounds become some kind of trend and I’m not sure it’s good… Anyway good post like always.

Skracanie linków
Oct 25, 2008 at 3:13 pm

@MattZ
It’s flash based website

Brian Feister
Oct 25, 2008 at 3:24 pm

Thanks so much Nick! This is a technique I’ve used many times but the addition of “width: 100%; display: table;” is something I kept looking at your CSS to figure out… never could find it!

Yoji
Oct 26, 2008 at 12:39 am

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

viil
Oct 26, 2008 at 3:12 am

Thanks for a useful tutorial and a great blog in general :)

Your current design and this post inspired me to design my very first word press theme based on a large background image like yours. I did a photo shop brush background like Web Designer Wall, but I am already working on a more photo based one.

Keep up the good work!

Luke Anderson
Oct 26, 2008 at 5:55 am

Pure awesomeness :)

Daxion
Oct 26, 2008 at 7:39 am

@Markup4U
I was using display:table for backgrounds on header and footer, and sometimes, randomly, the footer and header didn’t got aligned. Due to the nature of the footer bg, I was able to supress the display:table from it and then it matched the header bg position.

Now, I’ve a question, I’ve come to a work where a light content area is placed against a large dark background that has the area for the content with a light texture and, in FF3, the content area and background align according to the resize of the window. This bug is reviewed here http://www.positioniseverything.net/bg-centering.html
however, I can’t use any of the solutions stated in the article.
Do you know of any other way? thanks

David
Oct 26, 2008 at 9:28 am

Brilliant work yet again, keep them coming :-D

Arthur Robinson
Oct 26, 2008 at 9:53 pm

Thanks, this is really helpful.

flash designer
Oct 27, 2008 at 1:05 am

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

zanetrance
Oct 27, 2008 at 8:18 am

very cool! thanks, always wanted to know how web designer wall pulled that off.

Geoffrey Blanc - MG2 MEDIA
Oct 27, 2008 at 9:22 am

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

Banago
Oct 27, 2008 at 1:58 pm

I have been using these techniques in several sites I have developed. I did not know, this trick:

width: 100%;
display: table;

Thanks for that :)

MattZ
Oct 27, 2008 at 2:46 pm

@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.

Ewan
Oct 27, 2008 at 3:44 pm

How big or what size should a background image be? So when I compress in Photoshop how big should the file be?
thanks

Markup4U team
Oct 27, 2008 at 5:00 pm

@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

joao
Oct 27, 2008 at 6:32 pm

Thanks, this is really helpful.
I think i will use it in my next project.
my blog

reezluv
Oct 28, 2008 at 3:20 am

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

Elizabeth
Oct 28, 2008 at 8:30 am

Very useful! I’m getting ready to use a large background on one of my sites, and the double space tip was very helpful. Thanks!

Dave Cutts
Oct 28, 2008 at 8:41 am

Very useful article, thankyou very much!!!

lewro
Oct 28, 2008 at 10:24 am

Very nice tutorial. Thank you for sharing!

Bastian`
Oct 28, 2008 at 11:44 am

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.

DemoGeek
Oct 28, 2008 at 4:27 pm

I like the Body background and the Wrapper background approach. Might make the page lite-weight than the other big image alternatives.

GAN
Oct 28, 2008 at 4:29 pm

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!

Bob
Oct 28, 2008 at 8:58 pm

execellent tutorial :) keep it coming!

Iceman
Oct 29, 2008 at 2:07 am

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

Iceman
Oct 29, 2008 at 2:08 am

Keep it coming..

iceman

SOS Media
Oct 29, 2008 at 12:29 pm

This is great web design — THANKS!

Farid Hadi
Oct 29, 2008 at 12:38 pm

Nice article showing how simple it is.
Thanks.

Dave Cutts
Oct 29, 2008 at 4:27 pm

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

cheers

Dave Cutts

Miiitch
Oct 29, 2008 at 5:34 pm

This is great and all, but I think it kind of fails to address a larger issue with large background images: How does one go about making one, and how can one ensure that the large image will load quickly?

I personally just use “Save for Web” in Photoshop, and choose the lowest quality of .jpg I can before the image starts losing quality, because I find it loads the quickest. Is there a better way?

Otherwise, phenomenal work here at WDW (and at n-design studio, and of course I love Best Web Gallery)

Erdinç
Oct 30, 2008 at 12:30 am

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ç

Titus
Oct 30, 2008 at 9:45 am

Tip:
When compressing to .jpg. Firefox will make a jpeg 60% smaller than using Photoshop ‘save for web’ at the same quality.
If you use dreamweaver, just import or drag the psd file to your design and it will let you optimise it using the fireworks optimising enging which is built in to dreamweaver cs3/4 and then ask you where to put the .jpg.
It’s a faster and better way to work.

dennis
Oct 31, 2008 at 8:33 am

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

ReZ
Oct 31, 2008 at 9:02 am

Soooo how do you get the LARGE image to load quickly??

emiNo
Oct 31, 2008 at 10:31 am

Nice article.
Thanks a lot for your explication.

Flash Developer
Oct 31, 2008 at 12:36 pm

Example #2 is really amazing… :)

Website Design in Buffalo, NY
Oct 31, 2008 at 8:52 pm

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

Riza
Nov 1, 2008 at 6:47 am

see this to: http://www.jayaninternational.com

Jon Williams
Nov 1, 2008 at 10:16 am

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

Daxion
Nov 1, 2008 at 10:37 am

@Markup4U
I was working on that particular file when I was fixing it, overwriting it all the time, so I have no copies of it.

Geoff Ellis
Nov 1, 2008 at 10:41 am

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

MyClubTees.com
Nov 1, 2008 at 2:42 pm

Excellent tutorial. I just used it successfully on my web site: http://www.MyClubTees.com

Sam Ng
Nov 2, 2008 at 2:09 pm

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

modelcitizen
Nov 3, 2008 at 1:20 am

I’ve always loved this look, but what kind of file size are you creating here? Surely these are pretty heavy images?

Jonathanq
Nov 3, 2008 at 11:02 am

Great explanation, the two extra lines did the trick!

Fumin
Nov 3, 2008 at 2:26 pm

I just started my blog. (With a large background :)
Check it out, any suggestions will be greatly appreciated.
http://www.fuminyang.com

Mark
Nov 4, 2008 at 2:50 am

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. :)

william green
Nov 4, 2008 at 7:15 am

great explanation

luke graham
Nov 4, 2008 at 7:16 am

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

luke graham
Nov 4, 2008 at 7:17 am

i love this website, it makes me happy

phill
Nov 4, 2008 at 7:18 am

us men love this book too.

lee
Nov 4, 2008 at 7:19 am

i agree with phill she is a man

lick my graham
Nov 4, 2008 at 7:19 am

i agree with william green

strudy
Nov 4, 2008 at 7:20 am

wow im so happy this is so true

Mark
Nov 4, 2008 at 9:27 am

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.

花火酷站
Nov 4, 2008 at 9:46 am

学习了,谢谢站长
3Q~~呵呵

Jim MacLeod
Nov 4, 2008 at 9:50 pm

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.

CMHB
Nov 5, 2008 at 5:26 am

Thanks for the information Nick. The double image example is very nice. Full scale backgrounds interest me the most though, like the GoTo China website. Depending on the image used, it can be very effective. Thanks for sharing though.
(www.carlmhbarenbrug.com)

Chases Glasses
Nov 5, 2008 at 7:46 pm

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!

web design mumbai
Nov 6, 2008 at 4:01 am

Nice Blog Cool Design

Thierry Dehove
Nov 6, 2008 at 4:06 pm

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

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

dovis
Nov 6, 2008 at 8:13 pm

oh~ thanks.
This skill is so useful for me …

小半生
Nov 6, 2008 at 9:54 pm

The design is really pretty

Mina Lee
Nov 8, 2008 at 2:18 am

I love it! Thank you

Diego
Nov 8, 2008 at 6:52 am

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

RiN
Nov 8, 2008 at 7:44 pm

Hi, nice tutorials.. but can you explain why we have to place display:table and width:100% into the body? Apparently my site is using a big fixed background too but when I added the display:table and width:100% into the body (exactly like your tutorial), in smaller screen’s Firefox, when we scroll down the layout, the background actually becomes like this: http://img359.imageshack.us/my.php?image=reviewdf9.jpg. But after I removed the display:table, it looks normal again (as in a fixed background). I’m just curious what does the display:table and width:100%?

David Hucklesby
Nov 8, 2008 at 10:25 pm

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.

Anthony Grace
Nov 9, 2008 at 1:58 pm

How would you go about adding a footer here that would float to the end of the screen irrespective of content height?

Great blog post! :-)

Jeremy Foran
Nov 9, 2008 at 4:28 pm

Great Tutorial
Thanks

Jeff
Nov 10, 2008 at 4:48 am

Might have to use a few of these tips. Thanks! You’ve made web design a little easier.

Affordable Web Design
Nov 10, 2008 at 6:02 pm

Nice tutorial and thanks for the pointers

mookstar
Nov 11, 2008 at 12:07 am

Awesome and immediately relevant. Good job

william
Nov 11, 2008 at 7:28 am

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

paluh
Nov 11, 2008 at 9:11 am

I really love this technique, and the way it looks a website once it has such great and big BG. I have done a few designs with this style and would like to use more this trend, it looks professional and full of energy.

Regards from Paluh
http://www.deprowebs.com

Risto
Nov 12, 2008 at 6:23 pm

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

Carlos Hermoso
Nov 13, 2008 at 5:30 am

Hi!

Thanks a million for sharing your skills with us!

Raymond
Nov 13, 2008 at 10:47 am

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

masoud
Nov 14, 2008 at 3:14 pm

Hi!
i use this way…
it was worked in IE very well… but it wasnt work in firefox…
whats the matter?

Alex
Nov 14, 2008 at 3:59 pm

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

tim gould
Nov 18, 2008 at 7:05 am

i love this website as i have no life!

mohan
Nov 18, 2008 at 8:31 am

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
mohan.webdesigner@gmail.com

tmdesigner
Nov 18, 2008 at 12:12 pm

I ever missed “center top”..that’s a good tip. Now i will use them!

greg
Nov 18, 2008 at 8:00 pm

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.

bweb
Nov 22, 2008 at 11:43 am

Very useful tip. Thanks!

BORABORA
Nov 22, 2008 at 5:31 pm

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

J Gu
Nov 25, 2008 at 8:12 am

It is very nice information! Thanks a lot. But how to make the transparency work in IE6 as in Example #2? I googled for it before but everybody has different opinions. Do you have one that you prefer? I really would love to know. Thank you again!

gary
Dec 1, 2008 at 2:03 am

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

Gordon
Dec 1, 2008 at 4:21 am

Only trouble with large backgrounds is that very often the page load long before the background image, and personally I think this is very annoying.

Luca
Dec 1, 2008 at 12:04 pm

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

joao
Dec 2, 2008 at 4:56 pm

Very useful tip. Iuse it in my twitter page and I will implement it in my blog. Thanks!

joao
Dec 2, 2008 at 5:14 pm

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

Dele
Dec 3, 2008 at 6:21 pm

I’ve always used left top to align my backgrounds and most of the time it messes up on different resolutions. But using ‘left centered’ does the magic irrespective of
resolution chosen. Thanks for this article so TIMELY!!!

Dele
Dec 3, 2008 at 6:22 pm

sorry i meant top center

umesh
Dec 4, 2008 at 4:50 am

I can’t do it can u help me wat’s the problem doing it.
when i using the css:
body {
padding: 0;
margin: 0;
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

width: 100%;
display: table;
}

the result shows me picture at top-left

i m using Dreamweaver CS3 and preview in firefox 3.0.3

Markus
Dec 4, 2008 at 2:58 pm

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

umesh
Dec 5, 2008 at 12:48 am

I can’t do it with header and footer both in ones, can u help me wat’s the problem doing it.
when i using the css:
body {
padding: 0;
margin: 0;
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center bottom;

width: 100%;
display: table;
}

the result shows me picture at top-left

i m using Dreamweaver CS3 and preview in firefox 3.0.3

bebo music skins
Dec 5, 2008 at 4:53 pm

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

SEO
Dec 7, 2008 at 6:07 pm

I enjoyed reviewing your large backgrounds…….it will help me in future design work

Bebo Skins
Dec 8, 2008 at 10:28 am

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?

Will Doyle
Dec 10, 2008 at 4:08 am

Great Work

Thanks

Will

http://www.willdoyle.co.uk

Dele
Dec 11, 2008 at 1:08 am

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!!!

naran_ho
Dec 11, 2008 at 7:56 am

Great Work, Muy útil, será utilizado….
Thanks…

Di
Dec 12, 2008 at 3:58 pm

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!

Moksha
Dec 14, 2008 at 4:32 pm

really good tutorial

Levi Levita
Dec 16, 2008 at 5:38 pm

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?

Great Web Design
Dec 17, 2008 at 5:44 pm

Great tutorial. My clients all want one! Thanks!

diseñoweb
Dec 18, 2008 at 6:57 pm

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

Home Assembly Jobs
Dec 21, 2008 at 11:24 am

That was a nice post. I’m going to try designing my own large background theme though I suck CSS. ;)

factotum218
Dec 21, 2008 at 10:05 pm

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!

David
Dec 24, 2008 at 12:03 pm

Great article. The only issue I have with this, and have had in the past, is similar to what Gary is experiencing. Unless you make the container larger than the BG image overlay container like you did in your html example, you get a one pixel shift in IE and safari when you resize.

I used firebug to tweak your demo code. When I reduce the size of the background container, to match the dimensions of the container that is tied in with your cloud background image, the same thing happens to your example.

Do you, or does anyone else know a fix to prevent this one pixel jog when matching wrapper / container widths exactly?

Yamen Elasadi
Dec 25, 2008 at 7:48 pm

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

Thank you

Yamen Elasadi

sitender kumar
Dec 26, 2008 at 1:26 am

Thanks for this, but this is very common guidline, we expect from you more advance techniques which is normaly not used by common designer or html coder. if you have some advance techniques of css & photoshop. please share with us

Yellow SEO
Dec 28, 2008 at 8:03 pm

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

Hedie
Dec 29, 2008 at 2:00 pm

Is this happening for anyone else? the “display: table” prevents the background image from appearing on Firefox and Safari on the Mac (although I have to mention that I have not uploaded anything to the server, I am just previewing from my machine). thanks!

Web Designer
Dec 31, 2008 at 11:57 am

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.

Xtence
Jan 14, 2009 at 3:43 pm

this will make the world wide web a lot prettier, great tut, very handsome with wide screens

Silviu
Jan 15, 2009 at 10:52 am

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?

Hugo Barros
Jan 20, 2009 at 10:48 am

Very nice. Congratulations!

nastro
Jan 27, 2009 at 11:23 pm

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

Chris
Jan 29, 2009 at 12:44 pm

Very nice tutorial!
Would you mind making one for customizing the footer? (such as the footer found on this site?)

Thanks,
itExotik

Web Design Chennai
Jan 29, 2009 at 7:26 pm

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

My Best,

Indian Web Designers
Jan 29, 2009 at 7:32 pm

very good guider here….

thanks

Matt
Jan 30, 2009 at 11:01 am

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.

Chris K
Feb 1, 2009 at 6:33 am

@ 216 Chris – I agree after using this great tutorial it would be great to see a simular tutorial for the footer. Would be a good combo of tuts.

Geoserv
Feb 1, 2009 at 12:27 pm

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

Alex Soyk
Feb 4, 2009 at 12:26 pm

The background is way to busy. Fine a new background….maybe like one color!

Jan
Feb 5, 2009 at 5:12 am

Nice :) Thanks, Nick!

LinkArchive.info
Feb 5, 2009 at 11:50 am

Heh.. My website’s background is solid color (faster loading) but thanks for the tips, very good tutorial.

Webbug
LinkArchive.info

jody
Feb 6, 2009 at 9:29 am

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

slzb
Feb 7, 2009 at 12:33 am

display: table was what I needed. Thank you so much :)

E11World
Feb 9, 2009 at 3:57 pm

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

shida
Feb 12, 2009 at 11:47 am

hye.. i really like this design. i’m currently study in communication technology(majoring graphic design)
i like this design and i wish i want design like this for my blog and my project.
congrates..

Cory
Feb 12, 2009 at 11:28 pm

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

Michelle
Feb 16, 2009 at 10:35 am

Is there a special way to create lightweight images?
I saw your background image is about 12 Kb. How do you get it?

Russ
Feb 16, 2009 at 1:16 pm

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

Russ
Feb 16, 2009 at 1:21 pm

never mind, found it

fukutsan
Feb 17, 2009 at 6:33 am

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

Mark
Feb 18, 2009 at 10:24 am

I had a problem with my body background img for a current project, I found the solution here, thank you!

Mark

Viktorja
Feb 19, 2009 at 4:38 pm

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

Epoxy
Feb 26, 2009 at 4:12 am

Large backgrounds look beautiful. But would it not make the website heavy?

Mark
Feb 26, 2009 at 7:06 am

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!

Mukesh.M
Feb 27, 2009 at 6:26 am

good stuff!! excellent…………..

Sam
Mar 1, 2009 at 5:26 pm

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

Scarf*oo
Mar 5, 2009 at 10:08 am

Very easy to follow tutorial. Might recommend it to my fellow developers, when they bug me about css backgrounds. Keep it up!

Matt
Mar 5, 2009 at 2:56 pm

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

Jamie
Mar 6, 2009 at 5:17 pm

@fukutsan – the background colour in Firefox won’t continue much beyond the end of your content. If the page content is shorter than the displayed page, you’ll get white until the end of the browser window.

@Nick La, assuming you’re the author as you’re not crediting yourself very loudly :o) – thank you thank you thank you for this! Three days – DAYS! – I’ve been puzzling out something and blam – the solution is here waiting for me… as usual with webdesignerwall.com!

Michael
Mar 12, 2009 at 2:31 pm

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

Rebecca
Mar 16, 2009 at 10:58 am

Thanks for the info. I have bookmarked this page for future reference so that once I learn a bit more about css.. I have a magical guide. Thanks for the tips!

strikes
Mar 16, 2009 at 1:52 pm

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)

Sylvain
Mar 18, 2009 at 10:53 am

There’s another method to display large background, look on my website : two images floating on each side sliding on each other. Drawbacks : it’s limited to a width and after it’s ugly (but it’s more than 2000px i think).

Em Howes
Mar 18, 2009 at 3:45 pm

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!

Kristin
Mar 20, 2009 at 5:18 pm

I am developing a site that has dynamic interior pages and I am trying to use the double image tutorial… so that I can use a gradient (image with x-repeat in the CSS for body) and a wrapper div that contains a bakground image that is longer than the content. This may not always be the case as the content is dynamic – so some pages may be longer than others. My problem is that the background image gets cut off at the height of my content. I want the image to be visible without having to give #wrapper a fixed height. Is this possible without having to do away with the gradient?

ericfootnote
Mar 24, 2009 at 5:08 am

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

Stephen
Mar 31, 2009 at 7:11 pm

The display:table; width:100% trick for the body tag does not work in IE8 (works in IE6-7, firefox, etc). Replacing it with min-width doesn’t work either.

Any workarounds to get a large bg working in IE8?

Ayaz Hoda
Apr 2, 2009 at 7:39 am

The best place to start with CSS

DooLittle
Apr 2, 2009 at 1:48 pm

Hi there,

Great tutorial! I would soooo love to use the sky picture as the bouground image on my website, but my problem is that my content area is only 750px in width. In other words, the only way I could make this image work as my background (like the way you’ve shown) is if I could get ahold of the psd or png original of that file and edit the white area to be 750px wide. I’m surprised nobody has asked if you would be willing to provide that yet, but I am asking.

Would you be so kind?

Facundo
Apr 2, 2009 at 7:55 pm

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!

Celthi
Apr 5, 2009 at 9:21 am

3 wonderful methods that can be applied to many different design situations. Thank you so much for providing this clear, well thought out tutorial. Now to go try them out! Thanks!!!

Sergio
Apr 5, 2009 at 9:55 am

Hello.

Excellent tutorials here.

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

Lois Reed
Apr 13, 2009 at 8:45 pm

WOW! I am so glad that I found you. I decided to walk away from struggling with WordPress customization and look at big backgrounds after seeing the Red Hot Chili Pepper website. And WOLA! It seems you’ve got a lot of answers to my endless questions.
Thanks for being fab and sharing your amazing talent with the world!
yay.

Joshua Wold
May 20, 2009 at 8:40 am

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

francisa
May 21, 2009 at 9:29 pm

thanks!

Kenneth
May 25, 2009 at 12:31 pm

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!

Ruby
May 26, 2009 at 7:12 am

Hi there,
I’m trying to do that with my WordPress but I have an issue. If you look at the “design job”, my proble is that the wrapper texture actually do the background of the content box as well. So I can’t remove it to put a single image or leave it transparent. I think I’m looking for a way to put the bg texture on my content box only…
Here’s the link to my problem: http://www.rubymoondesign.com/wordpress/
Thanks!

chaman
May 26, 2009 at 8:36 am

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……..

Ruby
May 26, 2009 at 9:43 am

Chaman, try to upgrade to the last IE version.

Watin
Jun 1, 2009 at 1:01 am

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

Michelle
Jun 1, 2009 at 11:50 am

Thank you so much! :)

verojuice
Jun 4, 2009 at 1:33 am

good job!
i like it very much!

Matt O
Jun 4, 2009 at 7:56 am

Very inspiring!!
For anyone’s comment:
I have started working with large images but I am wondering what kind of specs people are using??
What type of quality for the image, and what file size what be considered optimal?
Thanks!!

Greg Eland
Jun 8, 2009 at 12:07 pm

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

Ricardo
Jun 11, 2009 at 4:30 am

The tip {width: 100%; display: table} is very useful for larga backgrounds!

Ben Harold
Jun 14, 2009 at 1:54 pm

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:http://www.webdesignerwall.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?

Mariano Ripoll
Jun 17, 2009 at 5:11 am

To Ben Harold.

Have you tried to set a min width for the body or the wrapper that contains your background image? the CSS code is min-width: (size in pixels); that might make it expand if the browser is big but then it will stop if it resizes.

Let me know if it works or if you’ve found a way to fix it

Ricardo
Jun 18, 2009 at 5:13 am

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

Gabriel
Jun 18, 2009 at 9:27 pm

I have the same problem as Ben (for the site my name is linked to), and min-width in the body CSS doesn’t help. I can’t stand this anymore… We Designer Wall (which is a superb site, by the way!) works perfectly – what am I doing different?

Gabriel
Jun 18, 2009 at 9:29 pm

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.

Gianfranco
Jun 19, 2009 at 6:58 am

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.

Gabriel
Jun 20, 2009 at 1:50 pm

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.

Gabriel
Jun 20, 2009 at 2:21 pm

YES!! I think I’ve got the holy grail of large CSS background + sticky footer! First of all, I am using the sticky footer code from cssstickyfooter.com. Then I use the centered CSS background as described here. Now here’s the magic: instead of BODY {display:table and width:100%}, I give HTML a background color and give BODY {min-height: ___px} (the height of my background image).

Boom: background centers perfectly in everything, sticky footer in everything, background doesn’t get cut off when content extends below viewport, everything is magical.

Gabriel
Jun 21, 2009 at 12:47 am

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.

Gianfranco
Jun 22, 2009 at 2:32 am

Good to know there is somebody who test it out.
Keep going, Gabriel.
I don’t have time to test it right know by later this evening I will and will tell post my feedback and further test fot sticky footer + background to work toghether (this must be possible).

Ricardo
Jun 22, 2009 at 11:31 am

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.

Kevin Oh!
Jun 23, 2009 at 2:13 pm

I had the same problem with the sticky footer/large BG situation. The min-width on body worked perf.

body {
min-width: (size of wrapper)px;
}

Thanks Ricardo,

~Oh!

Gabriel
Jun 24, 2009 at 3:19 pm

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!

Gianfranco
Jun 25, 2009 at 4:39 am

I’ll give it a try and test it for browser compatibility. Sounds as a great fix, and a CSS trick that goes in the book.

Pete
Jun 27, 2009 at 3:10 am

Thanks for this!

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

Stijn Jasper - Moviecrew.nl
Jun 27, 2009 at 4:34 pm

Great website, and the post about the background was really helpful! Thanks!

Bedirhan
Jun 30, 2009 at 12:23 am

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!

panchicore
Jul 7, 2009 at 3:52 pm

thanks, Example #3 without wrapper worked for me :’D

Eddie Gear
Jul 9, 2009 at 5:59 am

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

London web design
Jul 10, 2009 at 9:27 am

Looks like the best solution is to apply a background color to HTML – thanks chaps!

dmaxonline
Jul 15, 2009 at 12:34 am

Nice and thanks for this article..

narendra
Jul 20, 2009 at 1:07 am

Great website, and the post about the background was really helpful!

Dedicated Minders
Jul 28, 2009 at 11:40 pm

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

ridwan
Aug 2, 2009 at 11:02 pm

thanks sou muCh,,,,

cennet
Aug 8, 2009 at 5:40 am

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

cennetevi
Aug 8, 2009 at 6:16 am

Thank =)=)=) you Thanks http://www.cennet.gen.tr

Martin
Aug 9, 2009 at 1:06 pm

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!

Martin
Aug 9, 2009 at 1:08 pm

oh i forgot it works in Safari but not fire fox

cennet
Aug 12, 2009 at 3:39 am

Doe Join

Arjen
Aug 12, 2009 at 12:57 pm

Thanks for the explanation. I’ve applied it to my weblog.

Thanks!

Cre8ive Commando
Aug 13, 2009 at 8:05 pm

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. :-)

Felix Groenewald
Aug 14, 2009 at 3:32 am

Great tut,

Can you please provide the dimesions of the white space within the background image.

Much appreciated.
FG

Felix Groenewald
Aug 14, 2009 at 11:52 am

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

Thnx
FG

Lore
Aug 18, 2009 at 1:44 pm

Hola.
Esta padrisimo, este artículo me gusto mucho. La explicación es perfecta y el demo mucho más.

Gracias y feliz dia.

the prodigy portal
Aug 24, 2009 at 5:52 am

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.

Wij
Aug 28, 2009 at 11:13 pm

If I coudl buy you a beer I would.. what a nightmare, I have been trying to figure this out for two days… thank you for your help. Now I can finally go to sleep, without this keeping me up all night.

Julian Lockhart
Sep 4, 2009 at 3:18 pm

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

Aoobi
Sep 4, 2009 at 7:25 pm

Great tut,

Can you please provide the dimesions of the white space within the background image.

Much appreciated.
FG

Hans Kuijpers
Sep 5, 2009 at 5:54 am

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

css
Sep 7, 2009 at 5:18 pm

CSS ( Cascading Style Sheets ) – Why CSS ? – Introduction – Css Link Properties / Examples – Css List Properties / Examples – Css Layer Properties / Examples – Css TextBox Properties / Examples – Css Font Properties / Examples – Css Text Properties / Examples – Css Cursor Properties / Examples – Css Background Properties / Examples – Css Table Properties / Examples – Css Scroll Bar Properties / Examples – Tools – Units – Parameters – Template Page – Web Design

http://www.css-lessons.ucoz.com/

bagsin
Sep 10, 2009 at 7:55 pm

Nice and simple tute. Really helpful

Dana
Sep 20, 2009 at 2:17 pm

Thanks so much for this article and explanation. Gave me the inspiration to try something new and not worry that it would blow up in my face ;)

I just recently found this place and I am already addicted! Keep up the great work, this is a solid bookmark :D

Cyrus
Sep 21, 2009 at 9:35 am

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

Web Design Talk
Oct 1, 2009 at 5:15 am

Excellent tutorial. For photo headers you can also add a small gradient fading to your bg color, to the left and right edges to create the same effect :)

LSB
Oct 6, 2009 at 8:33 am

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

BASINGLASS
Oct 7, 2009 at 11:46 am

Very cool tutorial! Very useful ideas too now that large LCD monitors are getting so cheap and popular. The only issue is the color schemes which are a lot of trial and error otherwise things begin to clash a little. Many thanks again!
– BP
http://www.basinpipes.com

denis2
Oct 8, 2009 at 1:05 am

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)?

love
Oct 15, 2009 at 12:29 am

just let love be

mattia
Oct 20, 2009 at 1:32 pm

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

JohnG.
Oct 21, 2009 at 7:42 pm

Oops! Ran into problem with IE 8 that Stephen mentioned in March: the display:table; width:100% trick for the body tag does not work in IE 8. Yes, it’s IE again!

After trying a few things, here’s something weird: If you keep display:table; width:100% in the Body tag but move the background image into a dimensionless Div that wraps all the content, you’ll fix IE 8 but now cause IE 7 to have the same problem! Any other suggestions?

jon
Oct 22, 2009 at 3:54 pm

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

Jasa pembuatan web
Oct 24, 2009 at 7:09 am

Oh thanks for this great tutorial! Jasa Pembuatan web

jon
Oct 24, 2009 at 12:46 pm

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

bakedthemes
Oct 29, 2009 at 3:44 am

this is great…but no bandwidth friendly

Mike
Oct 31, 2009 at 4:57 am

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

Josh Coast
Nov 4, 2009 at 5:07 pm

Putting the “display: table;” in with a “background-attachment: fixed;” makes the background image act funky when you scroll it in firefox. Maybe it’s obvious to some, but it got me for a while so I thought I’d put it out there. Thanks for the great tutorial! Really nice work!

Tony
Nov 12, 2009 at 2:52 am

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

yingzi208
Nov 12, 2009 at 4:20 am

fdsfafdsfdsfsa

yingzi208
Nov 12, 2009 at 4:22 am

very good!

charles
Nov 16, 2009 at 7:26 pm

muy bien saludos from colombia

Anwar
Dec 1, 2009 at 1:39 am

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

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

Thanks in advance.

sirus
Dec 3, 2009 at 8:56 am

Thank you SO much for this great tutorial!!!! I have been searching everywhere on how to do this and your page clearly shows how to do with the CSS… Again, many, many thanks!!!!!!

Chris Clark
Dec 30, 2009 at 12:49 pm

You have the prettiest website I have ever seen.

Najibah
Dec 31, 2009 at 12:46 am

Hi! I have been the fan of your site since the 1st time I arrived here. I’m totally new to web design, but jumping onto the bandwagon with much vigour, thanks to your site and your efforts. While trying to CSS a large background of my current trial project, I found out that if I use CSS example from “Sky Background Using HTML Selector”, IE 6 will not read it correctly. The background image selected by HTML element would be missing. Is there anyway to go around this problem, if I would like to stick to using HTML selector? Maybe anyone here can help? Thank you in advance.

Francesco
Jan 4, 2010 at 12:29 pm

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

Taryn
Jan 10, 2010 at 3:16 pm

Thanks so much for the beautiful backgrounds!

pRoy
Jan 17, 2010 at 2:34 pm

Wicked, Thanks!

dak Sullivan
Jan 22, 2010 at 8:16 am

Thank you, this is very helpful.

luke florio
Feb 1, 2010 at 4:03 am

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

Yasmina
Feb 19, 2010 at 10:38 am

Great post thank you!

Primanugraha
Feb 22, 2010 at 6:30 am

Thank’s for tutorial..very helpful

Dirk
Feb 22, 2010 at 8:36 am

Can someone tell me with code how to set the HTML background image (the gradient) in the sky demo. I just can’t figure it out.

Luya Tshimbalanga
Feb 23, 2010 at 12:37 pm

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

Michelle
Feb 25, 2010 at 12:45 pm

Love your site! It’s very helpful and looks great!

Dirk, to make the gradient BG effect, you create gradient image and just make it 1 pixel or so wide. The put that as the background image and repeat it along the x direction. Then set the BG color to the same color as the bottom gradient color (so they blend seemlessly). Sorry, not sure of the code as I did it in Dreamweaver and hate code, lol.

aackose
Feb 25, 2010 at 3:08 pm

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!

Poonit Patel
Mar 3, 2010 at 1:36 am

very good to guide me for big background in CSS ….
It will help me sure.
Thanks

robert
Mar 10, 2010 at 5:28 pm

u rock!

dak Sullivan
Mar 10, 2010 at 5:36 pm

go to http://www.bob.com its soooooooooooooo fun! :D

P.S. Im trap
happy.

mino
Mar 10, 2010 at 5:37 pm

ok

chalk33901
Mar 10, 2010 at 5:38 pm

sure

mino
Mar 10, 2010 at 5:39 pm

dat web site SUCKS:(

romila
Mar 23, 2010 at 2:51 am

thank uuuuuuuuuuuuuuuuuuuuuuuu

Max
Mar 31, 2010 at 11:12 am

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

John
Apr 4, 2010 at 12:36 pm

Great tips for using background images on a webpage..
Your website looks awesome! Great Job! Very Pro!

Keith
Apr 6, 2010 at 1:16 pm

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!

Eddy
Apr 11, 2010 at 4:38 am

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

matt
Apr 12, 2010 at 3:20 pm

You are a champion.

Alessandro Guimarães de Andrade
Apr 17, 2010 at 9:42 pm

Obrigado por esta informação! Este tutorial me ajudou muito!

Ben
Apr 19, 2010 at 12:49 am

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

sami
Apr 19, 2010 at 10:01 am

Hi,
Awesome Great Tutorial, Thank u very much for sharing. BTW :D I have a problem with my template website for Project University :S (I have just 766 in template resolution and I want to cover that erreur with an fabulous amazing background) Can you Help me PLZ
kind regard
MSN :: evil_dokter@hotmail.com
Devloper java & cpp :P

jake pucan
Apr 24, 2010 at 1:47 am

You save me from crop layout

Yaniv Y
Apr 26, 2010 at 12:57 am

Great article, thanks a lot!

Web Design
Apr 28, 2010 at 9:00 pm

Xcellent thank YOU!

Joshua Ausman
May 17, 2010 at 4:02 pm

Wow, your website is so beautiful.

santos10
May 25, 2010 at 11:19 am

Great article, thanks a lot!

santos10
May 25, 2010 at 11:19 am

Thank u very much for sharing.

santos10
May 25, 2010 at 11:20 am

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

santos10
May 25, 2010 at 11:21 am

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…

santos10
May 25, 2010 at 11:23 am

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.

aui
May 29, 2010 at 9:41 am

..

santos10
Jun 1, 2010 at 3:10 pm

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

mon
Jun 12, 2010 at 9:28 pm

this site looks great when you first open it, but if you resize the window, all the absolutely positioned elements stay put but the background image moves, so everything is out of place. I have this problem with my page to.

demonboy
Jun 14, 2010 at 12:57 pm

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!

Oktay BOZDEMİR
Jul 11, 2010 at 10:10 am

Thank you, very good sample…

Richy Rich
Jul 12, 2010 at 12:52 am

Wow – you got loads of spam comments.

Amida
Jul 13, 2010 at 6:55 pm

Well I was looking for a solution like that, but I got disappointed, the {display:table, width:100%} thing, really only works in chrome/safari. In firefox it goes crazy if you resize quickly the window and in Internet Explorer, the background simply continues to scroll. :(

Thx for the article anyway !

Fred
Jul 16, 2010 at 5:00 pm

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

Alexander
Jul 17, 2010 at 4:20 pm

Hello,

Great article.

I have tried the first example but the background image shifts when the window is smaller than the centered content.

Are you able to provide a correction to this example ?

Thank you for your help,

Alexander

Ranjitsinh Bhalgariya
Aug 3, 2010 at 6:42 am

Superb, Thanks very much for good info………

Martin Young
Aug 6, 2010 at 3:37 am

You’ve no idea how long I looked round for a solution to the issue of the background shifting when the browser window was reduced – and I thought it was going to be something really complex to sort. Great tip, huge thanks!

ary
Aug 7, 2010 at 10:50 am

Great Site, thank’s for the tutorials.

Web Design Company Dubai
Aug 16, 2010 at 9:07 am

Nice spoon feediing about using css backgroud.. hope lot of visitors will do and work out it in their works. thanks for sharing

Cáp quang NetPUMA
Aug 21, 2010 at 6:36 am

Hi

GaudStudio
Aug 27, 2010 at 11:35 am

Thank you very much.
Really Thank to U.
From gaudstudio.com
Thailand

Digital Extreme Media Group
Sep 8, 2010 at 1:25 pm

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

Diseño web
Sep 16, 2010 at 1:51 pm

Great Site, thank’s for the tutorials. Greetings from Spain.

Diseño web
Sep 16, 2010 at 1:58 pm

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

فيس بوك
Sep 21, 2010 at 6:49 am

i was looking for such tutorial professional work thanks

thinklinux
Oct 3, 2010 at 5:30 pm

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

mary
Oct 7, 2010 at 10:20 pm

my comment got eaten. Anyway I wanted to say that it’s nice to know that someone else also mentioned this as I had trouble finding the same info elsewhere
I think the replica handbags the quality is no bad.

saddam huysain
Oct 8, 2010 at 2:50 am

hi this is better

David
Oct 19, 2010 at 12:36 pm

Great article, guidelines were easy to follow; step-by-step and it was straight to the point.

El garch
Oct 21, 2010 at 5:38 am

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

Greg Jeffries
Oct 22, 2010 at 9:50 pm

Thank you SO much! This post was absolutely essential info for what I needed to know :)

Chris J.
Oct 23, 2010 at 3:52 am

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

Pete Parks
Nov 9, 2010 at 2:54 pm

Hey there!

How can I implement this into Joomla CMS site? I would be great to do this easy with a Joomla template. Any tips+

cheers!

Designer sunglasses
Nov 13, 2010 at 4:55 am

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!

ray
Nov 16, 2010 at 12:19 pm

any guide how to put a page using 2 different images, one on left of content and the other on right?

Jono
Nov 16, 2010 at 8:42 pm

@ 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!

Seth
Nov 17, 2010 at 9:46 pm

I think I am an idiot because for me the display:table and 100% width does not keep the background from continuing to scroll when the browser is re-sized smaller than the content. This is causing the text to bump outside the content area when the browser size is smaller than the main content. Any tips?

Seth
Nov 19, 2010 at 10:05 pm

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.

Ashley
Nov 23, 2010 at 5:22 pm

Thank you sooo much for this! You solved a problem that has consumed me for the past few days. I was able to use your demo and customize it to suite the site I was working on. You have no clue how relieved I am to have fixed my website issue!

Daniel
Dec 3, 2010 at 5:57 am

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

Melvins
Dec 11, 2010 at 12:24 am

Thanks for this valuable information. It helps me a lot in my designing task.

Los Angeles Web Design

chirag vadaria
Dec 16, 2010 at 2:44 am

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

Patryk Gagan
Dec 17, 2010 at 5:51 pm

Thanks, great tut.
http://www.awakeclothing.com

Diego Quesada
Dec 18, 2010 at 10:42 am

Great info! Thank you so much for sharing this.

Bowraven
Dec 21, 2010 at 5:16 pm

thank you for this content, very useful

Juno Mindoes
Dec 23, 2010 at 11:16 pm

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.

Sarah
Dec 23, 2010 at 11:45 pm

I really hope somebody answers me or maybe knows what I’m talking about… So for your navigation on your layout (any layout similar to such) did you just position your links into place and in their own box (ID?)?

This really helped me out though! Thanks!

Henry Peise
Dec 24, 2010 at 10:02 pm

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.

md rajib
Dec 30, 2010 at 3:46 am

I like shundorbon very much.I visit it every yaers.This is my country and i love shoundranban .i read in satkhira polyteachnic institute in computer 5th semister.my village name is satiantala.

md faisal
Dec 30, 2010 at 3:48 am

I am a student of s s c examination.

Paul
Jan 2, 2011 at 7:33 pm

Thanks for this. I’ve been trying to dissect your site for a while to figure out how you did the background/foreground thing. Now I know.

Sam
Jan 5, 2011 at 6:53 am

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

Aimee
Jan 6, 2011 at 10:03 am

Awesome Article!!! Saved me hours of searching! I was stuck on a layout with double image background – one of which was wider than typical resolution. HTML selector – who knew!!! Thanks!!

elizabeth
Jan 7, 2011 at 5:16 am

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

Bi
Jan 7, 2011 at 2:00 pm

Muchas gracias!!!
Gracias por compartirlo =)
Greetings from Mexico!

Uçak Bileti
Jan 11, 2011 at 5:04 pm

mustafadan selamlar

Uçak Bileti
Jan 12, 2011 at 5:25 am

mevlan kaderimizi

Ben
Jan 13, 2011 at 3:59 am

Thanks for sharing. Lol

Dilip
Jan 22, 2011 at 12:54 am

Thanks a lot for an excellent tutorial. This has opened new ideas for me to experiment with. I am not a computer geek but am trying to create my own website using Google sites. Appreciate the trouble you are taking to provide such nice learning venues for the people like me.

With the very best wishes,

dilip

Adalid
Jan 26, 2011 at 1:02 pm

I was looking something like this to clarify my doubts

Thanks!!!

I love your page. Nice Job

altın çilek
Feb 2, 2011 at 7:31 am

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

hcg damla
Feb 2, 2011 at 1:22 pm

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

Phill
Feb 5, 2011 at 5:13 am

Awesome tutorial, thanks.
One question. Would it be possible to animate the second bg image? i.e. have multiple images which scroll?
I’ve been working on this with CSS but can’t seem to get it right.
Any suggestions would be appreciated.
Thanks again.

Tony
Feb 9, 2011 at 1:37 pm

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 :)

Cory
Feb 22, 2011 at 2:03 pm

Hi,

Can I use the example you use for a single image layout on my site? I really like it a lot.

Thanks!

web design
Feb 25, 2011 at 9:10 am

great method…thanks for sharing this….

Chris
Feb 28, 2011 at 3:39 am

Thanks for sharing, this will help alot for my website. You rock!

Virgilio
Mar 1, 2011 at 6:29 pm

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!

thy bilet fiyatları
Mar 2, 2011 at 7:50 am

woow . i use in my web site.

credit card cash
Mar 2, 2011 at 10:43 pm

It was very interesting to read.
serve as a reference

Jolle
Mar 3, 2011 at 5:32 pm

Great, thanks! Love your site.

ANdy G
Mar 12, 2011 at 4:52 am

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

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:34 pm

The CSS examples are amazing!:)

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:35 pm

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

Los Angeles Website Design
Mar 26, 2011 at 12:23 am

I can’t get the image to be small enough, they’re all coming up at 300k plus… with loading time for lik 40 seconds… now I know we all have fast connections but I won’t want to get a pentalty of slow website from Google!

Jojo
Apr 4, 2011 at 12:01 pm

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.

peter
Apr 13, 2011 at 2:55 am

I HATE IT

dexx
Apr 17, 2011 at 2:04 pm

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.

Rae
Apr 22, 2011 at 1:02 pm

Ok so… I’m kind of a nub.. Hehe! How do I make it so that my small background image gets enlarged and stays centered in my css html website?

Heather Wood
May 12, 2011 at 11:23 am

Why would you want to enlarge a small image? What are you trying to do?

You should try Googling “centering with css” for centering tutorials.

Yasmeen
Apr 23, 2011 at 11:35 am

I love this .Thanks a lot

Gloopy
Apr 29, 2011 at 11:19 am

I cannot get this to work in firefox, demo here http://www.gloopy.co.uk

it will not resize :-
background: url(../images/bg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%
height: 100%

Gilberto Ramos
May 11, 2011 at 11:06 am

Thank you!! =)

Heather Wood
May 12, 2011 at 11:30 am

What am I doing wrong? I am using the html selector as you suggest, but it doesn’t display in firefox, chrome, or IE. Can someone please direct me or explain as to why this isn’t working. Has it been deprecated?

html {
background: #170c06 url(images/background-gradient.jpg) repeat-x;
}

Sofia Woods
May 20, 2011 at 5:04 pm

Thaaaaaaank You! Great post and just what I’ve been looking for – I particularly like the html selector trick demonstrated for the cloud background image example- will run off and give it a go now….

Lasa
May 26, 2011 at 4:44 pm

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

Fay
Jun 2, 2011 at 12:11 pm

Great Article. Thanks :)

Jim Kirk
Jun 24, 2011 at 3:44 am

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! :)

Gerry
Jun 24, 2011 at 6:48 am

Okay, nice points an nice input!
The trick with the sky background ist just fine!
But what to do, when your background is destined to be bubbles, like in a glas of mineral water? And the wallpaper has different blue shapes all over the picture and tons of bubbles with different sizes and shapes?
You can’t just take a smaller portion out of it an x- or y-repeat ist.

Any idea???

Greets

Gerry from Germany

internet marketing
Jul 5, 2011 at 4:11 am

Tutorial for using large backgrounds in CSS

Christian Matthias
Jul 24, 2011 at 9:56 am

Thank you for having one of the coolest and informational sites around.

I have one question that I am a little confused with. when you have the 1 px by 514 px gradient. How do you match that up with the larger gif/jpg/png so that it matches so perfectly? My thought is that you have the picture you want and cut out of it a 1 px by 514 px and then cut out the boxes of how you want the rest of it to look? am I on the right path? thanks so much.

sergio
Aug 15, 2011 at 8:38 am

thanks!!!!

ArualWeb
Aug 24, 2011 at 9:52 am

Je bloquais sur une règle bête, merci !

santrozen
Aug 26, 2011 at 1:21 am

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

raza
Aug 29, 2011 at 2:09 am

hello. my website is http://iappleworld.webs.com/. its very useful but can you please email me a css code for a suitable bacground for my website.

Jonas
Aug 31, 2011 at 6:15 am

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

Ben
Sep 2, 2011 at 8:31 pm

Gave me some ideas for my own layouts. I always have a difficult time coming up with a background.

utuxsecrets
Sep 23, 2011 at 10:32 am

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

Koming
Sep 24, 2011 at 9:49 am

thanks for the interesting article, i like “Example #1: Single Image” :D

sarcina
Oct 11, 2011 at 11:22 am

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

Carson
Oct 30, 2011 at 1:18 am

Thanks for this great tutorial. I especially benefited from “width:100%; display:table;” Good to know!

Rune
Oct 30, 2011 at 3:38 am

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 :)

jok
Oct 30, 2011 at 11:15 am

good

John
Nov 1, 2011 at 11:25 am

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

jihaloo
Nov 30, 2011 at 10:57 pm

thanks a lot! great tutorial

Jens Bauer
Dec 18, 2011 at 3:57 pm

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.

esther
Feb 3, 2012 at 4:40 am

I love you!! Thank you for sharing your knowledge!!

David
Feb 8, 2012 at 10:37 am

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.

Dana
Feb 9, 2012 at 7:13 pm

I just wanted to say thanks for explaining how that was done, I have been baffled.

pippa butt lift, pmma injections, hydrogel injections, maca root, gluteal enlargement, fix-a-flat injections, bigger booty, pippa middleton butt exercises
Feb 11, 2012 at 4:16 am

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.

Jony
Feb 12, 2012 at 8:09 am

Hi Nick,
i love your posts. They are usefull! Please, can you tell me what do you think about premade buyable css templates like on http://www.titantemplates.com ?

Thank you
Jony

Agatha
Feb 17, 2012 at 6:55 am

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

hidoo
Feb 27, 2012 at 12:23 am

thanks,This tutorial let I learned a lot !

bitch
Mar 22, 2012 at 8:43 am

bitch nigga

Kelvin Castelino
Apr 4, 2012 at 3:49 am

I am stuck with this problem, hope you would have a solution!
My design can be sliced in 3 parts, header, body and footer!
Thought the content of Header is about 150px, the sliced image with the design will take about 800px! But then I want the body image following it, but since the body content just starts after 150px, not sure how to tweak in the code! :(

Site: http://wp.cfci.org.in/

Anay
Apr 13, 2012 at 8:58 am

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??

Makhan Butt
Apr 28, 2012 at 1:55 am

The CSS part is very simple. Specify the background image to use large Background using css.

http://www.handycss.com/how/how-to-use-large-background-using-css/

bitkisel
May 2, 2012 at 1:15 pm

Thank you Thank you!! This is organized very nicely

nikhil
May 8, 2012 at 1:10 pm

nice 1:)

Artur Sites
May 11, 2012 at 2:01 am

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

jamestulum
Jun 28, 2012 at 1:19 am

welcome my page

Susan Fisher
Jul 12, 2012 at 12:40 pm

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.

إبراهيم الأمير
Jul 30, 2012 at 3:55 am

أنا مصمم مواقع عايز خلفيات لموقع شركة تأمين ممكن لو سمحت

pa background check
Jul 31, 2012 at 3:45 am

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.

Asad
Aug 27, 2012 at 3:31 am

very helpful post, i have fixed my background image problem in my site

AmirHossein
Aug 31, 2012 at 1:56 pm

Wow , this solutions was great… Thanks

Alquiler yates Ibiza
Aug 31, 2012 at 4:20 pm

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.

KHOKON
Sep 10, 2012 at 1:44 pm

Thanks for clearing my concept of Large image. I am searching such kind of tutorial for long time.

renato
Sep 28, 2012 at 7:41 pm

Thank you very much.

John
Nov 28, 2012 at 1:11 am

Dude, you are a hero. Example #3 is refined, exquisite and just plain works. Thank you.

sequentially
Jun 1, 2013 at 2:28 am

Hey there! Do you use Twitter? I’d like to follow you if that would be okay. I’m
absolutely enjoying your blog and look forward to new posts.

David
Jan 7, 2017 at 6:51 am

Thanks for sharing the post. Really usefull.

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.