Sometimes in web design, you may want a large image centred in the background of your website, with a repeating background behind it. Oftentimes you will go ahead and create a div wrapper to hold your large background image and set your repeating background on the <body> tag.
I propose a much better way to do this with less code; using an often overlooked element in every website you make.
The <body> tags are inside your <html> tags. This means that you can set your repeating background on the <html> tag and your centred background image on the <body> tag. Then you are free to start using other elements without clutter from visual elements.
Demo
The following example is exactly what I described above in its most basic form.
HTML
The HTML can literally just be a standard document. You need not add anything extra; that is the beauty of this technique.
CSS
html { background:#fff url(images/repeating-background-image.jpg) repeat 0 0; }
body { background:transparent url(images/centred-background-image.jpg) no-repeat 50% 0; }
With as little CSS and HTML as this you can have the result you need. I will run through the background declarations step-by-step.
In the HTML element I have set the background to be white (#fff), I have then told it to use the image repeating-background-image.jpg and to repeat it – starting from the left at the top (0 0).
The body element has slightly different code for its background. I have told the colour to be transparent; this will allow the repeating pattern from the HTML element to show through. I have then declared the image, this can be any sort of image but would usually merge into the repeatable background (perhaps by using a gif or a PNG). I have told this image not to repeat, and have set its position to 50% (centred) 0 (top); you can also use pixels or ems here – it all depends on what exactly you need to do.
Remember that you won’t be able to see the background image in the <body> tag if you try to view it now. This is because there is no content in the <body> so it has no height. You can either add some dummy content between the <body> tags, or give the body a height in the CSS for testing purposes.
I hope this has been helpful to you; perhaps you have other techniques that you use?
Just the answer I was looking for to have a floral background on my latest website design. Nice and clear.