The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] Background Image Scrolling

  • # October 18, 2009 at 7:00 pm

    Hi all, I’m have a really difficult time with a blog I’m setting up.

    I have a background image that I would like to see scroll under my content as the web browser’s scroll bar goes up and down. Here’s the link to the blog, once you’ve seen it I think you’ll get a picture of what I’m trying to do:

    So you can see the content over the picture, if you scroll down then there’s no background. What I want to see happen is the picture that appeared oh-so-nicely when you open the link to scroll down with the scroll bar – but try as I might I can’t get it to go. I realize CSS will give the background image the ability to scroll with the containing object, but since it sits inside the body, it’s not going anywhere.

    This is all I’ve got for the background image – no successes here obviously, I’ve tried other things I’ve found but I keep hitting the same roadblock.

    body {
    font: x-small “Trebuchet MS”, Trebuchet, Verdana, Sans-serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;

    I’m not very CSS fluent so if someone can generate the block of code I need to accomplish this, that’d be fantastic!

    # October 19, 2009 at 12:36 am

    Part of development is learning. Google "css position" the first link should be from w3schools. That should put you on your feet.

    # October 19, 2009 at 1:10 am

    Sorry, but this wasn’t helpful. I’ve already looked at over 20 websites, at least half of them 10x more detailed than the above mentioned site. I’ve already seen and tried everything provided on about position – I need much more serious help here.

    As I said, the problem is that it’s contained in the body class and its position is related to the body class when I need it related to the web browser.

    Edit: I think what I need is someone to tell me where to put the code, or perhaps how to put it in my code.

    # October 19, 2009 at 1:34 am

    Problem solved – compilation-type error.

    # October 19, 2009 at 2:43 am

    it seemed like you wanted to the background image to not scroll with the page. e.g.

    position: fixed;

    when you scroll the image would not move.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed