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

Share Improve this question Follow edited Jul 22, 2013 at 13:33 Ian Stanway 61088 silver badges2525 bronze badges asked Sep 4, 2011 at 13:23 JackJack 15.9k2020 gold badges7070 silver badges9393 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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