CODEWITHSUNDEEP
javascripthtmlcss
Daniel Meles
Daniel Meles

Reputation: 3

How do you change an <img> source based on screen size?

I'm trying to change the background image based on the size of the display. It is not running on a server. You can find all of my code at https://github.com/Umpalompa/Umpalompa.github.io.

I have tried using both content:url(); and background-image: url();; Neither of them worked

body {
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.background {
    margin: 0;
    padding: 0;
    z-index: -2;
    height: 100vh;
    width: 100%;
    position: absolute;
    overflow: -moz-hidden-unscrollable;
}

 .background img {
    height: 100vh;
    width: 100%;
}


@media screen and (max-width: 375px){
    .background{
        content:url(./background-imgs/375px.png);
    }
}
@media screen and (max-width: 770px){
    .background{
        content:url(./background-imgs/770px.png);
    }
}
@media screen and (max-width: 1022px){
    .background{
        content:url(./background-imgs/1022.png);
    }
}
@media screen and (max-width: 1290px){
    .background{
        content:url(./background-imgs/1290.png);
    }
}
@media screen and (max-width: 1366px){
    .background{
        content:url(./background-imgs/1366.png);
    }
}


<!-- ---------- background color ---------- -->
<div class="background">
    <img src="./background-imgs/background.png">
</div>

Upvotes: 0

Views: 69

Answers (2)

Mark Fisher
Mark Fisher

Reputation: 1257

You probably want to use the picture element (see documentation) which will allow you to specify a different image source for different device widths.

You're use of content is incorrect, and specifying background-image on an <img> element doesn't make sense either - unless the image has transparent parts, then the background-image won't show as it would be hidden by the actual image. You can't change the src of an <img> tag using css.

That said, if what you really want is a background image whose purpose is for decoration, rather than content, then you would want to use background-image on a non-<img> element, so you would get rid of the <img> tag and then your css would be something like:

.background{
    background-image: url(./background-imgs/1366.png);
}
    
@media screen and (max-width: 375px){
    .background{
        background-image: url(./background-imgs/375px.png);
    }
}
@media screen and (max-width: 770px){
    .background{
        background-image: url(./background-imgs/770px.png);
    }
}
@media screen and (max-width: 1022px){
    .background{
        background-image: url(./background-imgs/1022.png);
    }
}
@media screen and (max-width: 1290px){
    .background{
        background-image: url(./background-imgs/1290.png);
    }
}

Upvotes: 2

omoshiroiii
omoshiroiii

Reputation: 693

var backgrounds = document.getElementsByClassName("background");
var height = screen.height;
var width = screen.width;

//do calculation here to determine source based off height and width

for(var x = 0; x < backgrounds.length; x++){
    backgrounds[x].setAttribute("src", "YourSourceHere");
}

Since it is an attribute, you can change it using setAttribute once you have determined the appropriate source. You can also use:

backgrounds[0].setAttribute("src", "YourSourceHere");

since I'm assuming you only have one actual background. Possibly consider using an ID because of that?

Upvotes: 1

Related Questions