Winston Smith
asked on
CSS Html expanding length image repeat
I have a web page with the css set to have a background image fill the screen
This all works fine. The image is a book and I can put content "on the page" so it looks as we want. The trouble is when the content is longer than the book. Width is not an issue as I have it set at 960px. I have made the book so that there is a top and bottom image and I now have a centre image that can be repeated as necessary to stretch the book while retaining its width.
I do not know what design to use to make this happen. Tips?
Thanks and sorry for the extended babble.
Cheers
body {
line-height: 1;
color: black;
background: white;
background-image: url("../img/tdb/wood-54.jpg");
background-position: top;
background-repeat: repeat-x;
background-color: #e8e3D0;
font-family: Georgia, serif;
}
I then have css (.content) to have another centered H1 which has in image applied to it that stays centered at all times. There are tables and other content within this..content {
width: 980px;
margin: 0 auto;
}
.content h1 {
background-image: url(../img/tdb/clip-paper.png);
background-repeat: no-repeat;
background-position: center top;
width: 960px;
height: 920px;
}
This all works fine. The image is a book and I can put content "on the page" so it looks as we want. The trouble is when the content is longer than the book. Width is not an issue as I have it set at 960px. I have made the book so that there is a top and bottom image and I now have a centre image that can be repeated as necessary to stretch the book while retaining its width.
I do not know what design to use to make this happen. Tips?
Thanks and sorry for the extended babble.
Cheers
please post a link to your page
ASKER
Its internal, sorry. Ill try and post an example page somewhere when i get near a computer
Is there a live link you can show us?
It sounds like you need to clear floats or possibly give a static height and set overflow.
It sounds like you need to clear floats or possibly give a static height and set overflow.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Its me