CODEWITHSUNDEEP
htmlcss
localhost
localhost

Reputation: 861

Image not responsive when screen size changes.

I am trying to make an image responsive, but when I test it with different screen sizes, it cuts off part of the image.My CSS is pretty straight forward as below. Here is my codepen

.mainImage {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    width: 100%;
    min-width: 100%;
    margin-right: 0;
    margin-left: 0;
    height: 600px;
    margin-top: -85px;
    background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
}

What am I missing or could be doing wrong?

Upvotes: 0

Views: 811

Answers (3)

Rik Lewis
Rik Lewis

Reputation: 749

You're setting all the "background-" parts first, and then defining "background" in a shorthand, which is overwriting. Change the order...

.mainImage {
position: relative;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
}

Or don't use the shorthand...

background-image: url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)

Upvotes: 2

Kees van Lierop
Kees van Lierop

Reputation: 1013

You could also use background-size: contain instead of cover to force the image to display fully.

cover will completely fill the whole background.

contain will make sure the whole image is displayed inside the element

You also need to apply these background styling properties after the main background style.

So:

.mainImage {
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-right: 0;
    margin-left: 0;
    height: 600px;
    margin-top: -85px;
    background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    background-attachment: fixed;
}

Upvotes: 1

Achmed
Achmed

Reputation: 323

try adding this:

background-size: 100% 100%;

Upvotes: 0

Related Questions