CODEWITHSUNDEEP
javascripthtmlcss
Jack
Jack

Reputation: 15872

CSS moving background image

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

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:

Tile 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');

Upvotes: 1

Views: 9414

Answers (2)

Chris
Chris

Reputation: 10388

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

Awesome CSS Effect

Upvotes: 0

Arnaud Le Blanc
Arnaud Le Blanc

Reputation: 99929

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

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

Upvotes: 4

Related Questions