CODEWITHSUNDEEP
htmlcss
user1896786
user1896786

Reputation:

Change the opacity of the background, not the child elements

Is it possible to change the opacity of the background image of the form but not the fields inside the form. CSS:

#myForm{
  background-image:url("images/Binary.jpg");      
  border:1px solid #080808;
  box-shadow:#444444 0 0 1px inset;
  margin:20px auto 20px 52%;
  padding:20px;
  width:484px;
  -moz-box-shadow:black 4px 5px 11px;
  -webkit-box-shadow:black 4px 5px 11px;
  box-shadow:black 4px 5px 11px;
}

So, this is my CSS and I want to reduce the opacity of the Binary.jpg only not the contents of the form. Is it possible??

Upvotes: 3

Views: 302

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157334

Well I've hacked it, so certainly you can do it like this if you want

Demo

HTML

<div class="wrapper">
    <div class="holder">This is awesome yea ;)</div>
</div>

CSS

.wrapper {  
    position: relative;
    color: #fff;
}

.wrapper:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('http://www.freegreatpicture.com/files/146/25234-colorful-high-resolution-background.jpg');
    opacity: 0.7;
}

.holder {
    z-index: 2;
    position: relative;
}

Upvotes: 0

Winter Bash
Winter Bash

Reputation: 403

you can do this by with less opacity image change background on hover with less opecativy gif or png image

or try something like might work 

<div id="myForm">
    <form>...</form>
</div>

css

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Upvotes: 0

Nick Coad
Nick Coad

Reputation: 3694

Put simply: no. You would need to make the image a semi-transparent PNG.

Upvotes: 1

Related Questions