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;
}
Im still making a reponsive menu, with scroll controls. I added a gradient on my menu, but I want to, that gradient goes in front of my links and hide them behind it. There's is JSFiddle, you can test it.
There you can see my gradient CSS on my menu
#page .page-nav {
background: white -webkit-linear-gradient(left, transparent 50px, red);
background-size: 40% 100%;
background-repeat: no-repeat;
background-position: right;
}
Any solutions, how to do that?
As far as I know,
You can do it with vendor prefixes and it's not supported in IE (even IE 11)
Unless someone here knows a better way to implement it, I would advise against this.
body {
background: #111;
width: 50%;
margin: 0 auto;
font-size: 50px
}
.page-nav {
background: linear-gradient(to right, #900, #999);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
<body>
<p class="page-nav">Sample Sample</p>
</body>
I have a background-image for my body element.
I have put input buttons, and I would like them to have the same background as my body element in a prolongation (not setting the background again).
Is there a way to do that with CSS3 ?
Code:
body{
background-image: url("images/fond.jpg");
background-size: 100% auto;
}
.input-button{
/* Code here */
}
you can set background:transparent
body {
background: url("//lorempixel.com/1600/900") no-repeat 0 0 / 100% auto;
}
.input-button {
background: transparent;
outline: 0;
border: 0
}
<input class="input-button" type="text" placeholder="I'm a input" />
Your code should be like this
body{
background-image: url("images/fond.jpg");
background-size: 100% auto;
}
.input-button{
background-color: transparent;
}
I have an element with a background image. On the top and bottom of the element, I want a translucent bar with the image showing underneath. Here is an image of the problem:
Here is my markup:
<div class="section-header art">
<h1>Art</h1>
</div>
Here is my styling (SASS, old syntax)
.section-header.art
background-image: url(../../img/interpretations__art.bmp)
background-size: cover
background-repeat: none
padding: 5em 0
box-sizing: border-box
border-top: 5em solid rgba(255,255,255,0.2)
border-bottom: 5em solid rgba(255,255,255,0.2)
h1
font-size: 4em
font-family: $type__head
font-weight: bold
text-transform: uppercase
letter-spacing: .4em
text-align: center
color: rgba(255,255,255,0.5)
Just in case you didn't quite notice the issue, the image is repeating in the upper-border, which is not the desired effect.
Thanks in advance for any help you can provide!
background-repeat: none it isn't a valid value for background-repeat you should change it to background-repeat: no-repeat.
UPDATE: You could resolve this issue by adding a background-position: 0 -5em; see an example here: http://sassmeister.com/gist/37d7b2d8a71aa8c879a0
nav li a.home { background:url('../img/custom_icons/home.png') no-repeat center; background-size: 30px 30px; background-position: 0px -1px;}
nav li a.contact { background:url('../img/custom_icons/email.png') no-repeat center; background-size: 32px 35px; background-position: 0px -1px; }
nav li a.show_all { background:url('../img/custom_icons/slide.png') no-repeat center; background-size: 35px 50px; background-position: -5px -10px; }
#facebook {
background: url(../img/custom_icons/facebook.png) no-repeat;
background-size:30px 30px;
}
#sina {
background: url(../img/custom_icons/sina.png) no-repeat;
background-size:30px 30px;
}
I found that those background image in chrome / fx or other browser is perfectlly positioned, but not in IE 8 , it is either too small/ big or just move to other place.How to fix the problem and work just the same as other browser ? thanks
Updated : After adding ms filter, still not working?
nav li a.home { background:url('../img/custom_icons/home.png') no-repeat center; background-size: 30px 30px; background-position: 0px -1px;}
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../img/custom_icons/home.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../img/custom_icons/home.png',
sizingMethod='scale')";
Here is the css file after adding the suggested filter. However, it still not working? Is it correct to place the code like this? it seems quite weird since there is an ; at the end and a " after ='scale') . Thanks
"background-size" is not working on IE8.
http://caniuse.com/#feat=background-img-opts
This answer here https://stackoverflow.com/a/6353808/358906 is probably better than my original answer below.
In IE8, make sure the browser mode is set to IE8 Standards, if it's not, change it and see if it solves your problem. If it solves the problem then you will need to enfore IE8 to always use the I8 Standards mode either by using meta tags or server headers.