1

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');
Ian Stanway
  • 610
  • 8
  • 25
Jack
  • 15,614
  • 19
  • 67
  • 92

2 Answers2

4

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")

Arnaud Le Blanc
  • 98,321
  • 23
  • 206
  • 194
  • yes background-image along with javascript if you want a moving background. I am not clear about *tilted* image though. – TheTechGuy Sep 04 '11 at 13:27
0

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

Awesome CSS Effect

Community
  • 1
  • 1
Chris
  • 9,994
  • 3
  • 29
  • 31
  • I've done some parallax stuff before, this isn't the effect i'm trying to accomplish here. I'm simply panning the screen which will be a single layer. That parallax tutorial looks good though. – Jack Sep 04 '11 at 13:34
  • I know parallax isn't precisely what you're after, but think about it: the only difference between your effect (things pinned to a board) and parralax (multiple layers that move at different speeds) is that your board needs only one layer. Everything else (technique, approach to animation) would be the same. – Chris Sep 05 '11 at 03:00