My Background is blending with my Text

[Crazy Germanns]

Okay so I'm still working on building my site. I just got photoshop and decided to mess with it so I made a picture for the background. It looks great on a widescreen computer, but on standard sized screens, the graphic gets moved over to the left. For the most part it's fine, but when looking at the more info section of my products, the graphic overlaps the text.

Is there any way I could make a border around the more info text with an opaque background, so that the background image doesn't blend in with the text?

[Cronos]

Hi Crazy Germanns,

You need to edit the global.css file in your themes folder

Z-Index stacks things relative to other elements. z-index:1 is below z-index:2 and that is below z-index:3 and so on.

Go to line: 137 (in your global.css file) and add another CSS property
(This is to make the boxes come up the stack and giving them a background color. You can choose any color. I have given white)

z-index:999;
background-color:#ffffff;

Go to line: 16 (in your global.css file) and add another CSS property
(This is to make the graphic go down the stack)

z-index:1;

[nicetazmenia]

Added to what Cronos suggested, if you want an opacity background color then you need to add the following properties to the rules of that html element you want that background to appear.
Example: If I want to add new rules to the #page element to add that opacity then it will look like this.
#page {
margin:0 auto 2px;
text-align:left;
width:980px;
/*new background opacity 75% ==*/
filter:alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
}

1. filter:alpha(opacity=75); = is for IE using their effect mark up.
2. -moz-opacity: .75; = is for Firefox or any browser still using CSS 2.
3. opacity: .75; = is for Firefox or any browser using the new standard CSS 3.

[Crazy Germanns]

thanks cronos I did what you said and it worked great!

taz I'm not sure what you're reffering to when you say opacity. When you set it at 75% opacity are you talking about making the background for the text at 25% transparent, letting 25% of the background graphic show through? That's what I'm understanding from your post. If so, then that'd be great, but I don't completely understand the code you wrote. Could you do it in a newbie friendly form like cronos did?

thanks a lot to both of you. I'd be dead without this forum

[nicetazmenia]

If you have a background image on a parent container and a background color on a child container set to #FFFFFF; meaining white, then to make the background color of the child container to see through the parent container you need to set an opacity.

In your case, I believe that is what you are looking for according to your post. Now since Cronos suggested to put a background color: #FFFFFF; if you wanted to set a transparency effect you need to use the opacity property. Now to do that it will need to be done with three different properties, since browser render opacity differently.

Example below is just to illustrate how to put the code together.

#page {
width:980px;
filter:alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
}

75 means 75% visible since 100% is a solid color of the #FFFFFF; (white).
As I explain before, the first property is for IE browser, the second is for Firefox or other browser using CSS2, third is for Firefox or other browser using CSS3.

I hope this clear enough. Again is this additional suggestion from what you already have. Attached is the sample screen shot of the code.

[Crazy Germanns]

that would go in line 137 then correct?

Edit: I tried putting it in line 137 and nothing happened.....

[Dara21]

This is good...The concept of the color is very nice.Follow the tips of everyone who post..It is useful..


Regards

Albert

_____
Pret immobilier