View Full Version : Position Content Below Background Image

05-06-2009, 10:46 PM

I'm having trouble positioning my table that holds the content. I have set up a background image to be fixed on the page. The background image has a red line at the top. The table that holds the content has a white background and is covering up part of the red line. I'm not sure how to fix it.

Please let me know what css or html I could use to make the content table start below the red line.

Here is the page:


05-06-2009, 11:00 PM
Try adding this to your containing div:
<div align="center" style="margin-top: 68px;">

05-06-2009, 11:04 PM
that worked except when I scroll the page down it covers up the red line again.

I already made the change so you can see what I'm talking about.

05-07-2009, 12:06 AM
It looks like you have a transparent background on it now so the issue isn't present. What exactly are you trying to accomplish? Do you want the text to scroll only between instances of the background's vertical repeat or something?

05-07-2009, 12:12 AM
Yes, I removed the white background on the table.

I would like to make it so that when I scroll down the text disappears under the red line at the top.

05-07-2009, 02:34 PM
Yes, I removed the white background on the table.

I would like to make it so that when I scroll down the text disappears under the red line at the top.

OK, I think I understand you now. Unless you add another red line that will never technically happen BUT we can give it that appearance, which should be just as good. Try this:
<div align="center" style="margin-top: 68px; overflow-y: scroll; height: 532px;">and this:
body { background-image: url('http://www.trendous.com/special/images/trendous_bg4.jpg');
background-repeat: repeat-y; background-attachment: fixed;
background-position: top center
margin:0; }

05-07-2009, 07:08 PM
I really appreciate your help with this.

I implemented the code above. It works but it looks a little strange with 2 scroll bars.

I also have another problem. The background image looks great on my computer screen but it doesn't look good on my other computer screen. Any recommendations?

05-07-2009, 09:21 PM
There's no workaround; you have to keep playing with it. You may need to export it differently, choose a different image, or even rethink your original idea. There will always be variation in the look from computer to computer. PCs show darker than Macs, fonts vary between platforms, and the designer knows that designs must be reviewed on as many machines as possible. You're not going for identical rendering, but acceptable variation.

05-08-2009, 02:46 PM
This is very true. I'll also mention that if you use PNG format for images (I didn't check to see if you did, but sooner or later you are bound to) and if you want the image color to match a color in your HTML/CSS you will need to use PNGCrush to remove the "gamma" data. Some browsers use gamma correction for PNG images and some don't so the result is images matching web colors for some viewers and not for others. Right now this might not be very relevant but down the road it might save you some frustration in trying to match web colors to an image.

If you don't need to match an image's color with a web hex code color in the CSS (e.g. background-color:#334256;) then you absolutely do not need to worry about gamma correction issues.