Containing div height with background image

HTML & CSS
1

I’m just getting my feet wet in CSS but I have one challenge on my first page (http://peterwade.com/colossians/excited-about-colossians.html).

The only way I can get my background image to work (a faux equal columns) is to give a height to the container div.

.books-layout {
	background: url("http://peterwade.com/images/book-pages-bgd.png") repeat-y;
	border: none;
	height: 2400px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: left;
	width: 750px;
}

I’ve tried height: 100% but no image is displayed. I want to use the same CSS file on 10 pages which will have varying heights.

Thanks,
Peter

2

Put the background image on the containing div instead. That should do it.

3

By the description of your problem I would say you have do not have this in your code :

body, html { height:100%;}
you can THEN give
.books-layout { min-height:100% /* oh and get rid of the actual height: declaration , of course */}

4

I tried that, dresden_phoenix, but it did not display the image.

Here’s the complete CSS:

/* ALL BOOK PAGES --------------------------------- */

body, html { height:100%;}

/* book layout */
.books-layout {
	background: url("http://peterwade.com/images/book-pages-bgd.png") repeat-y;
	border: none;
	min-height: 100%; /* this added but image not displaying, was "height: 2400px;" */
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: left;
	width: 750px;
}

/* book pic */
.books-pic {
	border: none;
	left: 20px;
	padding: 0px;
	position: absolute;
	text-align: left;
	top: 10px;
	width: 210px;
}

/* book detail */
.books-detail {
	border: none;
	left: 250px;
	padding: 0px;
	position: absolute;
	top: 10px;
	width: 290px;
}

/*  sidebar */
.books-sidebar {
	/* background-color: #f4e9bc; */
	border: none;
	left: 560px;
	padding: 15px;
	position: absolute;
	top: 10px;
	width: 150px;
}

/* main content */
.books-content {
	border: none;
	left: 20px;
	padding: 0px;
	position: absolute;
	top: 325px;
	width: 530px;
}

.books-1 {
	background-position: 0px 0px;
}

.books-2 {
	background-position: -200px -100px;
}

.books-3 {
	background-position: -300px -100px;
}

.books-4 {
	background-position: -600px -100px;
}

.books-5 {
	background-position: -300px -200px;
}

.books-6 {
	background-position: -500px -200px;
}

.books-7 {
	background-position: -600px -200px;
}

.books-8 {
	color: #4c4c4c;
	font-family: Verdana,Arial,Helvetica;
	font-size: 12px;
	font-weight: normal;
	line-height: 19px;
	margin: 10px 0px 0px;
	padding: 0px;
}

.books-9 {
	font-family: Verdana,Arial,Helvetica;
	font-size: 13px;
	line-height: 15px;
	margin: 0px;
	text-indent: 0px;
}
/* Carts across content bottom */
.cart-bottom-1 {
	border: none;
	height: 109px;
	text-align: left;
	width: 530px;
}

.cart-bottom-1-1 {
	border: none;
	clear: both;
	display: inline;
	float: left;
	height: 103px;
	margin-left: 2px;
	margin-top: 2px;
	padding: 1px;
	width: 123px;
}

.cart-bottom-1-2 {
	border: none;
	display: inline;
	float: left;
	height: 103px;
	margin-left: 2px;
	margin-top: 2px;
	padding: 1px;
	width: 123px;
}

.gen-1 {
	clear: both;
}

As soon as I commented out min-height:100% in div “.books-layout” and added “height: 2400px;”, the background pic displayed.

Thanks,
Peter

5

The problem is that you’ve given the inner elements position: absolute, which means they are unseen by other elements, the wrapper included. Position: absolute shouldn’t be used for layout in general. A better option is to have two floated columns that contain the content, and then give the wrapping div overflow: hidden so that it will wrap around them.

6

Fixed. I[ve added overflow: hidden; to the wrapper div, changed the inner elements to float:left; but I had to revert the sidebar to position: absolute; – its working.

Thanks to all who helped.

Peter