Solved

CSS: How do i get part of the div transparent

Posted on 2011-03-06
5
487 Views
Last Modified: 2012-05-11
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
Comment
Question by:nirisan
  • 2
  • 2
5 Comments
 
LVL 6

Expert Comment

by:GregArnott
ID: 35048410
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
 

Author Comment

by:nirisan
ID: 35054939
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
 
LVL 30

Expert Comment

by:LZ1
ID: 35057388
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
 
LVL 6

Accepted Solution

by:
GregArnott earned 500 total points
ID: 35065817
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
 

Author Closing Comment

by:nirisan
ID: 35096976
thanks
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question