Reputation: 15872
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');
Upvotes: 1
Views: 9414
Reputation: 10388
Take a look at some Parallax effect tutorials. They set up what it looks like you're ultimately aiming for.
Upvotes: 0
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