CODEWITHSUNDEEP
htmlcssimage
user4420358
user4420358

Reputation: 313

Make HTML body background image transparent

I am trying to make my background image transparent, and the rest of the page not transparent, eg a faded background image on top of non faded HTML and CSS.

I have an HTML page with an image as the background using a div. Below is a simplified version of the page:

<HTML>

<head>

    <style type="text/css">
        #backgroundImage {
            background-image: url('../Documents/images/Sea.jpg');
            background-repeat: no-repeat;
            background-size: 100%;
            opacity: 0.4;
            filter:alpha(opacity=40);
            height:100%;
            width:100%;
            z-index:0.1;
        }

        .main{
            height:500px;
            width:900px;
            margin:auto;
            background-color:green;
            z-index:1;
            opacity: 1;
            filter:alpha(opacity=100);

        }
    </style>


</head>


<body>

<div id="backgroundImage">

    <div class="main">

    </div>

</div>

</body>

I found this setup in the following question:

How can I make my website's background transparent without making the content (images & text) transparent too?

and it almost works, except that the whole page is transparent, not just the background image.

I have tried adjusting the Z-index and opacity on the 'main' div, but it is not working.

I feel this is a simple fix but I just cant see the solution.

I also tried this question, but it did not seem to offer a solution:

How do i make my background image transparent in CSS if I have the following code?

and this one:

CSS background-image-opacity?

I do not have sufficient reputation to post an image of what I am trying to achieve.

Upvotes: 5

Views: 42894

Answers (2)

Discern
Discern

Reputation: 183

HTML:

<div id="backgroundImage">

    <div class="main">

    </div>

</div>

CSS:

#backgroundImage{z-index: 1;}

#backgroundImage:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: url(http://static.tumblr.com/25bac3efec28a6f14a446f7c5f46b685/hywphoq/ufoniwv6n/tumblr_static_ldhkrazuoqo4g0s0sk8s4s4s.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0.4;
    filter:alpha(opacity=40);
    height:100%;
    width:100%;
 }

.main{
   height:320px;
   width:320px;
   margin:auto;
   background-color:green;
   z-index:-1;
   opacity: 1;
   filter:alpha(opacity=100);
}

JSFIDDLE DEMO

Site reference: http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html

Upvotes: 2

user3475283
user3475283

Reputation: 25

What you basically want to do is that the Background image should be a Watermark. The best approach would be:-

   <style>
div.image
  {
  width:500px;
  height:250px;
  background:url(images.jpg);
  background-repeat:no-repeat;
  background-position:center;
  border:2px solid;
  border-color:#CD853F;
  }
div.transparentbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid;
  border-color:#CD853F;
  opacity:0.6;
  filter:alpha(opacity=60);
  }
div.transparentbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#CD853F;
  }
</style>
</head>
<body>
<div class="image">
<div class="transparentbox">
<p>Hello World<br>
</p>
</div>
</div>

div.image

I am creating a div tag for set background image. by the help of Height and Width I am giving the size, by the help of background:url set the background image, by the help of background-repeat image never repeated if image size is small, background-position set the position of image, border: give the border which is solid, border-color: attribute is for give the color of border.

div.transparentbox

By the help of this tag we make the transparent box, margin attribute is use for the set the margin of the data, background-color: is use for set the back ground color, opacity is use for give the transparency of the box, filter:alpha(opacity=60); is set the compatibility For IE8 and earlier.

div.transparentbox p

this is given the style of

tag,this will set the margin, font weight and font color.

Upvotes: 0

Related Questions