Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 514
  • Last Modified:

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

0
nirisan
Asked:
nirisan
  • 2
  • 2
1 Solution
 
GregArnottCommented:
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.
0
 
nirisanAuthor Commented:
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?
0
 
LZ1Commented:
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

0
 
GregArnottCommented:
Alternatively have a background image with transparent cutout located to the bottom right of #whiteBox.

The remaining background "above" would then need to be filled by the other elements in the box.

eg:
#whiteBox {
  background: transparent url("white_with_cutout.png") bottom right no-repeat;
  position:relative;
  width:480px;
  top:130px;
  left:20px;
}

#whiteBox h2 {
  background: #fff;
}

#whiteBox p {
  width: 480px;
  background: #fff;
  padding: 5px 0 10px 0;
}

Open in new window



0
 
nirisanAuthor Commented:
thanks
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now