How to make background image not resizable in html?

Question

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.

Answer 1

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 .

Answer 2

尝试设置背景大小：

background-size: 100px 100px;

Answer 3

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

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