CODEWITHSUNDEEP
javascripthtmlcss
Michael Yuzhiheng Xiao
Michael Yuzhiheng Xiao

Reputation: 67

How to make background image not resizable in html?

body {
    background: url('../../asset/background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This is my code for an background image. I want the image to be not resizable when I am resizing the browser.

Upvotes: 4

Views: 25293

Answers (3)

syed mohsin
syed mohsin

Reputation: 2938

Setting the background-size to cover occupies the space of the div. See this.

Remove the background-size property and it will work fine.

Upvotes: -1

user1884047
user1884047

Reputation: 203

Try setting the background size:

background-size: 100px 100px;

Upvotes: 3

Elliot B.
Elliot B.

Reputation: 17661

You shouldn't use background-size:cover;. With that CSS you're telling the browser you want the background image to expand to cover the whole background area.

If you want the background image centered and not resized, just do this:

body {
    background: url('../../asset/background.jpg') no-repeat center center;
}

You can position the background in any manner you like, here are more options.

Upvotes: 4

Related Questions