Background Image Repeat Y issue

[shotsy247]

Hi All,

I am trying to create a rounded corner layout. I'm using a 9 slice technique. All works well except for the left and right outside edges. I used a background image for these two divs with repeatY, but the background image only shows once and does not repeat.

Here's the HTML:

<div id="interface">
<div id="interface_top">
<div id="top_left_corner">&nbsp;</div>
<div id="top_center">&nbsp;</div>
<div id="top_right_corner">&nbsp;</div>
</div>
<div id="interface_content">
<div id="content_left_vertical">&nbsp;</div>
<div id="content">

<div>
<p>Content goes here</p>
</div>
<div>
<p>Some other Content</p>
</div>

</div>
<div id="content_right_vertical">&nbsp;</div>
</div>
<div id="interface_bottom">
<div id="bottom_left_corner">&nbsp;</div>
<div id="bottom_center">&nbsp;</div>
<div id="bottom_right_corner">&nbsp;</div>
</div>
</div>

Here's the CSS:
#interface{ width:980px; margin:auto;}

#interface_top{ font-size:.01em;}

#top_left_corner{
background:url(../siteImages/interface_upper_left_corner.png) 0 0 no-repeat;
width: 15px;
height: 15px;
float:left;
}

#top_center{
background:url(../siteImages/interface_upper_horizontal.png) 0 0 repeat-x;
height: 15px;
width: 950px;
float:left;
}

#top_right_corner{
background:url(../siteImages/interface_upper_right_corner.png) 0 0 no-repeat;
width: 15px;
height: 15px;
float:right;
}

#interface_content{ clear:both; width:100%; height:100%;}

#content_left_vertical{
background:url(../siteImages/interface_left_vertical.png) repeat-y top left;
width: 15px;
height:100%;
float:left;
border-bottom:1px solid pink;
}

#content{
background: #FFFFFF;
width: 950px;
height:100%;
float:left;
}

#content_right_vertical{
background:url(../siteImages/interface_right_vertical.png) repeat-y top right;
width: 15px;
height:100%;
float:right;
}

#interface_bottom{ clear:both; }

#bottom_left_corner{
background:url(../siteImages/interface_lower_left_corner.png) 0 0 no-repeat;
width: 15px;
height: 15px;
float:left;
}

#bottom_center{
background:url(../siteImages/interface_lower_horizontal.png) 0 0 repeat-x;
height: 15px;
width: 950px;
float:left;
}

#bottom_right_corner{
background:url(../siteImages/interface_lower_right_corner.png) 0 0 no-repeat;
width: 15px;
height: 15px;
float:right;
}

Any help is appreciated.

_t

[shotsy247]

Okay, so it seems the issue is that the height of the div in which I wanted to apply the repeat-y didn't have any real content so it was only 20px high and that's how much of the background image was showing.

What I needed to do was add the height to the div to get the background image to repeat along the y axis to that height. The problem was the content would be different on every page so hard coding the height to the left and right content divs was not an option.

I used a little javascript to measure the height of the page content and then applied that height to the content_left_vertical and content_right_vertical divs.

Here is the code I used in the head:

<script type="text/javascript">

function doHeights( ets, teh ){
ets.style.height = teh.offsetHeight + "px";
}

</script>

Then I called the function from the bottom of the page after all of the divs have been created:

doHeights( document.getElementById( "content_left_vertical" ), document.getElementById( "content" ) );
doHeights( document.getElementById( "content_right_vertical" ), document.getElementById( "content" ) );

I'm sure there is a better method, but this is working for me in both Firefox and IE6.

_t

[aerofanatic]

Did you try setting height:100% for the left vertical and right vertical divs? This should work...

[shotsy247]

Hi aerofanatic,

As you can see from the CSS I posted the height is set to 100%. This did not work.

My understanding is that the divs will not expand vertically to the height of thier parent only to the content.

Thanks for the reply.

_t

[Brother John]

...What I needed to do was add the height to the div to get the background image to repeat along the y axis ... I used a little javascript to measure the height...
_t

Shotsy247. Brilliant. Simply brilliant!:D
I actually registered, just to tell you that!

[opifex]

% height == % as related to the container the element is inside of...

you need to start at the beginning of the nest... [
B]#interface[/B] doesn't have a declared height... so #interface_content doesn't have a reference and nothing below it either.

CSS...Cascading Style Sheet... it all runs downhill.

[shotsy247]

Brother John, I'm glad my post was a help.

[LBin]

Sorry to jump in on an old thread, but I think I am having the same issue shotsy247 was having with a Wordpress blog template I am customizing for a friend. I am glad that the Javascript fix shotsy found to measure the height works, but since I'm very much a novice with Javascript, I'm unsure of how to make this work for me. I understand the code that needs to go in the header, but am less sure about where to place that second batch of code - especially with Wordpress coding.

If I need to paste in any code at all to help out, just let me know. The work-in-progress blog is located at becomingfaithfull.com (http://becomingfaithfull.com).
(The standalone page -about- and archives page -uncategorized- are especially having difficulties with the side-by-side background images.)

Thanks so much for your help! This is driving me crazy!


Okay, so it seems the issue is that the height of the div in which I wanted to apply the repeat-y didn't have any real content so it was only 20px high and that's how much of the background image was showing.

What I needed to do was add the height to the div to get the background image to repeat along the y axis to that height. The problem was the content would be different on every page so hard coding the height to the left and right content divs was not an option.

I used a little javascript to measure the height of the page content and then applied that height to the content_left_vertical and content_right_vertical divs.

Here is the code I used in the head:

<script type="text/javascript">

function doHeights( ets, teh ){
ets.style.height = teh.offsetHeight + "px";
}

</script>

Then I called the function from the bottom of the page after all of the divs have been created:

doHeights( document.getElementById( "content_left_vertical" ), document.getElementById( "content" ) );
doHeights( document.getElementById( "content_right_vertical" ), document.getElementById( "content" ) );

I'm sure there is a better method, but this is working for me in both Firefox and IE6.

_t

[raj23]

Hi,
You have given the height to 100%, If gonna tell you the easiest way just open the image which you are given in the content_right_vertical ID in paint and measure its attributes that means find the height and the width and then give that height and width to that #content_right_vertical Id in CSS .It will display the image in Y direction.

[shotsy247]

It looks like you have a two column layout (column a left, column b right) and would like the same background (blue with shadows left and right) for both columns.

I'd suggest adding a background image as the background to a container div with repeat-y and then add the two columns (a and b) within that container div. That way the container div with the background image would expand to fit the contents of both columns and the blue background with shadows on each side would be as tall as it's tallest content (column a).

[LBin]

Thanks so much for the replys.

shotsy, yes you're correct on how I would like my layout to look. The only problem is that I am customizing and adapting an already-designed Wordpress template. I've tried what you suggested with the container div, but the way the template is set up, it pulls the various pieces of the layout from individual .php files. The container div would have to wrap around both the content and sidebar sections, and I've tried to do this in different combinations in the index.php, front-page.php, and sidebar.php file to no avail. It seems to screw the code up somehow and no background shows up at all. I'm not familiar with php, so maybe it's something I'm doing with the divs? Or maybe this is just a specific issue with this template, in which case maybe I should ask the designer? I'd appreciate your thoughts.

raj, thanks for your reply, but unfortunately I didn't quite understand what you were suggesting that I do. Can you try to explain it a different way?

Thanks again all.