CODEWITHSUNDEEP
css
zmuci
zmuci

Reputation: 538

div transparency and background inherits

I am almost certain that this is not possible to create, but I have to ask. So I have those 3 divs. One is main wrapper, other is green one on the right side, and 3rd is the small one. So what would I like is to make that small div transparent all the way down to wrapper. So that it doesn't have green background, but the smiley one. Don't think it's possible, but then again, I might be wrong. I know I can split the green div in 4 blocks and "wrap" the transparent one, but that won't work because I have border radius on the small one.

UPDATED: http://jsfiddle.net/9hLf8mcu/3/

Upvotes: 0

Views: 50

Answers (3)

Sam
Sam

Reputation: 9944

I really like Anthony's answer using the duplicated background. Another solution would be to look into the clip and mask features of CSS.

Upvotes: 1

Anthony Carbon
Anthony Carbon

Reputation: 618

enter image description here

Just add this background: url('http://superlifestylecoach.typepad.com/.a/6a0120a9506f8e970b01348158e534970c-pi'); background-position:center right; to your .same_as_blue {

DEMO

Upvotes: 2

Pete
Pete

Reputation: 58432

It is not possible with pure css as you would need to have the green div to be transparent too, which it obviously isn't. A work around would be to give your small square the same background as the one you want it to have and then use background-position to move the image to where you want it

.blue {
    width: 200px;
    height: 200px;
}

.blue,
.same_as_blue {
    background: url(http://lorempixel.com/200/200/) left top no-repeat;
}

.green {
    width: 50px;
    height: 100%;
    background: green;
    float: right    
}

.same_as_blue {
    width: 40px;
    height: 40px;
    background-position: -150px top;
}
<div class="blue">
    <div class="green">
        <div class="same_as_blue"></div>
    </div>
</div>

Your fiddle updated - If you move the background:green you will see the little image matches up nicely

Upvotes: 1

Related Questions