Hi there I'm trying to get my background image to repeat-y to the size of the text column. The column height sizes vary depending on text quantity. I have this so far and it works well in IE but not FF. However, if I use px in FF then it works but only to the pixel height nominated. Any ideas would greatly be appreciated.

body {
background:#003366 url(body-bg.png) repeat-y;
color:#ccc;
font-family:verdana, arial, sans-serif;
font-size:.68em;
min-height: 100%;
height:100%;
}

html,body {
height:100%;
}

#wrapcenter {
clear:left;
min-height:100%;
height: auto !important;
height:100%;
margin:0;
background:#fff url(wrapcenter-bg.png) repeat-y;
}
  • I'm confused, which background image are you refering to? body-bg.png or wrapcenter-bg.png? Looks the same tome on both IE8 and FF3.6. o.k.w almost 7 years ago
  • btw next time please add comments instead of answers to your question... check out the FAQs (http://doctype.com/doctypecom-unofficial-faq)! Mottie almost 7 years ago

5 answers

Mottie 1134
1
point

Hi

Looking at your preview image it appears you want to add the wrapcenter-bg.png to each column. I'm not quite sure what you mean by setting the body to 100% height. Anyway, there are two things that need to be done:

  1. Body background should not be set to repeat-y only, I have a monitor set to 1600x1200 resolution and I see a large white vertical space on the right. So just remove that.

    body {
     background:#003366 url(body-bg.png);
     color:#ccc;
     font-family:verdana, arial, sans-serif;
     font-size:.68em;
    }
    
  2. To add the vertical background image to the columns, try adding this:

    .rightside .modulecontent,
    .center-rightandleftmargins .modulecontent,
    .leftside .modulecontent {
     background: url(http://test.workingwebsolutions.co.nz/Data/Sites/1/skins/wws-template-home/wrapcenter-bg.png) -18px top repeat-y; 
    }
    

I don't know if that is the answer you are looking for, but hopefully this will help a little


Hmmm, well height:100% works differently between IE8 and every other browser (except maybe Chrome which is very similar). So the easiest solution, I think, would be to use some scripting and since you are already using jQuery, this adding this:

<script type="text/javascript">
$(document).ready(function(){
 var columns = $('.rightside .modulecontent, .center-rightandleftmargins .modulecontent, .leftside .modulecontent');
 var maxHt = columns.map(function(){ return $(this).height(); }).sort()[2];
 columns.height(maxHt);
})
</script>

If you don't want to use scripting, check out this site... it uses a padding/margin hack, but appears to require a lot more CSS.

Answered almost 7 years ago by Mottie
Faisal 0
0
points

Hey Felicia Did you get the answer for your problem. Because I am having the same problem with css background image.

Your help is really appreciated.

Thanks,

Answered over 6 years ago by Faisal
  • Hi Faisal - unfortunately I didn't get the answer I required but I ended up rectifying it by placing an overflow: hidden on the style name "wrapcenter" and using the home template skin for the products page where I also use the 3 column layout. Here's the CSS: #wrapcenter { clear:left; min-height:600px; margin:0; background:#fff url(wrapcenter-bg.png) repeat-y; overflow:hidden; /* this makes the image overflow visible acts as a clearing method for FF especially */ } Hope this helps Cheers Felicia over 6 years ago
0
points

Hi Faisal - unfortunately I didn't get the answer I required but I ended up rectifying it by placing an overflow: hidden on the style name "wrapcenter" and using the home template skin for the products page where I also use the 3 column layout. Here's the CSS: #wrapcenter { clear:left; min-height:600px; margin:0; background:#fff url(wrapcenter-bg.png) repeat-y; overflow:hidden; / this makes the image overflow visible acts as a clearing method for FF especially / } Hope this helps, Cheers

Answered over 6 years ago by Felicia
0
points

Thanks for the info. Unfortunately it's not quite right.
What I would like is for the "wrapcenter" background image to be the same length on each column but it needs to go to the level of the longest text column. You're code above is great but the bg image only will go to the length of the column's text so the bg lines are all uneven. So I need the wrapcenter bg image to be 100% of the longest column so it will spread evenly vertically in the wrapcenter id. Currently in IE it looks fine because of the use of height: 100% and min-height but in FF the % doesn't work. FF only seems to work with pixels. I previously had:

#wrapcenter {
clear:left;
min-height:500px;
height: auto !important;
height:500px;
margin:0;
background:#fff url(wrapcenter-bg.png) repeat-y;
...
}

but naturally the bg image will only go to 500px and in the packages page it needs to go longer. I hope this all makes sense. Any ideas?

Answered almost 7 years ago by Felicia
0
points

OK thanks so much for your feedback. Cheers

Answered almost 7 years ago by Felicia