content background not displaying or repeating

**spiderling** · Apr 12, 2011 21:32

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.

Code CSS:

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

Code HTML4Strict:

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

**ralph.m** · Apr 12, 2011 22:24

You'd probably have to add

Code:

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).

**spiderling** · Apr 12, 2011 22:54

Thanks ralph.m, but no luck.

Originally Posted by ralph.m

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).

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

**ralph.m** · Apr 12, 2011 23:01

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?

Code:

<!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.

**spiderling** · Apr 12, 2011 23:24

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.

HTML Code:

<!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.

**ralph.m** · Apr 12, 2011 23:45

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

Code:

<!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

Code:

<!DOCTYPE html>

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

Originally Posted by spiderling

I've viewed it in ...

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.

**spiderling** · Apr 13, 2011 10:04

Originally Posted by ralph.m

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.

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.

User Tag List

Thread: content background not displaying or repeating

Thread Tools

Display

content background not displaying or repeating

Bookmarks

Bookmarks

Posting Permissions