Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 165
  • Last Modified:

CSS Html expanding length image repeat

I have a web page with the css set to have a background image fill the screen
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;
}

Open in new window

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;
}

Open in new window


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
0
Winston Smith
Asked:
Winston Smith
  • 3
1 Solution
 
Kyle HamiltonData ScientistCommented:
please post a link to your page
0
 
Winston SmithDeveloperAuthor Commented:
Its internal, sorry. Ill try and post an example page somewhere when i get near a computer
0
 
LZ1Commented:
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.
0
 
Winston SmithDeveloperAuthor Commented:
I got it working with 3 different images and divs
.contentAreaTop {
	background-image: url(../img/tdb/clip-top.png);
	background-repeat: no-repeat;
	background-position: center top;
	width: 960px;
	height: 215px;
}

.contentAreaMiddle {
	background-image: url(../img/tdb/clip-mid.png);
	background-repeat: repeat-y;
	background-position: center;
	width: 960px;
}

.contentAreaBottom {
	background-image: url(../img/tdb/clip-bottom.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 960px;
	height: 100px;
}

Open in new window

0
 
Winston SmithDeveloperAuthor Commented:
Its me
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now