Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 647
Michael Yuzhiheng Xiao Avatar asked Oct 16 '25 10:10

Michael Yuzhiheng Xiao


1 Answers

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.

like image 140
Elliot B. Avatar answered Oct 19 '25 00:10

Elliot B.



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!