CODEWITHSUNDEEP
htmlcss
Russell
Russell

Reputation: 31

How to have a full width background image without resizing or cropping

I want to have a full width background, but when I use background-size: cover, part of it gets cut off. With background-size: contain, it repeats on the right side. Is it possible to have the full size without cropping or resizing or repeating?

CSS: 

.home-3 {
    background-image: url("https://imgur.com/a/r9JRp");
    background-size: contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 100%;
}

Upvotes: 1

Views: 178

Answers (3)

dpfauwadel
dpfauwadel

Reputation: 3934

Did you try this ?

body {
    background-image: url("https://imgur.com/a/r9JRp");
    background-position: center top;
    background-size: 100% auto;
}

Upvotes: 1

Yamen Nassif
Yamen Nassif

Reputation: 2476

try this set background-size to cover

.home-3 {
    background-image: url("https://imgur.com/a/r9JRp");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

Upvotes: 1

Mirza Sisic
Mirza Sisic

Reputation: 2429

You need to add the following CSS:

body, html {
    height: 100%;
    margin: 0;
}
.home-3{
background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Upvotes: 0

Related Questions