Adding a translucent background to a CSS file

  ade.h 16:47 24 Aug 06
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 06

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 06

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 06

/* 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 06

/* 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 06

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 06

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 06

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 06

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 06

You have to do as I say.

When will you learn?

:)

  ade.h 19:18 24 Aug 06

Consider my ear clipped! LOL.

Back later.

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

The Legend of Zelda Breath of the Wild review: Five hours with Zelda on the Nintendo Switch

1995-2015: How technology has changed the world in 20 years

How the painting-like animated sequences in A Monster Calls were created by Glassworks Barcelona

The 22 best Safari extensions | Best Safari plugins: Improve Apple's Safari web browser with these…