CODEWITHSUNDEEP
css
Dan
Dan

Reputation: 550

How can I do this in CSS? Transparent background on an element inside another element with background

is this possible? My CSS isn't bad, but I can't cannot wrap my hear around this. I want to use a background image behind a header, but I want the header to "knock out" the background image leaving the background either side. I hope that makes sense.

I've made a fiddle incase anyone wants to have a bash...Thanks!

http://jsfiddle.net/CnVBU/

Upvotes: 0

Views: 499

Answers (3)

Purag
Purag

Reputation: 17061

The easiest way of doing this is with border-image. See your updated fiddle here.

Here's the CSS for it (multiple browsers):

.container { 
    border-width: 20px;
    -moz-border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round;
    -webkit-border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round;
    border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round;
    text-align:center;
}

I generated this code with Border-Image.com (because writing this yourself is confusing as all hell :P).

Upvotes: 4

Setthase
Setthase

Reputation: 14398

I've update your jsFiddle:

http://jsfiddle.net/CnVBU/2/

Now you got transparent background on h1.

I've use rgba color model: Red (range: 0-255) Green (0-255) Blue (0-255) Alfa (0-1). If you want 50% transparency use 0.5 alfa there.

This works in all common browsers (most IE will need filter / hack for it)

Upvotes: 0

Mike Brant
Mike Brant

Reputation: 71384

Well it is transparent now. It sounds like what you want is to apply a background color matching some other color (body background color?) to the h1. Something like this:

http://jsfiddle.net/CnVBU/1/

Obviously using whatever background color you want and adding margin/padding etc. to give you the proper "knock-out" size.

Upvotes: 0

Related Questions