Is there a way using CSS to have a background image that is fixed when the screen is scrolled vertically but not horizontally? I have a branding logo in the upper left hand corner of the screen that I would like to stay visible when the user scrolls vertically. However, if the user narrows their browser window such that they have to scroll to the right horizontally, I would like the background image to scroll off to the left.

Below is the css that I am currently using, which fixes the background image for both vertical and horizontal scrolling. I have set the z-index and background color such that when text is scrolled horizontally at this point it goes behind the branding logo and cannot be seen.

div#branding h1 + blockquote {
    position: fixed;
    z-index: 10;
    top: 10px;
    left: 10px;
    width: 340px;
    height: 300px;
    background: white url(../images_pres/branding.png) no-repeat;
    text-indent: -9999px;
    margin: 0;
}

Note: If the user has CSS turned off for some reason, then they see a slogan for the business instead of the branding logo, hence the h1 + blockquote and text-indent: -9999px.

  • I don't think this is possible, and even if it was I doubt it would work as intended across all browsers. Mottie almost 7 years ago

2 answers

0
points

{ background-image: url(../images_pres/branding.png); background-repeat: repeat-x; background-attachment:fixed; }

Answered over 5 years ago by Olivier Toussaint
0
points

IE won't support it probably, but you might take a look over at This on hacks.mozilla.org
http://hacks.mozilla.org/2009/12/css-backgrounds-firefox-36/

Multiple backgrounds, if you use the position (and maybe split the images up into different parts) this might just work for you.

Answered almost 7 years ago by Michael Fitzpatrick