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?
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>
If you want to show icons, perhaps you should use multiple <img/> HTML tags. That seems preferable to the background CSS property.
Related
So at the moment, I've got a div behind a link, I've set the div background to be a specific image, and I'd like the same image to appear when hovering over that div but a shadow appears around the inside of the box, I have both images with me, but I can't seem to find a way to keep the "Home" background image the same as the "Home:hover" background image but with the shadow box too, I'd like to do this without having to individually place the shadow onto the background image in photoshop.. any thoughts?
Here's the CSS:
#Home {
z-index: 4;
position: absolute;
top: 0px;
left: 707px;
width: 95px;
height: 64px;
margin: 0;
background: url(../images/button%20texture%20b.jpg) center;
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
}
#Home:hover {
width:95px;
background: url(../images/button%20overlay%20b.png) ;
background-size: cover;
}
.
#Home:hover {
width: 95px;
background: url(../images/button%20overlay%20b.png) center, url(../images/button%20texture%20b.jpg) ;
background-size: cover;
}
Thanks!
I would recommend using this code:
#Home:hover { background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left; }
As you can read here, you can actually assign multiple background images to an element. The first image stated will be on top, the second below the first image and so on.
I have a sprites like this:
and display using the following css:
.sprite { background: url('sprite.png') no-repeat top left; width: 40px; height: 40px; }
.sprite.Live { background-position: 0px 0px; }
.sprite.Private { background-position: -50px 0px; }
.sprite.Public { background-position: -100px 0px; }
But there is always a border around the image. I make sure the img {border:0} is set. I am using Bootstrap 3. Is this caused by bootstrap?
It turns out its Chrome's issue. Here is the closest answer I can find.
It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.
https://stackoverflow.com/a/9173082/772481
I have tag with 25px padding and 15px border from left. And I am using arrow background image in it. Is it possible to show this background image above the border?
Here is HTML
<a id="arrow">List</a>
CSS
a#arrow {
background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
}
Here is jsfiddle link
You can put your background to the :after element as a method
CSS
#arrow:after {
content:'';/*enable after element*/
position: absolute;
top: px;/*position of the background*/
left: px;/*position of the background*/
background: url(img/your-bg.png) no-repeat;
width: px;/*width of the background*/
height: px;/*height of the background*/
}
And dont forget to add position:relative to the #arrow
You can use background position to view your image.
here is fiddle
Your css should be
a#arrow{ background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
background-position: -36px;
}
Use background-position property with values in pixels to show them on top.
For instance,
background-position: xxpx (for left-right) xxpx (for top-bottom);
PS: xx is a dummy value, which you can replace with actual numbers.
I'm trying to display an icon as a background image behind a number.
<a id="youhavemail" href="messages.php">0</a>
#youhavemail {
background-image: url("images/mail.png");
background-repeat: no-repeat;
background-size: 20px auto;
}
But since there is only one character in the anchor tag (in this case a '0') it only shows a small portion of the image.
Is there a way to stretch the containing anchor to show the whole background image?
#youhavemail {
background-image: url("http://linenwoods.com/images/offline.png");
background-repeat: no-repeat;
background-size: 20px auto;
display: inline-block;
width:20px;
height: 20px;
}
Is there any way to apply multiple background images using sprites?
something like the below code?
background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif");
background-position: right -92px, 0px 0px ;
background-repeat: no-repeat;
font-size: 1em;
margin-right: 5px;
padding-right: 35px;
width:500px;
height:500px
You can have multiple background images
see the EXAMPLE
Here is my css:
.sprite_box
{
background:
url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat,
url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,
transparent;
height: 24px;
width: 81px;
margin:5px;
}
Read about sprite here
Here you can create sprite image
Here you create css for your sprite image
Yes, you can have multiple background images, but it is limited to box items. There is some info on this at CSS3.info
Yes, you can. The shorthand method is less verbose:
.sprite {
background:
url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat,
url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat,
#ccc;
width: 160px;
}
Note that you can only state one background color, and you state it at the end of the declaration.
See it in aciton http://jsfiddle.net/TMHPh/