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.
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.
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?
The CSS part is very simple. Specify the background image (position it center, top) for the BODY
element.
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).
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.
The trick here is to export the GIF matte with a brown color that is similar to the cork board pattern.
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.
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.
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.
Marco
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
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
Nice to see you back !
Ivo
Thanks. Seamless patterns are boring.
art
and it’s interesting to work with large background on footer, especially when image is higher than footer
Jay
That’s a very cool technique, every useful. Thanks a lot!
avanzaweb
A good explanation for css beginners.
Tor Løvskogen
Have you thought about using the html selector when adding two images? One on html and one on the body.
Brtk
short, but great tutorial, thanks a lot !
gLENN
very geek trick!! I like the tiling image of sky from example #3..
Agus MU
in the past, i learned about this form your iTheme wordpress theme. Great Job Nick!!!
taufiq
omg, i’m so waiting to get your new post, and now,,, very great technique,,, thanks nick
Giridhar
very very useful tips… maybe..ill start over my abandoned wordpress theme creation process :-) thanks 2u
binocle
@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
Wow, this is great! I had to rethink one of my site designs because of this.
levi
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
Thanks a lot for this tut. I’ll try to built large background site tonight.
Anton
it is as clear as noonday, but thx for work.
LL` Leo Lemos
Cool!!! I love this tutorial. Congrats
Colin
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
Nick, you should also write an article about optimizing your large background image since yours clocks in at 172kb: https://webdesignerwall.mystagingwebsite.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
Wow… thank you sooooo much….. am surely going to redesign my website based on these guidelines and design.
Aaron Bassett
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
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
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
Very Nice
Stephanie
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
Very nice. Thanks for sharing.
Steve Ambielli
Very nice, quick tutorial.
Daxion
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
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
How did you create the background image? I can keep looking at it for a long time. Good luck, dude.
afewtips.com
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
Simply amazing, the grapich tech tutorial are so easy to understand, thanks for this tutorial!
webdeveloper
Great, will be useful for many!
Stephen kennedy
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
oops, just changed the screen to less than 100% with mse and your page goes out of alignment
Juan Antonio
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
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
Thanks for useful tut ;)
CSSJockey
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
@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
Have you heard Chase Talk?
Regards.
Markup4U team
@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
Nice explanations
ashvin
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
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
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
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
https://webdesignerwall.mystagingwebsite.com/trends/80-large-background-websites/
cheers
Lollie
Eric-from-Boston
i always love when people dissect their sites and show their css tricks to making stuff work.
Joey
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
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
Thanks for the tips. Very creative, detailed, and definitely useful!
RedRock
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
thank you for your sharing!
Criação de Sites Sorocaba
Great tips! thanks everybody
Chary
Wow quite a useful Tips on Background Image!!!!
cooool
Kyle Gallant
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
I definitely learned something here. Any tutorial and sharing is good. But one so clear and concise, it rocks! Thanks.
Jean from Taiwan
That’s great !
I really appreciate your explanation.
It’s help me a lot.
: )
Jon
Thats wicked – Cheers!
http://www.graylabel.co.uk
Rudolf.Pasztor
Pretty useful article. Thanks for that. Exspecially the last solution with the html&body background.
Shawn
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
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
thank to share
Darek
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
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
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
Thanks. I am finding this tutorial. it’s helpful.
insic
very useful tips you have here.
KEISYUU∞
Thanks! I always like your CSS tutorials!
Rafa Garcia
Logic applied to webdesign. Good article.
Indra
Wow Nick, another great tutorial. Thanks heaps for sharing this. Looking forward for another great tutorials from you
Maier Erik
Hi!
Great article!
Conrad Gorny
Ah this is very logical and usefull, thanks mate
Conrad Gorny
Freelance Graphic Designer
http://www.conradgorny.com
Esteban Presa
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
Good work!
Thanks for share it here.
Brad Strickland
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
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.
whoah, it’s nice but… I don’t know if 1280px is large..
Steven Clark
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
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
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
Thx for Markup4U team ;-)
drlovecat
Good review
Thanks for sharing
Rob
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
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
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
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
that’s very handy to know! as am busy updating my site atm!
thanks again for the tutorial…
http://www.mediacake.net
Yon
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
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
Man, nice article.. i’m on development of a large bg web site now!
Tom
Thnx for sharing your technique!
Skracanie linków
Large image backgrounds become some kind of trend and I’m not sure it’s good… Anyway good post like always.
Skracanie linków
@MattZ
It’s flash based website
Brian Feister
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
Wow… AWESOME!! Your tutorials are really fantastic… Your site is a master piece in itself.. Thanks for sharing this cool stuff.
viil
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
Pure awesomeness :)
Daxion
@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
Brilliant work yet again, keep them coming :-D
Arthur Robinson
Thanks, this is really helpful.
flash designer
Thanks, but sometimes “display:table” not work properly in IE6.
zanetrance
very cool! thanks, always wanted to know how web designer wall pulled that off.
Geoffrey Blanc - MG2 MEDIA
Very impressive again another tutorial that is quite simple and will help a lot of people. Keep on the good work
Banago
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
@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
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
@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
Thanks, this is really helpful.
I think i will use it in my next project.
my blog
reezluv
thanks for the info..really appreciate it..well done!
Elizabeth
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
Very useful article, thankyou very much!!!
lewro
Very nice tutorial. Thank you for sharing!
Bastian`
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
I like the Body background and the Wrapper background approach. Might make the page lite-weight than the other big image alternatives.
GAN
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
execellent tutorial :) keep it coming!
Iceman
This is a great website I will recommend it to everybody.. Thank you for the info great help.
Iceman
Iceman
Keep it coming..
iceman
SOS Media
This is great web design — THANKS!
Farid Hadi
Nice article showing how simple it is.
Thanks.
Dave Cutts
Any chance on getting an article on footer layout techniques as well?
cheers
Dave Cutts
Miiitch
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ç
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
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
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
Soooo how do you get the LARGE image to load quickly??
emiNo
Nice article.
Thanks a lot for your explication.
Flash Developer
Example #2 is really amazing… :)
Website Design in Buffalo, NY
A common technique that I’ve used for some time now, thanks for sharing :)
Riza
see this to: http://www.jayaninternational.com
Jon Williams
This was the exact project I am working on this weekend. Thank you for help as always ;)
Daxion
@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
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
Excellent tutorial. I just used it successfully on my web site: http://www.MyClubTees.com
Sam Ng
The two extra lines in body save me.
Thank you!
modelcitizen
I’ve always loved this look, but what kind of file size are you creating here? Surely these are pretty heavy images?
Jonathanq
Great explanation, the two extra lines did the trick!
Fumin
I just started my blog. (With a large background :)
Check it out, any suggestions will be greatly appreciated.
http://www.fuminyang.com
Mark
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
great explanation
luke graham
I’ve always loved this look, but what kind of size do you have?
luke graham
i love this website, it makes me happy
phill
us men love this book too.
lee
i agree with phill she is a man
lick my graham
i agree with william green
strudy
wow im so happy this is so true
Mark
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.
花火酷站
学习了,谢谢站长
3Q~~呵呵
Jim MacLeod
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
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
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
Nice Blog Cool Design
Thierry Dehove
Wow, it’s really a good tip ;-)
Thanks a lot,
Hi from Caribbean,
T&T
http://www.tropical-paradise.net
dovis
oh~ thanks.
This skill is so useful for me …
小半生
The design is really pretty
Mina Lee
I love it! Thank you
Diego
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
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
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
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
Great Tutorial
Thanks
Jeff
Might have to use a few of these tips. Thanks! You’ve made web design a little easier.
Affordable Web Design
Nice tutorial and thanks for the pointers
mookstar
Awesome and immediately relevant. Good job
william
its my birthday today and this website has made it the best day ever
thankyou
paluh
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
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
Hi!
Thanks a million for sharing your skills with us!
Raymond
Thank you so much for this article! Your timing is impeccable. Now I’m ready to design and code websites with large backgrounds!
masoud
Hi!
i use this way…
it was worked in IE very well… but it wasnt work in firefox…
whats the matter?
Alex
Nice practice I also like to use this on my sites. Thanks for sharing.
tim gould
i love this website as i have no life!
mohan
Awesome … Nice Experimental …Really you’re making good professionals for ever… I will pray for you..
please have the look my site give your feedback
www,nxsofts.com
with love
Mohan
[email protected]
tmdesigner
I ever missed “center top”..that’s a good tip. Now i will use them!
greg
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
Very useful tip. Thanks!
BORABORA
Thanks for this article and sharing your skills!
Very useful!
Regards
J Gu
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
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
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
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
Very useful tip. Iuse it in my twitter page and I will implement it in my blog. Thanks!
joao
I ever missed “center top”..that’s a good tip.
my blog
Dele
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
sorry i meant top center
umesh
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
I can’t quite think of a website on which the background gets croped off?!?
umesh
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
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
I enjoyed reviewing your large backgrounds…….it will help me in future design work
Bebo Skins
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
Great Work
Thanks
Will
http://www.willdoyle.co.uk
Dele
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
Great Work, Muy útil, será utilizado….
Thanks…
Di
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
really good tutorial
Levi Levita
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
Great tutorial. My clients all want one! Thanks!
diseñoweb
thanxs for the manual, I´ll use it in my nex poject.
Home Assembly Jobs
That was a nice post. I’m going to try designing my own large background theme though I suck CSS. ;)
factotum218
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
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
I love you comment script. Where can I purchase its PHP code from?
Thank you
Yamen Elasadi
sitender kumar
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
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
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
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
this will make the world wide web a lot prettier, great tut, very handsome with wide screens
Silviu
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
Very nice. Congratulations!
nastro
it’s good tutorial..thanks 4 your info..
Chris
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
Hello,
I want CCS code and PHP Code with script, can you advice me how to i get it?
My Best,
Indian Web Designers
very good guider here….
thanks
Matt
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
@ 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
I have been looking for some backgrounds to use for my next project.
Alex Soyk
The background is way to busy. Fine a new background….maybe like one color!
Jan
Nice :) Thanks, Nick!
LinkArchive.info
Heh.. My website’s background is solid color (faster loading) but thanks for the tips, very good tutorial.
Webbug
LinkArchive.info
jody
this is absolutely beautiful.
I hope one day I will get more skills under my belt to be able to use it.
slzb
display: table was what I needed. Thank you so much :)
E11World
Thanks for this tutorial. It really helps set things up when starting to develop a website. Cheers!
shida
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
How did you dealing with .png (transparency) in ie6 as with the “corkboard” layout?
Thanks!
Michelle
Is there a special way to create lightweight images?
I saw your background image is about 12 Kb. How do you get it?
Russ
how do you move the content section down so the background logo at the top can be seen?
Russ
never mind, found it
fukutsan
why in firefox i cannot see the background colour? :( am i doing something wrong?
Mark
I had a problem with my body background img for a current project, I found the solution here, thank you!
Mark
Viktorja
it is very intersting useful topic,
Please keep going , i am a fan of your site now
Viktorja
Epoxy
Large backgrounds look beautiful. But would it not make the website heavy?
Mark
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
good stuff!! excellent…………..
Sam
Thank you so much for this tutorial. Very clear and easy to understand!
Scarf*oo
Very easy to follow tutorial. Might recommend it to my fellow developers, when they bug me about css backgrounds. Keep it up!
Matt
Very nice. It opens up a whole new avenue in web design techniques. Keep up the good work!
Jamie
@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
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
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
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
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
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
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
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
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
The best place to start with CSS
DooLittle
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
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
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
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
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
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
thanks!
Kenneth
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
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
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
Chaman, try to upgrade to the last IE version.
Watin
Thanks , this is one of a great idea for web decoration.
Michelle
Thank you so much! :)
verojuice
good job!
i like it very much!
Matt O
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
The “display: table;” tip was a LIFE SAVER. Thanks loads.
Ricardo
The tip {width: 100%; display: table} is very useful for larga backgrounds!
Ben Harold
Hi,
I’m in the process of coding a site with a large background. I’ve been using this tutorial to attempt to get the background to display properly but I’ve run in to a problem with IE (surprise, surprise).
You can see what I’m working on here: http://www.comminternet.com/websites/innoftreasuredmemories.com/index.html
It’s working fine in Firefox and Safari. The problem seems to be that “body { display:table; width:100% }” which I got from your tutorial, doesn’t seem to take effect in IE7.
In fact, in your tutorial it doesn’t work properly in IE7 either. This example:https://webdesignerwall.mystagingwebsite.com/demo/large-background/cork-board.html is doing the same thing as my site in IE7, where the background continues to shift when you resize the browser smaller than the content area.
This is rather frustrating because I can see that webdesignerwall.com has implemented the same “body { display:table; width:100% }” method for the large background and it is working fine in IE7. I’ve been looking at your site’s code and I can’t figure out what the trick is to make this work in IE. Help please?
Mariano Ripoll
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
Efectively as Mariano Ripoll suggested, the min-width aplied to the body fixes the issue for IE7.
Gabriel
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
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
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
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
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
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
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
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!
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
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
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
Thanks for this!
What’s the license on the demos – e.g. this background image:
https://webdesignerwall.mystagingwebsite.com/demo/large-background/images/cork-bg.png
Stijn Jasper - Moviecrew.nl
Great website, and the post about the background was really helpful! Thanks!
Bedirhan
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
thanks, Example #3 without wrapper worked for me :’D
Eddie Gear
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
Looks like the best solution is to apply a background color to HTML – thanks chaps!
dmaxonline
Nice and thanks for this article..
narendra
Great website, and the post about the background was really helpful!
Dedicated Minders
Thank you. This is an useful information for background image setup in CSS..
ridwan
thanks sou muCh,,,,
cennet
Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.
cennetevi
Thank =)=)=) you Thanks http://www.cennet.gen.tr
Martin
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
oh i forgot it works in Safari but not fire fox
cennet
Doe Join
Arjen
Thanks for the explanation. I’ve applied it to my weblog.
Thanks!
Cre8ive Commando
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
Great tut,
Can you please provide the dimesions of the white space within the background image.
Much appreciated.
FG
Felix Groenewald
OH my!
Not to worry, found the answer by looking at the css file.
Thnx
FG
Lore
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
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
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
Nice Job! Clear and concise. I makes it so easy to get the concepts because of the screenshots..
Aoobi
Great tut,
Can you please provide the dimesions of the white space within the background image.
Much appreciated.
FG
Hans Kuijpers
always nice to read useful tutorials.
makes it easy to explain to others.
thx
css
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
Nice and simple tute. Really helpful
Dana
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
Great , How to: CSS Large Background
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
Web Design Talk
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
Thanks very much for this!!!!!!!!!!!!!!!!!!!!!!!!
BASINGLASS
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
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
just let love be
mattia
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.
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
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
Oh thanks for this great tutorial! Jasa Pembuatan web
jon
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
this is great…but no bandwidth friendly
Mike
Very cool tutorial! Very useful ideas too now that large LCD monitors are getting so cheap and popular.
Josh Coast
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
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
fdsfafdsfdsfsa
yingzi208
very good!
charles
muy bien saludos from colombia
Anwar
Its Great, Please also describe about footer image like in this page. i.e. https://webdesignerwall.mystagingwebsite.com/tutorials/how-to-css-large-background/
It should keep hold with bottom even no text in a page.
Thanks in advance.
sirus
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
You have the prettiest website I have ever seen.
Najibah
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
Great tutorial! Thanks! Just one doubt about the ones with “Photographic Styles”…
Taryn
Thanks so much for the beautiful backgrounds!
pRoy
Wicked, Thanks!
dak Sullivan
Thank you, this is very helpful.
luke florio
Thanks very much for the excellent advice and clarity of presentation.
Yasmina
Great post thank you!
Primanugraha
Thank’s for tutorial..very helpful
Dirk
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
{width: 100%; display: table} css trick causes sticky footer css to break.
Michelle
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
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
very good to guide me for big background in CSS ….
It will help me sure.
Thanks
robert
u rock!
dak Sullivan
go to http://www.bob.com its soooooooooooooo fun! :D
P.S. Im trap
happy.
mino
ok
chalk33901
sure
mino
dat web site SUCKS:(
romila
thank uuuuuuuuuuuuuuuuuuuuuuuu
Max
Thanks so much for double background example. This is the best technique I’ve seen so far. BTW, this site is so pretty. ;)
John
Great tips for using background images on a webpage..
Your website looks awesome! Great Job! Very Pro!
Keith
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
Excellent – This is exactly what I’m after. Thanks very much for sharing.
matt
You are a champion.
Alessandro Guimarães de Andrade
Obrigado por esta informação! Este tutorial me ajudou muito!
Ben
Awesome article. It has come in handy for a couple of my client websites :)
sami
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 :: [email protected]
Devloper java & cpp :P
jake pucan
You save me from crop layout
Yaniv Y
Great article, thanks a lot!
Web Design
Xcellent thank YOU!
Joshua Ausman
Wow, your website is so beautiful.
santos10
Great article, thanks a lot!
santos10
Thank u very much for sharing.
santos10
Thanks , this is one of a great idea for web decoration.
santos10
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
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
..
santos10
Excellent – This is exactly what I’m after. Thanks very much for sharing.
mon
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
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
Thank you, very good sample…
Richy Rich
Wow – you got loads of spam comments.
Amida
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
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
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
Superb, Thanks very much for good info………
Martin Young
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
Great Site, thank’s for the tutorials.
Web Design Company Dubai
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
Hi
GaudStudio
Thank you very much.
Really Thank to U.
From gaudstudio.com
Thailand
Digital Extreme Media Group
Thanks worked like a charm. Looks alot better now. Thanks Again!
Diseño web
Great Site, thank’s for the tutorials. Greetings from Spain.
Diseño web
Great Site, thank’s for the tutorials. We been very useful tutorial. We appreciate the effort and dedication. A cordial greeting from Spain.
فيس بوك
i was looking for such tutorial professional work thanks
thinklinux
Thanks! Great article. You save me a lot of time ;)
mary
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
hi this is better
David
Great article, guidelines were easy to follow; step-by-step and it was straight to the point.
El garch
Great tutorial thank u so much going to share this page ^^
Greg Jeffries
Thank you SO much! This post was absolutely essential info for what I needed to know :)
Chris J.
I’ve been like drowning on the WWW looking on how to do this. Thanks a lot Nick!
Pete Parks
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
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
any guide how to put a page using 2 different images, one on left of content and the other on right?
Jono
@ 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
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
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
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
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
Thanks for this valuable information. It helps me a lot in my designing task.
Los Angeles Web Design
chirag vadaria
hello
any guide how to use in link menu in sprite css & how put in pop up menu in css.
thanks
chirag
Patryk Gagan
Thanks, great tut.
http://www.awakeclothing.com
Diego Quesada
Great info! Thank you so much for sharing this.
Bowraven
thank you for this content, very useful
Juno Mindoes
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
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
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
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
I am a student of s s c examination.
Paul
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
Awesome Post Dude! Concise and idiot proof instructions, I like :)
Aimee
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
FINALLY!! Thanks for this info…after days of struggling this hit the spot!!! You are appreciated. Blessings. You have a beautiful site!
Bi
Muchas gracias!!!
Gracias por compartirlo =)
Greetings from Mexico!
Uçak Bileti
mustafadan selamlar
Uçak Bileti
mevlan kaderimizi
Ben
Thanks for sharing. Lol
Dilip
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
I was looking something like this to clarify my doubts
Thanks!!!
I love your page. Nice Job
altın çilek
FINALLY!! Thanks for this info…after days of struggling this hit the spot!!! You are appreciated. Blessings. You have a beautiful site!
hcg damla
FINALLY!! Thanks for this info…after days of struggling this hit the spot!!! You are appreciated. Blessings. You have a beautiful site!
Phill
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
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
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
great method…thanks for sharing this….
Chris
Thanks for sharing, this will help alot for my website. You rock!
Virgilio
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ı
woow . i use in my web site.
credit card cash
It was very interesting to read.
serve as a reference
Jolle
Great, thanks! Love your site.
ANdy G
Thanks Dude.This was very helpful.Keep it up :)
How To Put On A Condom | How To Get Taller
The CSS examples are amazing!:)
How To Get Taller | How To Put On A Condom
It’s alright if I sleep in class. This article explains it better.
Los Angeles Website Design
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
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
I HATE IT
dexx
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
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
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
I love this .Thanks a lot
Gloopy
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
Thank you!! =)
Heather Wood
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
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
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
Great Article. Thanks :)
Jim Kirk
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
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
Tutorial for using large backgrounds in CSS
Christian Matthias
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
thanks!!!!
ArualWeb
Je bloquais sur une règle bête, merci !
santrozen
wallah… tha was really interesting! where do we get gif image for background u used in example 2 ???
raza
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
Really a grat page. Good good good job.
I found so many interesting things I was looking for.
U rock!!
Ben
Gave me some ideas for my own layouts. I always have a difficult time coming up with a background.
utuxsecrets
thank u for this great tutorial,very helpful at all in progress my project
Koming
thanks for the interesting article, i like “Example #1: Single Image” :D
sarcina
very nice tutorial, a smaller background with center/top position can make your website to load faster.
Carson
Thanks for this great tutorial. I especially benefited from “width:100%; display:table;” Good to know!
Rune
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
good
John
Thx a lot, couldn´t figure it out myself.
jihaloo
thanks a lot! great tutorial
Jens Bauer
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
I love you!! Thank you for sharing your knowledge!!
David
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
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
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
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
Hi! I like your post! Could you please help me to find the brown image for 2nd Example? Thank you! Agatha
hidoo
thanks,This tutorial let I learned a lot !
bitch
bitch nigga
Kelvin Castelino
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
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
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
Thank you Thank you!! This is organized very nicely
nikhil
nice 1:)
Artur Sites
This solution aways work for me. Some times have problem with IE 6. But guys not use this anymore
jamestulum
welcome my page
Susan Fisher
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.
إبراهيم الأمير
أنا مصمم مواقع عايز خلفيات لموقع شركة تأمين ممكن لو سمحت
pa background check
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
very helpful post, i have fixed my background image problem in my site
AmirHossein
Wow , this solutions was great… Thanks
Alquiler yates Ibiza
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
Thanks for clearing my concept of Large image. I am searching such kind of tutorial for long time.
renato
Thank you very much.
John
Dude, you are a hero. Example #3 is refined, exquisite and just plain works. Thank you.
sequentially
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
Thanks for sharing the post. Really usefull.