?
Solved

CSS: How do i get part of the div transparent

Posted on 2011-03-06
5
Medium Priority
?
501 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

770 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