...

View Full Version : How can you put text behind a semi-transparent background



MrBiggZ
02-18-2012, 07:48 AM
Greetings!

The title to this thread was maybe a little off in description.

Here's my test page => http://handlersspot.net/test/matrix

I'm trying to create a dot matrix marqee using a jquery scroller that I've used in the past. I'm really just trying to add a div over the top of the container that has the scroller. The background of that overlapping div is black with transparent holes in it. The layer below has a dark grey color to give the illusion of the LED in the sign being off.

I'm just having a rough time getting the background to be over the scroller so the text shows through the holes in the background.

Any help would be appreciated! Thanks!

coothead
02-18-2012, 09:44 AM
Hi there MrBiggZ,

you need to change the html div order slightly...

<div id="dotMarquee">

<div id="dots"></div>

<div class="scrollingHotSpotLeft"></div>

<div class="scrollingHotSpotRight"></div>

<div class="scrollWrapper">
<div class="scrollableArea"></div>
</div>

</div>

...and the css slightly...


#dots {
position:absolute;
background:url('matrix.png');
width:100%;
height:75px;
z-index:1;
}

coothead

MrBiggZ
02-18-2012, 03:13 PM
I gave that a try!

That's the original div order that I started out with!

The css for that id is different though. I gave it a try and the dots are were they should be. That far I had gotten before opening a thread.

I tried to give the p tag for dotMarquee a negative top margin. All that happened was that the text got but under the rest of the layers. :eek:

This is strange!!!

coothead
02-18-2012, 03:23 PM
Hi there MrBiggZ,

it seems that you have problems using the css that I posted. :eek:

You are using...

#dots {
position;absolute;
background: url('matrix.png');
margin:0 0 0 0;
width;100%;
height:75px;
z-index:1;
}

..but I gave you this...

#dots {
position:absolute;
background:url('matrix.png');
width:100%;
height:75px;
z-index:1;
}

I you look a little more carefully, you will see that you are using semi colons instead of colons. :eek:

And margin:0 0 0 0; was not in my code at all. ;)

coothead

MrBiggZ
02-18-2012, 04:29 PM
Bah!

Thought I deleted that zero margin! I'm not having a good day with my semi-colons and colons, at all!

That actually looks pretty nifty! I need a slightly bigger font, perhaps fatter and increase the letter spacing a little. But yeah, it looks pretty good! :)

Thanks so so so so much for your help!

coothead
02-18-2012, 04:33 PM
No problem, you're very welcome.
I just knew that we would get there in the end. ;)
coothead

Taro
02-18-2012, 05:51 PM
In addition to that, I would also suggest changing the transparency of the text, or align the background to wrap it with the coding.

MrBiggZ
02-18-2012, 08:22 PM
In addition to that, I would also suggest changing the transparency of the text, or align the background to wrap it with the coding.

Would you mean the opacity of the text? Background is aligned, best that I can see => width 100% and the height is manually set.

I will give the opacity of the text a try though!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum