I've got a tiled background image, which looks like a grid.

Question:

I was just wondering if it's possible to move the tiled image using CSS to give the effect that it's being panned across. However the image still needs to span the whole width and height of the screen.

Tiled image:

Current CSS:

#background
{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #7abcff; /* Old browsers */
    background-image: url('../images/background.jpg');
}

Where I adjusted the CSS gradient values when you press the up / down arrows, or use the pan tool in the top right corner.

Solution: using jQuery and CSS background-position:

$('#background').attr("style", "background-position: " + this._bgL + 'px ' + this._bgT + 'px'); 

I've got a tiled background image, which looks like a grid.

Question:

I was just wondering if it's possible to move the tiled image using CSS to give the effect that it's being panned across. However the image still needs to span the whole width and height of the screen.

Tiled image:

Current CSS:

#background
{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #7abcff; /* Old browsers */
    background-image: url('../images/background.jpg');
}

Where I adjusted the CSS gradient values when you press the up / down arrows, or use the pan tool in the top right corner.

Solution: using jQuery and CSS background-position:

$('#background').attr("style", "background-position: " + this._bgL + 'px ' + this._bgT + 'px'); 

• javascript
• html
• css

2 Answers 2

You can use background-position: <offset-x> <offset-y>^[docs] to move the background image.

Try it here: http://jsfiddle/4Cwj5/ (try changing the background-position property and click "Run")

Take a look at some Parallax effect tutorials. They set up what it looks like you're ultimately aiming for.

Awesome CSS Effect