Position background image at bottom CSS-CodePudding

I'm trying to position my background image to be center bottom, I know there is a backgorund-position property, however it does not change anything to me.

At the moment I made the image responsive but it's just not bottom.

Here is my code:

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
        display: block;
        position: fixed;
        background: #2d8eb8 url("https://i.ibb.co/Cn1P5vk/bg.jpg") 50% 50%;
        background-repeat: repeat-x;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: center bottom;
    }
    </style>
    </head>
    <body>
    
    </body>
    </html>

Also if possible, I would like to place the style in a instead of the whole body, I can't manage to do it myself

CodePudding user response：

set background-size: 100% instead of using cover because cover will tend to cover the full width

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {height: 100%;}
body {
    display: block;
    position: fixed;
    background: #2d8eb8 url("https://i.ibb.co/Cn1P5vk/bg.jpg") 50% 50%;
    background-repeat: repeat-x;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    background-position: center bottom;
}
</style>
</head>
<body>

</body>
</html>