CODEWITHSUNDEEP
htmlcss
Deepanshu Goyal
Deepanshu Goyal

Reputation: 2813

Do not move background image on Window resize, keep it static

When I resize my window the background image also moves and gets resized, I dont want it to get resize, i want it to remain static. I am really confused how to keep my background static. If I set the width in pixels, then it remains static but that wont be good option as depending on different screen sizes

body {
    background-color: #000000;
    margin: 0 auto;
    width: 100%;
}

#container {
    background: url("url") no-repeat scroll center top transparent;
    width: 100%;
}

The code is like:

<body>
<div id="container">
</div>
</body>

Upvotes: 3

Views: 14770

Answers (3)

jhunlio
jhunlio

Reputation: 2660

did you try this?

#container {
    background: url("url");
    background-repeat:no-repeat;
    background-position:fixed;
}

Upvotes: 1

Ashis
Ashis

Reputation: 103

Try this code -

#container {
    background: transparent url("url") 0 0 no-repeat;
    width: 100%;
}

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50189

If you set the image to be width:100% then the image will resize with the screen. If you want it to just sit on the top center without scaling then you can use position:fixed, explicit width and then position it correctly.

#container {
    background:url("url") no-repeat scroll center top transparent;
    background-position:fixed;
    position:fixed;
    width:500px; /* width of image */
    height:auto;
    top:0;
    left:50%;
    margin-left:-250px; /* -1/2 width */
}

Upvotes: 0

Related Questions