Multiple backgrounds with CSS

Using images in the background is always a better option to make your website look attractive.  Now most of the web browsers are supporting multiple backgrounds. Now we can have multiple background images to a DIV or any box elements.  Suppose there is a div with id divId

#divId{
width: 500px;
height: 250px;
background-image: url(girl.png), url(boardskygrass.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}


In the above example

two images are used sheep.png and boardskygrass.png

A comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’.  The comma separated lists from the individual background images are then matched up, starting with the first value in each list.
     In the same way we can also use a comma separated list for the other background properties; like background-repeat, background-attachment, background-position, background-clip, background-origin and background-size.

If excess values are provided for any of the above properties they are ignored. e.g. if four values are supplied for the background-repeat property, but only three values are supplied for the background-image property, the fourth value in the list would not be used.
In the same way if not enough values are supplied for any of the individual properties, the list of values for that particular property are repeated, from the first value, as many times as required. For example; if only two values are supplied for the background-position property, but three values are supplied for the background-image property, the list of values for background-position would be repeated, thus the third background image specified would have the same background-position value as the first, as the first value is considered for all the background images.


Browser Compatibility

Browser support for multiple backgrounds is relatively widespread with all of the main browsers offering support, without the need for vendor prefixes.

Firefox has supported multiple backgrounds since version 3.6 (Gecko 1.9.2), Safari since version 1.3, Chrome since version 10, Opera since version 10.50 (Presto 2.5) and Internet Explorer since version 9.0.  So, there is no need to worry about the compatibility.  But you cant help if anybody is still using IE6*.

Share Your Solutions

How to create crayon effects drawing in photoshop?

Photoshop is always a better option for making graphics and effects. Here are the steps to get crayon effects in Photoshop

1.  Create a new blank document of the required size, e.g. 1000 px X 1000 px


2.  Select the Brush tool from the toolbar and in the tool options at the top of the screen, find the spatter brush, size 24 pixels in the drop down menu.
   If you want a thinner crayon you can pick a smaller diameter brush.

3.Open Brushes palette by choosing Window > Brushes.

 Brushes window will appear on your screen, click on “Brush Tip Shape” under Brush Presets thats is on the left hand side of the brushes window.
Make sure the value of spacing is 25% which is a slider at right bottom, you can see the preview area and confirm yourself.

4. Now click on “Shape Dynamics” option and set the Size Jitter to 20%, Angle Jitter to 100%, Roundness Jitter to  50% and Minimum Roundness to 25%.

5. Now click on “Color Dynamics” and set the Saturation Jitter to 50% and Brightness Jitter to 15%.

Now you have a crayon effect brush in your hands. It is as good as real crayon. You can vary the size of the brush by clicking on the Brush Tip Shape and changing the diameter there.

You can also save this brush by clicking on the Create New Brush Button at the bottom of the Brushes palette.

Following image is made by using the crayon brush effect,  you can use different colors and come up with much better kind of stuff than this.

Share Your Solutions