Search code examples
cssbackground-image

one-side flexible background image

I'm wondering how can I make a background image fixed on one side, so when the user makes the window smaller, the background image shrinks only from one side, and the other side stays clear. I got this idea because I got a background image and i need the right side of it to be always on screen. Thanks.

Solution

  • You can use the background properties to do this, most notably background-attachment: fixed; and background-position: right top; This will cause the image to "stick" to the top right of the screen.

    Also, if in the future the image doesn't work, just replace it with any other placeholder image. This one was picked just to showcase the static nature of the spider's position.

    body {
background-image:url("http://creepyhalloweenimages.com/free_halloween_photos/backgrounds/spider_orange_copyspace.jpg");
background-attachment: fixed;
background-position: right top;
background-size: cover;
}