CODEWITHSUNDEEP
css
user1028741
user1028741

Reputation: 2815

Showing icon side by side using CSS

I'm new to CSS.

I have the following CSS definition which shows an icon in my webpage.

.systemIcon{
    margin-right:2px;
    background:url(../images/tree/system.png?_v=001) no-repeat 0px 0px;
}

I wanted to add another icon to its right (lets say system2.png). So I tried the following:

.systemIcon{
    margin-right:2px;
    background:url(../images/tree/system.png?_v=001), url(../images/tree/system2.png?_v=001) no-repeat 0px 0px;
}

But the result is that the icon show on ON TOP of the other.

Is there any way to show them side by side?

Upvotes: 0

Views: 214

Answers (2)

Justinas
Justinas

Reputation: 43481

Specify background-position and background-repeat for each image:

span {
  display: inline-block;
  background-image: url('http://icons.iconarchive.com/icons/graphicloads/colorful-long-shadow/256/Home-icon.png'), url('http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Sign-LogOff-icon.png');
  background-position: 0px 0px, 256px 0px;
  background-repeat: no-repeat, no-repeat;
  width: 512px;
  height: 256px;
}
<span></span>

Upvotes: 2

Rosh Donniet
Rosh Donniet

Reputation: 418

If you want to show icons, perhaps you should use multiple <img/> HTML tags. That seems preferable to the background CSS property.

Upvotes: 0

Related Questions