Your Customers are Mobile, you will be too …

In this tutorial I will showing you how to have an image in the background of a page in both corners so that when you re-size your browser window the images will scroll with it maintaining their correct position, without being squashed as they would do if you used one large image stretched to fit the page width of 100%.

First step for this is editing the image we want in the opposite corner. CSS does have limitations and one of them is there is no way to flip a background image (content images are possible but not background images). So we need to open Photoshop, Fireworks, Gimp or any other image editing software you prefer to use and flip the image we are using over so that it is a mirror image of the one we have ready for use. Then save it under a different name. Also a good thing to do at this point is to ensure you have opacity set to say 60 to 80% on these 2 images. This help them to blend in with the rest of the background and creates a more professional finish to the finished product.

Now we get to the CSS component. For those not familiar with using multiple background images in a background should quickly go familiarise themselves with it here. We are going to add a third image to background-image property. Now because we want it visible above the gradient background we will add the image to the front not the back of the background-image property.

body {
   background-attachment: fixed;
   background-image: url(images/page_gl_right.png), url(images/page_gl.png), -moz-linear-gradient(#333, #999);
   background-repeat: no-repeat, no-repeat, no-repeat;
}

I have fixed my background so it doesn’t move as we scroll you can set that as you like. The important bit is we have the gradient of our background last in our background-image property. We want it there so it appears under the other 2 images. all the background images also need to be set to no repeat (remember background gradient don’t work unless set to no-repeat.

Now if we left it like that both of our corner images would sitting on top of each other in the top left hand corner. So we want to move our images around and make sure they go where we want them. So lets add to our CSS:

body {
background-attachment: fixed;
background-image: url(images/page_gl_right.png), url(images/page_gl.png), -moz-linear-gradient(#333, #999);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: top right, top left, top left;
}

Remember we need to list everything in the same order as our images are listed in the background-image property. Because I listed the image I want in the top right first my first background position argument is top right. And so on and so forth. Make sure you list a position property for every image used that way you know you won’t have any surprises.

And we are finished. This is what the finished item looked like for me.3multiplebgimages

Doesn’t matter how I resize my browser the 2 images always maintain those positions. The images do not squash up at all although they do do a little bit of a cross over when really shrunk down but that would hidden by your content.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: