6 replies [Last post]
Mon, 2010-02-08 20:17
skip88
skip88's picture
User offline. Last seen 3 weeks 5 days ago. Offline
newbie
Joined: 2010-02-08
Posts: 6
Points: 8

Trying to get a nice background behind my text on a website, but it all falls over when I try to make only the background behind the text semi-transparent.

The effect I want is just like the quote in the middle of this site - http://www.upstruct.com/
But. I also want the background behind the text to be a bit see through.
But! The text still needs to be stay fully opaque.

The background behind the text needs to be flexible too. As the text it is behind will change in lengths regularly.
So that counts out having a coloured & semi-transparent div.

So here's what I've got at the moment...

html

<span class="baseline-text-bg"><span class="baseline-text">No really, problems?</span></span>

css
.baseline-text-bg {
	background-color: white;
	padding: 3px;
	opacity: 0.6;
	filter: alpha(opacity=60);
}
 
.baseline-text {
	font-size: 50%;
	text-transform: uppercase;
}

Now before you say it, yes I recognise the problems with it from the start too. The fact that the text is nested inside the transparent bit.... But this is where I've ended up.

It started with it all being in one little thingy, which works perfectly, like on that site I showed, until I want to progress to making the background also semi-transparent as well as white..

Also. IE8 doesn't seem to make it semi-transparent at all..... sigh

Top
Tags:
Mon, 2010-02-08 20:19
#1
CupidsToejam
CupidsToejam's picture
User is online Online
rank Elder
Elder
Timezone: GMT-6
Joined: 2008-08-15
Posts: 1783
Points: 612

research RGBA

research RGBA

--------------------------------------------------

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
Mon, 2010-02-08 23:33
#2
Deuce
Deuce's picture
User offline. Last seen 23 min 10 sec ago. Offline
rank Guru
Guru
Timezone: GMT-8
Joined: 2005-11-20
Posts: 3198
Points: 444

CupidsToejam wrote: research

CupidsToejam wrote:

research RGBA

or semi transparent PNGs

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
Tue, 2010-02-09 14:27
#3
CupidsToejam
CupidsToejam's picture
User is online Online
rank Elder
Elder
Timezone: GMT-6
Joined: 2008-08-15
Posts: 1783
Points: 612

Deuce wrote: or semi

Deuce wrote:

or semi transparent PNGs

Sure, that works too. RGBA isnt supported by IE. skip88, there are some things you can do. Read the following post for more info.
http://24ways.org/2009/working-with-rgba-colour

--------------------------------------------------

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
Tue, 2010-02-09 16:53
#4
skip88
skip88's picture
User offline. Last seen 3 weeks 5 days ago. Offline
newbie
Joined: 2010-02-08
Posts: 6
Points: 8

well I guess that's just what

well I guess that's just what I want.

not completely fussed about it not workin in IE, I'll use a png as backup like that website you gave suggested.

a little excited considering ive never used RGBA before.. hadnt been exposed to it in web design before

Top
Tue, 2010-02-09 16:36
#5
CupidsToejam
CupidsToejam's picture
User is online Online
rank Elder
Elder
Timezone: GMT-6
Joined: 2008-08-15
Posts: 1783
Points: 612

I love RGBA! I dont care if

I love RGBA! I dont care if IE doesnt like it, screw them!

--------------------------------------------------

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
Wed, 2010-02-10 00:20
#6
skip88
skip88's picture
User offline. Last seen 3 weeks 5 days ago. Offline
newbie
Joined: 2010-02-08
Posts: 6
Points: 8

cheers.

cheers.

for anyone else looking at this, heres what mine's ended up as

.baseline-text {
	background: url(../images/background_white60.png);
	background: rgba(255,255,255,.6);
	padding: 3px;
	font-size: 50%;
	color: #000000;
}

Top