Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS: How do i get part of the div transparent

Posted on 2011-03-06
5
Medium Priority
?
505 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

618 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