asked on

CSS: How do i get part of the div transparent

I have a div on top of a background image.

I want part of the div(whiteBox) to be transparent i.e. only the right bottom corner, say - 50px by 50 px to be transparent.
how could i do this with CSS? please suggest with code. See code below.

Thanks

#feralBackground {
overflow:hidden; 
background: url(/feral_bg.jpg) no-repeat; 
height: 767px;
}
#whiteBox {
background:#ffffff;
position:relative;
width:480px;
top:130px;
left:20px;

}

Open in new window

GregArnott

Using CSS3 one could simply use a white png or gif with the bottom right corner cut out.

#whiteBox {
    background: transparent url("white_with_cutout.png") no-repeat;  
    background-size: 100%;  
    etc
}

Open in new window

The same technique could be used sans "background-size" in earlier versions of CSS as long as the size of #whiteBox is fixed, thus having the cutout image also being an exact fit.

nirisan

ASKER

the size of the whitebox keeps varying as it is a form and it displays error messages, thereby increasing the height of the whitebox.

is there a way to target the right corner and set the opacity?

LZ1

The only way I can see you doing this is with nested divs and transparent bg's for cross-browser compatibility. So what I would do is something like below. CSS alone can't replicate what you want. But a little tweak to the HTML can.

<div id="ferelbackground">
regular content here

<div id="whitebox">
form here
</div><!--end whitebox-->
</div><!--end end ferelbackground-->

Open in new window

#feralBackground {
overflow:hidden; 
background: url(/feral_bg.jpg) no-repeat; 
height: 767px;
}
#whiteBox {
background:url(/pathTo/bg-transWhite.png) repeat;
position:relative;
width:480px;
top:130px;
left:20px;

}

Open in new window

ASKER CERTIFIED SOLUTION

GregArnott

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nirisan

ASKER

thanks