Is it possible add 2 backgrounds on the top and bottom of a html page ?

**Wisdom** · 07-17-2010, 11:31 PM

So.. is it ? Both to repeat horizontally of course

(with repeat-x)

**Beverleyh** · 07-18-2010, 12:11 PM

I think so, although I've only done it with a tile on 'body' repeated horizontally (on the x axis) and tile on 'html' repeated vertically (on the y axis).

Once you understand the different behaviour of the 'body' and 'html' selectors, you can manipulate them to suit your needs.

If you consider that targetting 'body' in your CSS will just style the the top part of the screen (but won't repeat after you scroll) you can add your top horizontal tile to the body selector.
The html selector styles the whole of the html document (that's why a background image tiled vertically on the html selector will go down the whole length of the page, even scroll after scroll) so you should be able to add your bottom horizontal tile to the html selector and have it appear right at the very bottom.

Something like;

Code:

body { background:url("top-tile.jpg") 0 0 repeat-x; }
html { background:url("bottom-tile.jpg") 0 100% repeat-x; }

**Beverleyh** · 07-18-2010, 12:34 PM

Ok - I created a test page: http://jemthingsandstuff.co.uk/testi...op-bottom.html
Just view the source for CSS.

**coothead** · 07-18-2010, 01:55 PM

Hi there Wisdom,

our friend Beverleyh's code, unfortunately, does not work very well without content.

Check out this example, which also allows for for IE6's non-rendering of the min-height attribute...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>top and bottom background images</title>

<style type="text/css">
* {
    margin:0;
    padding:0;
 }
html {
    height:100%;
    background-image:url(http://www.coothead.co.uk/images/anim.gif);
    background-repeat:repeat-x;
    background-position:0 0;
 }
body {
    min-height:100%;
    background-image:url(http://www.coothead.co.uk/images/anim1.gif);
    background-repeat:repeat-x;
    background-position:0 bottom;
 }
#container {
    width:1000px;
    padding:110px 0;
    margin:auto;
 }
</style>

<!--[if IE 6]>
<style type="text/css">
body {
    height:100%;
 }
</style>
<![endif]-->

</head>
<body>

<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div>

</body>
</html>

coothead

**Wisdom** · 07-18-2010, 05:57 PM

I will try coothead method as I can see it worked on a html test page.

Thank you both for your awnsers, you both have a thanks from me

**coothead** · 07-18-2010, 06:01 PM

No problem, you're very welcome.

**Beverleyh** · 07-18-2010, 08:37 PM

our friend Beverleyh's code, unfortunately, does not work very well without content.

Just for the record, I didnt mean for my test page to be a definitive, "only this code" answer. The website's I use this CSS on of course also have content and other CSS properties which affect the result so my test page was just a starting point in the absence of a sample link from Wisdom as reference.

Thread: Is it possible add 2 backgrounds on the top and bottom of a html page ?

Thread Tools

Search Thread

Is it possible add 2 backgrounds on the top and bottom of a html page ?

The Following User Says Thank You to Beverleyh For This Useful Post:

The Following User Says Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions