Expandable box with two images

[remp]

Hello everyone,

I have a situation with a background image for which i have done a lot of research around the web and can’t find an answer. I want to show an image in the top section of the background and make the bottom expandable in case the div increases in height.

What i have so far is:

Content

#wrapper {background: background:url("../images/top.png")no-repeat;}

#middle   {background-image:url(../images/middle.png) repeat-y;

Now, the problem with this is that the background image will be cut out at about 20px from the top and not show the rest of it because its covered by the middle section background image.

in addition to that, i cannot add the “middle” image to the wrapper because the “top” image is a transparent png and it would show the middle image in the back anyways.

What do you guys think is the best way getting this accomplished???

Appreciate your help in advance.

[joshuanhibbert]

Use the background position property to offset the background image from the top:

#middle {

background-position: 0 50px;

}

Or if that isn’t suitable then add an appropriate amount of padding to the wrapper div:

#wrapper {

padding-top: 50px;

}

[joshuanhibbert]

@wolfcry911 Missed the repeat-y, as you suggested, use the second option.

[remp]

Thank to both of you for your suggestions. I have tried both just in case and i find myself in the situation where i actually need the content of middle to overlap the top image. By that, i mean the content is actually inside the middle div and if i add padding to the wrapper, everything, including the content, will move down. Any suggestions on a workaround, or a better way of achieving this?? Your help is greatly appreciated.

Here is the complete code so you can have a better idea:

#main_content_wrapper {background:url("../images/top.png")no-repeat;  width:1260px; margin:0 auto; padding-top:40px; font-family: Arial, Helvetica, sans-serif; font-size:12px;}



#middle {background-image:url("../images/main_bgd_middle.png");float:left; width:1260px; }

[remp]

You can find the image
here.

Thanks for your help.

[Paulie_D]

Wouldn’t this work with 3 images?

One ‘top’ bg image pinned to the top the wrapper and another ‘bottom’ pinned to the bottom of that div.

Then have a ‘middle’ bg image repeating for the middle section.

[joshuanhibbert]

What @Paulie_D said. Easiest solution for sure.

[standuncan]

Can you show a mockup or comp image with example content so we can better help you??

I think you may be able to get away with this

html:

Lorem Ipsum...

css:

#top {background-image: url(top.png);} <-- just the very thin top part with rounded corners

#mid {background-image: url(mid.png);background-repeat:repeat-y;} <-- just a 1 or 2 px thick background slice

#btm {background-image: url(btm.png);} <-- just the very thin btm part with rounded corners

[standuncan]

I think what @Paulie_D says would work too, but are the multiple background images cross-browser compatible?

[remp]

Thanks guys for your help. The main thing here is that im not only trying to achieve the round corner, i need to get the pattern at the top to show as the background (which ends at about 200px from top) and then i would show the repeating image which is currently what i have in the middle div. All this considering that the content should start from about 40px from the top.

I uploaded an example so you can see what im trying to say on this page

[standuncan]

Is there a reason why you can’t just use the two divs and add the heading or whatever content in front of the top image in the top div, the rest of the content in the bottom div?

[joshuanhibbert]

There are ways to do it semantically, using CSS, but if you want it to work in IE7 you will have to use something like this: http://jsfiddle.net/sl1dr/JZ4nD/

[remp]

@standuncan: If i add the the content to the top div, i would have to create two long top and bottom images to cover the space when the div expands in height, and i don’t know this would be efficient considering they would have to be bigger images in size.

@Joshuanhibbert: That might work, but i would have to put all the text in a “

” element (what other element can use? i understand i can’t do this on a div.) and i have more than text. Also, what is the browser compatibility?

Once Again, Thanks for your help.

[joshuanhibbert]

@remp You could use another div again, no reason you can’t, not ideal but it may be required in this case. That should work in every browser currently available.

[remp]

Are you referring to using a div inside the

element? and add the negative margin to the

?

[Author]

Posts