CODEWITHSUNDEEP
css
MortenMoulder
MortenMoulder

Reputation: 6646

Background image aligned at bottom even when resized

I'm trying to align an image at the bottom of my DIV, which happens to be the background. Just to make the case even more real, I also added some overlay (as that is how I am doing it in my project).

https://jsfiddle.net/jy0w2jmr/

background-size: 100% 100%;

That will make the background size 100% of the DIV, but not stretched out, so it will be 300px tall (if my DIV is 300px tall).

How do I make it, so when I resize the DIV, the background image also resizes, but sticks to the bottom of the DIV and NEVER overflows the DIV? background-position: bottom; does not seem to stick it to the bottom of my DIV.

Upvotes: 0

Views: 265

Answers (1)

Mers
Mers

Reputation: 734

Does this work for you?

#container {
    width: 100%;
    height: 300px;
    background: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg");

    position: relative;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    opacity: 0.5;
}


#container {
    width: 100%;
    height: 300px;
    background: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg");
   
    position: relative;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    opacity: 0.5;
}
<div id="container">
    <div class="overlay"></div>
</div>

Upvotes: 1

Related Questions