I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before.
So if the user sees for example 10 panels and 4 of them have this small sign, he knows that he has already clicked on those panels before. This work fine so far. The problem is now that I can't display the small sign and make the panel blue at the same time.
I set the panel to blue with the css background: #6DB3F2; and the background image with background-image: url('images/checked.png'). But it seems that the background color is above the image so you cannot see the sign.
Is it therefore possible to set z-indexes for the background color and the background image?
You need to use the full property name for each:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Or, you can use the background shorthand and specify it all in one line:
background: url('images/checked.png'), #6DB3F2;
For me this solution didn't work out:
background-color: #6DB3F2;
background-image: url('images/checked.png');
But instead it worked the other way:
<div class="block">
<span>
...
</span>
</div>
the css:
.block{
background-image: url('img.jpg') no-repeat;
position: relative;
}
.block::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
Based on MDN Web Docs you can set multiple background using shorthand background property or individual properties except for background-color. In your case, you can do a trick using linear-gradient like this:
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
The first item (image) in the parameter will be put on top. The second item (color background) will be put underneath the first. You can also set other properties individually. For example, to set the image size and position.
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
Benefit of this method is you can implement it for other cases easily, for example, you want to make the blue color overlaying the image with certain opacity.
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
Individual property parameters are set respectively. Because the image is put underneath the color overlay, its property parameters are also placed after color overlay parameters.
And if you want Generate a Black Shadow in the background, you can use
the following:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
You can also use short trick to use image and color both like this :-
body {
background:#000 url('images/checked.png');
}
really interesting problem, haven't seen it yet. this code works fine for me. tested it in chrome and IE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
The next syntax can be used as well.
background: <background-color>
url('../assets/icons/my-icon.svg')
<background-position-x background-position-y>
<background-repeat>;
It allows you combining background-color, background-image, background-position and background-repeat properties.
Example
background: #696969 url('../assets/icons/my-icon.svg') center center no-repeat;
This actually works for me:
background-color: #6DB3F2;
background-image: url('images/checked.png');
You can also drop a solid shadow and set the background image:
background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;
If the first option is not working for some reason and you don't want to use the box shadow you can always use a pseudo element for the image without any extra HTML:
.btn{
position: relative;
background-color: #6DB3F2;
}
.btn:before{
content: "";
display: block;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background-image: url('images/checked.png');
}
Here is how I styled my colored buttons with an icon in the background
I used "background-color" property for the color and "background" property for the image.
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span>
Assuming you want an icon on the right (or left) then this should work best:
.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}
You could also do background-size: contain;, but that should be mostly the same. the background-position will depened on your image.
Then you can easily do an alternative state on hover:
.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
You can try with box shadow: inset
.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
<li style="background-color: #ffffff;"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></li>
Other Sample Box Center Image and Background Color
1.First clearpixel fix image area
2.style center image area box
3.li background or div color style
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
I have a sprite of icons:
http://i.piccy.info/i9/3d2e4aea3daed4a0057c88c6e7c1b6a0/1566832397/25899/1334677/Screenshot_12.png
I need to insert the last icon in the menu, next to the text.
CSS with code looks like that:
.game-tab .left-header .game-icon.double,
.history-top .left-header .game-icon.double {
background-position: -48px -38px
}
.menu .navigation .game-selector-list .game-selector.active .game-info .game-icon.double {
background-position: -5px -137px
}
.menu .navigation .game-selector-list .game-selector .game-info .game-icon.double {
background-position: -5px -93px
}
As I understand it, to insert the last icon, I need to calculate the pixels and fit in the css? How can i do this? Or how to display this icon correctly?
I have found the first one for you
.first{
background-image: url("http://i.piccy.info/i9/3d2e4aea3daed4a0057c88c6e7c1b6a0/1566832397/25899/1334677/Screenshot_12.png");
background-repeat: no-repeat;
background-position: -85px -18px;
width: 36px;
height: 36px;
}
from this, subtract about 44 from -18 for each subsiquent image.
I have my css prefixed but my transitions only work in safari. I'm testing in the latest versions of Opera, Chrome and Firefox. The image does move on hover, the different colour icon appears, but no transition effect like I have in Safari.
Here is my scss:
li {
height: em(36);
width: em(28);
display: inline-block;
}
li:first-child {
background-image: url(social.svg);
background-position: 84px 0px;
/*transition-property*/
-webkit-transition-property:transition;
-moz-transition-property:transition;
-o-transition-property:transition;
transition-property:transition;
/*transition-duration*/
-webkit-transition-duration:350ms;
-moz-transition-duration:350ms;
-o-transition-duration:350ms;
transition-duration:350ms;
&:hover{
background-position: 84px -36px;
}
}
li:nth-child(2) {
background-image: url(social.svg);
background-position: 56px 0px;
/*transition-property*/
-webkit-transition-property:transition;
-moz-transition-property:transition;
-o-transition-property:transition;
transition-property:transition;
/*transition-duration*/
-webkit-transition-duration:350ms;
-moz-transition-duration:350ms;
-o-transition-duration:350ms;
transition-duration:350ms;
&:hover{
background-position: 56px -36px;
}
}
li:nth-child(3) {
background-image: url(social.svg);
background-position: 28px 0px;
/*transition-property*/
-webkit-transition-property:transition;
-moz-transition-property:transition;
-o-transition-property:transition;
transition-property:transition;
/*transition-duration*/
-webkit-transition-duration:350ms;
-moz-transition-duration:350ms;
-o-transition-duration:350ms;
transition-duration:350ms;
&:hover{
background-position: 28px -36px;
}
}
I really have no ideas why its not working. Any help would be great.
Thanks in advance,
Alex
The valid values for transition-property are:
transition-property: none|all|property;
Try using all instead of transition.
I have the following image in a sprite sheet and want to use it to style a button:
I have tried everything I can think of (even going as far as pseudo elements) but I can't get it to work. I had thought something like this should work:
.ui-button {
height:45px;
background-image: url(../button.png), url(../button.png), url(../media/button.png);
background-size: 8px 45px, 8px 45px, 3px 45px !important;
background-position: -63px -1px, -77px -1px, -73px -1px;
background-repeat: no-repeat, no-repeat, repeat;
}
but it doesn't. The background-size bits are the size of each chunk from the sprite sheet that I am using and the position is the top left coordinates of each part in the sprite sheet. Clearly I am doing something wrong. What?
Edit: here's the whole image:
Here is what I have tried with JSFiddle:
http://jsfiddle.net/Kpusc/
.ui-button {
height:45px;
width:18px;
background: url(http://i.stack.imgur.com/ipKrd.png);
background-position: -72px -1px;
background-repeat: no-repeat;
position:relative;
border:0;
}
.ui-button:before {
content:"";
display:block;
height:45px;
width:8px;
background: url(http://i.stack.imgur.com/ipKrd.png);
background-position: -64px -1px;
background-repeat: no-repeat;
position:absolute;left:0;top:0;
}
.ui-button:after {
content:"";
display:block;
height:45px;
width:8px;
background: url(http://i.stack.imgur.com/ipKrd.png);
background-position: -78px -1px;
background-repeat: no-repeat;
position:absolute;right:0;top:0;
}
Unfortunately I only could make it as wide as 34px. Since I can't make the center content to repeat itself.
I suppose you need to make the center part wider than at least 60px so that it could be applied as the .ui-button background-image (or perhaps make it as a separate file altogether, so it would be possible to repeat).
I'd like to know if there's another workaround though.
Thank you in advance for any help you can give. I am implementing sprites for the first time and am looking to streamline my code. Below is my css and html.
CSS
div[class^='Rating']
{
background:url('http://10.0.50.19/images/Ratings.png') no-repeat;
width:68px;
height:13px;
display:block;
}
.Rating0_5 { background-position: 0px 0px; }
.Rating1_0 { background-position: 0px -13px; }
.Rating1_5 { background-position: 0px -27px; }
.Rating2_0 { background-position: 0px -41px; }
.Rating2_5 { background-position: 0px -55px; }
.Rating3_0 { background-position: 0px -69px; }
.Rating3_5 { background-position: 0px -83px; }
.Rating4_0 { background-position: 0px -98px; }
.Rating4_5 { background-position: 0px -112px; }
.Rating5_0 { background-position: 0px -125px; }
HTML
<div class="Rating0_5"></div>
<div class="Rating1_0"></div>
....
The issue I am having is the background-position is always being set to 0px 0px as I believe the first style is overriding the background-position elements (according to Firebug). If I copy copy the background:url('http://10.0.50.19/images/Ratings.png') no-repeat; to each of the .RatingX_X styles it works fine but I don't want to repeat the background-image and repeat text if I don't have to. Hopefully this makes sense. Thanks again.
Define your first rule as:
div[class^='Rating']
{
background-image:url('http://10.0.50.19/images/Ratings.png');
background-repeat: no-repeat;
width:68px;
height:13px;
display:block;
}
and it should work.
On your background: you are not definin the position so it assumes it is on the default 0 0, and since your first selector is more specified as your background-position selectors it overrides.
The easiest and most cross-browser way would be to add a common class on your elements (<div class="Rating Rating0_5"></div>) and then simply change div[class^='Rating'] to .Rating.
Your other possible solution is to fix the selector specificity in your code.
Either use simply [class^='Rating'] or write your class selectors as div.Rating0_5.