Adding a translucent background to a CSS file

  ade.h 16:47 24 Aug 2006
Locked

What do I need to add to either of the following CSS files to create a translucent background to text boxes. I want them to stand out over the background image so that the text is easy to read without completely losing the image. You get the idea.

Bear in mind that these two files are generated by NetObjects Fusion rather than by me. In NOF, CSS is only used for text. Is there any extra info that would need to be added to the HTML?

Many thanks in advance.

  slightlymad 17:11 24 Aug 2006

But I don't know how to do it in NoF.

But here's an idea... if you have Photoshop, add a second layer above the image. Fill this with white, then drop the opacity of this layer down to, say, 50%.

This will give the illusion that you want: click here

If you don't have Photoshop I'd be very happy to do this for you - it would take a matter of moments.

It's also far, far easier than fiddling about with text box opacity. If you do this, then the text itself takes on the opacity, too! There's a fix, but it's a bit fiddly.

  ade.h 17:19 24 Aug 2006

Hi Marie.

I just noticed that I forgot to paste the files; will do that in a mo'.

Anyway - editing the image is a no-go really, because I'd be there all day trying to line up the opaque layers with where my text boxes are positioned. I have numerous text boxes over each background image, with a different image for each page.

I don't mind fiddling with the CSS, as at least it only has to be done once.

  ade.h 17:20 24 Aug 2006

/* CSS definition file containing sitestyle stylesheets */
BODY { font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif; background-color: rgb(255,255,255); background-image: none;}
A:active { color: rgb(255,0,0);}
A:link { color: rgb(0,51,204);}
A:visited { color: rgb(153,0,153);}
.TextNavBar { font-size: xx-small;}
A:hover { color: rgb(255,0,0);}

  ade.h 17:20 24 Aug 2006

/* CSS definition file containing site wide stylesheets */
A:active { font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, Sans-serif, sans-serif; font-size: 10pt; color: rgb(0,0,0); font-weight: normal; font-style: normal;}
A:link { font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, Sans-serif, sans-serif; font-size: 10pt; color: rgb(0,0,0); font-weight: normal; font-style: normal;}
.NOF_TS_Classic0 { font-size: small; color: rgb(255,255,255); font-weight: bold; background-color: rgb(0,0,0);}
A:visited { font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, Sans-serif, sans-serif; font-size: 10pt; color: rgb(153,153,153); font-weight: normal; font-style: normal;}
H1 { font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, Sans-serif, sans-serif; font-size: 12pt; color: rgb(0,0,0); font-weight: bold;}
H2 { font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, Sans-serif, sans-serif; font-size: 12pt; color: rgb(0,0,0); font-weight: bold;}
P { font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, Sans-serif, sans-serif; font-size: 10pt; color: rgb(0,0,0);}
A { color: rgb(0,0,0);}
ADDRESS { font-weight: normal; font-style: normal;}
A:hover { font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Helvetica, Sans-serif, sans-serif; font-size: 10pt; color: rgb(0,0,102); font-weight: normal; font-style: normal;}

  slightlymad 18:01 24 Aug 2006

You're gonna have to position both the text box and the image. And the semi-opaque image is just a single image, saved in Photoshop as a .jpg. No different to your original image.

But I'll explain what you want, CSS-wise.

First, position your background image:

body {
background-image: url(images/bgimage.jpg) 100px 40px;
}

That would set your background image 100 pixels from the left of the page, and 40px from the top. Obviously, the positioning is up to you.

You would then need to create a div for the text box:

#textbox {
width: (width of image)
height: (height of image)
margin-left: 100px;
margin-top: 40px;
background: white;
}

Now here's the important bit. To add opacity to the text box, add this:

filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: .6;

That would make the text box white, with 60% opacity. Obviously you can change the figures - 50, 0.5, .5 for instance, for 50% opacity.

Be warned - your text will also be 50% or 60% opaque!

The alternative is to use a 1px semi-opaque .png file, to use as as a background for your text box. Internet Explorer won't like this, but there IS a fix.

I won't go any further on that one, unless you say. For an example, click here

View the source code - the css is embedded in the page. The relevant bit is #content.

  ade.h 18:24 24 Aug 2006

Your first line confused me, as I thought I had already positioned the image and the text boxes.

The rest of your post confused me as well, to be honest. I don't want opaque text, as the whole point of this is to make the text easily readable without breaking up the background image.

I had already tried various translucent images - png, tiff and gif, but the png came out solid grey and the other two were not visible at all. Note that I haven't been in a position to preview the site in a browser yet.

By the way; I'm using PhotoImpact, not Photoshop.

Thanks for your help so far, Marie.

  slightlymad 18:57 24 Aug 2006

I was starting from scratch - a scenario, if you like.

I have the solution for the solid grey that Internet Explorer displays for the png. (Tiffs and gifs won't work, by the way.) That's what I used for the page that I showed you.

Are you ready?

Then we'll begin. First, make your png. It needs to be 1px by 1px, and let's try 80% for the opacity, and name it "ping80".

Now copy and paste this into the text div:

_background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/ping80.png');

And Bob's your uncle.

  ade.h 19:02 24 Aug 2006

Thanks very much, Marie. I can't try that right away, but I'll get back to you in an hour or so.

Can I just check whether it wouldn't be better to set the png file as the text box's background in each text box's properties rather than in the CSS file? Or would that not work?

  slightlymad 19:06 24 Aug 2006

You have to do as I say.

When will you learn?

:)

  ade.h 19:18 24 Aug 2006

Consider my ear clipped! LOL.

Back later.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

OnePlus 5 review

Best of the Grad Shows 2017: UAL Central Saint Martins

MacBook Pro 15-inch (2017) review

Comment connecter un MacBook à une TV ?