CODEWITHSUNDEEP
css
Ale
Ale

Reputation: 1052

Is there a way to use opacity on the background defined before the last one

I have the following case ( i will nest the CSS within the HTML to save same space):

<body style="background: url('someimage.png')">
   <div style="background: white">
      <header style="opacity:0.6">
      </header>
      <article></article>
   </div>
</body>

I want the opacity to work for the body's background, not the div's one. And there is no way to make the div's background transparent. I'm looking for effect as the img below. I have the body with a image background, then a div that contains header, article and some many more things I didn't included, but the main div has background white and the i want the header to have this transparent effect from the body's background. And in the same time I'm looking for a responsive solution so photoshop won't help (I think).

the header and article are wrapped in single div

What you're going to suggest? Thanks.

The main problem that this is a wordpess theme, and I don't want to mess with the HTML structure, I need a CSS solution.

Upvotes: 1

Views: 60

Answers (1)

zamnuts
zamnuts

Reputation: 9592

As far as styling goes, treat the article separate of the header:

<body style="background: url('someimage.png')">
    <div>
        <header style="background:rgba(0,0,0,0.6);border-radius:5px;">
        </header>
        <article style="background: white">
        </article>
    </div>
</body>

original answer before question edit:

Applying opacity:0.6 to <header> will only make <header> and all of its children transparent. Not the solution.

Applying opacity:0.6 to <body> will make all of its children transparent as well. Not the solution.

Solution: Add the transparency to someimage.png as an embedded alpha channel within the image, before even using it in the CSS.

Upvotes: 2

Related Questions