Monday, 27 May 2013

How to - Create a Background Using Multiple Background Images



Currently the Multiple Background property is only visible in modern browsers i.e.

IE (Internet Explorer) V9.0 onwards
Firefox V3.6 onwards
Chrome V4.0 All versions
Safari All versions
Opera 10.5 onwards

The current updates of all browsers (including android) support the use of multiple backgrounds. Those of you hanging on to older versions... UPDATE THEM!


How to tell if your browser supports Multiple Backgrounds?

Well... the simplest way is to look at my blog, if you see the following pattern vertically at both the left and right edges of the page, BINGO!



Now... the fun begins!

The following is the code to use if you want to take advantage of the Multiple Backgrounds effect.

body {
          background: url('bottom image url') top repeat; /* for older browsers, this will give your bottom image ONLY */

          background: url('top-image url') top left repeat-y, 
                                    url('middle image url') top right repeat-y,
                                    url('bottom image url') top repeat;
          background-attachment: scroll;

          margin:0;
}

The "bottom image url" part of the code is your full repeating background. It appears twice in the code, so be sure to use the same image URL in both areas. The best thing to use is a seamless pattern... something like this:


Google "Free Seamless Background" and you will discover gazillions!

It is also possible to use a color instead of an image. In this instance you would replace this full line of code:

 url('bottom image url') top repeat; 

with:

#000000;

#000000 is the hex code for black. For a fairly comprehensive list of Hex Colour Codes, please visit my post HERE.

The sections of code which read top image url and middle image url are your repeating edges. I would use either the same image or the same image flipped.

You can either use a long transparent image (like mine) so you can see the bottom background through it, or a small repeatable image like this:


The result of using the two images above would look something like this:



All you need to do is upload your images to your favourite photo/image sharing site, and obtain the image URL's. The URL's are then pasted into the code above.

You can also make your background scroll up as you move down your blog's page (as in the code above denoted by the green "scroll"), or you can have it remain static by changing this word to fixed.


Embedding the code to make it active!

The code itself, is just a little bit of CSS, so all you need to do is go to:

Template →
Customise →
Advanced →
Add CSS →
Paste your completed code into the content box and whala!

Take a look and if it displays how you want it to, click the Apply to Blog button.

I think that covers everything, but as always, if you have any questions, please let me know.

2 comments :

  1. Well, apparently I have that multiple background viewer thing since I can see your edge designs. Yay! But for some reason it takes my browser a really long time to load your page. (I use Firefox.) Or maybe it's just the slow servers over here in Egypt...
    Thanks for the coding info and for stopping by my blog! :-)

    ReplyDelete
  2. That is a truly awesome design! Thanks so much for the info!

    ReplyDelete

Facebook Twitter Google + RSS Feed Email Me