Content background not displaying or repeating

HTML & CSS
1

I’ve been searching and trying several different variations of CSS to get my background for the content area to repeat vertically with no success.

The code below is what I am currently using, which does not display the background at all. Using margin-bottom: -35000px; and padding-bottom: 35000px; was the closest in displaying the background, but of course a very long page. Using overflow: hidden; had varying affects in different browsers.


#content_container
{
	background: url(content_bg.png) repeat-y left;
	width: 940px;
	height: 100%;
	padding: 0;
	margin: 0 auto;
}
#content1
{
	/*overflow: hidden;*/
	/*margin-bottom: -35000px;*/
	/*padding-bottom: 35000px;*/
	width: 940px;
	height: 100%;
	padding-left: 26px;
}



<div id="content_container">
       <div id="content1">
<!-- dynamic page content -->
       </div>
 </div>
2

You’d probably have to add

html, body {height: 100%;}

to the CSS for anything to show up there, as otherwise, you are setting the heights of those divs to 100% of nothing.

Make sure that the background image really is where the CSS file thinks it is, too (that is, in the same folder as the CSS file).

3

Thanks ralph.m, but no luck.

The background does display when using the extreme padding-bottom and margin-bottom numbers previously mentioned. I only wish that was the problem.

4

I actually tested that code before posting and it worked, but it may not work in all browsers. (I’m not very good at full heights). What browser are you using?


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
html, body {height: 100%;}
#content_container
{
    background: url(content_bg.png) repeat-y left;
    width: 940px;
    height: 100%;
    padding: 0;
    margin: 0 auto;
}
#content1
{
    width: 940px;
    height: 100%;
    padding-left: 26px;
}
</style>

<script type="text/javascript" src=""> </script>
	
</head>

<body>

<div id="content_container">
       <div id="content1">
<!-- dynamic page content -->
       </div>
 </div>
</body>

</html>

Things will be different when you have some content on that page anyway. If you want the background image to span the full height of the window, I’d suggest putting it on the <body> element anyway. Then you can forget about all the 100% heights, which are tricky anyway.

5

I’ve viewed it in FF3.6, IE8, Safari 5.0.4 and Chrome’s latest (10.0…), and they all display the same.

I’m using the following doctype.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

I’m adding this code as part of customizing X-Cart to my site design. I don’t think there would be anything causing the issue.

6

It would be better to use a modern doctype, such as

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

or

<!DOCTYPE html>

But anyway, the transitional doctype doesn’t change this for me.

Could I just check: view what in? If you copy the code I pasted above into a .html file, place it on your desktop (along with the background image) and open it in your browsers, what do you see? Doing that, the background works for me.

7

Sorry. I was referring to my page and viewing it in the different browsers mentioned. I did try and view your code in the browser, which worked.

I’ll have to see what of the X-Cart CSS may be causing the issue. I’m sure I’ll be back.:rolleyes: