4

I saw some similar questions regarding this. But my approach is different and none of those works for me. That's why I'm posting this. I want to change the opacity of the background image without changing the opacity of child elements, where the background image is loaded inside the body tag.

HTML:

<body> <div id = "background-div"> <div class = "header"> <div class = "ham-icon"> <img src = "images/ham-icon.png"> </div> <div class = "logo"> <span class = "google-logo">Google</span><span class = "hangouts-logo"> Hangouts</span> </div> <div class = "profile-data"> </div> </div> <div class = "body"> </div> </div> </body>

CSS:

body { position: relative; background: url(../images/back1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Improve this question
2
  • 1
    Could you make a jsfiddle or plnkr Commented Feb 27, 2016 at 12:09
  • 1
    You can use pseudo element and set background to it. See stackoverflow.com/a/12606407/4956536 Commented Feb 27, 2016 at 12:16

4 Answers 4

Reset to default
14

HTML Background with BODY filter

<HTML> gets a background image while <body> gets a 50% transparent white (layer of transparent color using RGBA)

html, body { height:100%; padding: 0; margin: 0; } html { background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed; } body { background:rgba(255,255,255,0.5); /* applies a 50% transparent white background */ }

Using CSS pseudo selector :before for body

Another way is using the pseudo selector for body, which can be a "layer" behind the actual body that can get the opacity property without affecting other elements.

html, body { height:100%; padding: 0; margin: 0; } body:before { background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed; display: block; content:""; position: absolute; z-index:-1; top:0; left: 0; right: 0; height: 100%; opacity:.5; }

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

You can try the following workarounds:

  1. Use an image that already has an alpha channel, such as PNG

  2. Have the background div and as a sibling and not as a parent of the other elements, and change their position with CSS, such as position:absolute; z-index; and so on.

  3. If your image only consists of colors, you can leave your HTML untouched and use RGBA/CSS gradients

Improve this answer

Comments

1

You can put the background to a separate <div>:

<body> <div id="content"> <div id="background-div"></div> <!-- content --> </div> </body>

Then position and style to fill the entire content.

#content { positon: relative; } #background-div { position: absolute; width: 100%; height: 100% opacity: 0.5; background: url(...); }
Improve this answer

1 Comment

You need to add a z-index:-1 into #background-div
-2

Use direct child selector:

body > .backgroudimg { blah blah }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.