CODEWITHSUNDEEP
htmlimagecss
user3808357
user3808357

Reputation: 241

CSS background-size and div size

I'm trying to create an overlay on an image using <img src="picture">. However, using background-color in CSS does not show since the picture is blocking the background. Is there a way to create a color that overlaps the picture?

I have tried using the picture has background-image:url(picture); but to my understanding, background-image does not dictate the <img> size but if you use <img src="picture">, you're picture size will form the` size. And I need the image to render proportionally to the window.

I need some insight.

Upvotes: 0

Views: 90

Answers (3)

Sami
Sami

Reputation: 1051

HTML

   <div class="first-stack">
      <img src="http://www.businessinsider.in/photo/37988660/These-Are-11-Wealthiest-Women-In-Tech.jpg"/>
   </div>

    <div class="overlay"> 
    </div>

    <div class="top-stack">
       <img src="http://www.businessinsider.in/photo/37988660/These-Are-11-Wealthiest-Women-In-Tech.jpg"/>
    </div>

CSS

.overlay{
    position:fixed;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    top:0;
    left:0;
}

.top-stack {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-339px;
    margin-top:-255px;

}

See The Fiddle Link : http://jsfiddle.net/Jyw8S/

Upvotes: 0

Imran Bughio
Imran Bughio

Reputation: 4941

Image Overlay Techniques:

Using background-image: If you prefer background-image then i would just using :after element and applying opacity to it. DEMO

Using <img> tag: You can use opacity: 0.1; max value 1, this will make your image transparent & you will be able to see the background image. DEMO

Upvotes: 0

abhinsit
abhinsit

Reputation: 3272

I think you want something like this:

This shows a container with a background color with a image over it and image also reflects the color of its background.

Fiddle link : http://jsfiddle.net/4AtGn/

HTML:

<div class="container"> 
    <img class="cont-img" src="http://www.businessinsider.in/photo/37988660/These-Are-11-Wealthiest-Women-In-Tech.jpg"/>
</div>

CSS:

.container{
    background-color:#090;
    width:100%;
}

.cont-img{
    opacity:0.8;
    width:100%;
}

Upvotes: 2

Related Questions