Solved

CSS: How do i get part of the div transparent

Posted on 2011-03-06
5
499 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 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

Technology Partners: 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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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 …

688 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