CODEWITHSUNDEEP
htmlcssbackground-imageinline
Manoz
Manoz

Reputation: 6597

adding multiple background images in css

I have a menu bar, and I am trying to attach two images to it This is what I did-

background:url('images/bgs/bg_container_top_left.png') no-repeat top left ,url('images/bgs/bg_container_top_center.png') no-repeat top right;

How can I assign different properties to different images attached here? Like if I want to give margin to first image

margin-left:-10px;

and to second image

 margin-left:-5px;

Upvotes: 1

Views: 123

Answers (3)

mcabrams
mcabrams

Reputation: 684

CSS3 allows for multiple background images to be used. The format used is what you have shown in your first part.

background: url('images/bgs/bg_container_top_left.png') left top no-repeat,
            url('images/bgs/bg_container_top_center.png') right top no-repeat;

Rather than using margin, which I have a suspicion may not work (you can test it yourself if you like), I would suggest using the background-position property (https://developer.mozilla.org/en/docs/CSS/background-position) to adjust the starting position for each background. If the actual margin for each element is different, you may want to think of creating separate elements for each background. You could try using this code:

margin-left: -10px, -5px;

This follows the same format (listing background property value 1 first, and value 2 second), but I'm not sure if this is supported.

Upvotes: 0

Sowmya
Sowmya

Reputation: 26989

Try this

div{background: url('http://blog.agilebits.com/wp-content/uploads/2012/05/time-machine-icon.png') -5px top no-repeat, url('http://aux3.iconpedia.net/uploads/69290979.png') -10px top no-repeat ; }

DEMO

Upvotes: 0

user1976613
user1976613

Reputation:

if you want to position the images than change theses propertites

example:

background:url('images/bgs/bg_container_top_left.png') no-repeat top -10px ,url('images/bgs/bg_container_top_center.png') no-repeat top -5px;

or use background-position: 0px 0px 0px 10px;.

Upvotes: 2

Related Questions