I use multiple background images. Under certain rules, I want one of them not to show.
Of course, I don’t want to repeat the superordinate rule (i.e. the image URLs). I want to set one of them to none, while letting the others as-is (i.e. inherited from the less specific rule).
Unfortunately, something like background-image: none, initial|auto|unset|inherit; doesn’t work, because those keywords all have other uses or targets.
Is there a way to target a specific CSV item?
Is there a suitable keyword?
Or is there no way around repetition, now and in future CSS?
div{ background-image: url(https://placekitten.com/200/300), url(https://placekitten.com/200/300); }
div:hover{ background-image: none, /*DRY→*/ url(https://placekitten.com/200/300) /*←DRY*/; }
<div style="width:400px;height:300px;background-position:left -2em,right 2em;background-repeat:no-repeat;"></div>
CSS variables can help here
div {
--img:url(https://placekitten.com/200/300);
background-image:
var(--img),
var(--img);
}
div:hover {
background-image:
none,
var(--img);
}
<div style="width:400px;height:300px;background-position:left -2em,right 2em;background-repeat:no-repeat;"></div>
Or inheritance with a pseudo element:
.box {
width: 400px;
height: 300px;
background-position: right 2em;
background-repeat: no-repeat;
background-image: url(https://placekitten.com/200/300);
position: relative;
z-index: 0;
}
.box::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom:0;
background:inherit;
background-position: left -2em;
}
.box:hover::before {
content:none;
}
<div class="box"></div>
Related
As per my knowledge there is no css property to make background image transparent,
I'm trying again and again but still I'm far from solution,
Here is my approach:
body {
background-image: url("PPI01.jpg");
background-attachment: fixed;
background-position: bottom;
filter: opacity(opacity: 30%);
z-index: -1;
background-repeat: no-repeat;
}
I looked for other so questions and found something like, but problem remains.
Put your background to body::after
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
width: 1200px;
height: 1200px;
display: block;
position: relative;
margin: 0 auto;
z-index: 0;
}
body::after {
background: url(http://kingofwallpapers.com/background-image-laptop/background-image-laptop-018.jpg);
content: "";
opacity: 0.9;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
}
div {
font-size: 36px;
color: white;
}
</style>
</head>
<body>
<div>
The text will not affected by the body
</div>
</body>
</html>
Alternative approach is to use an absolute position image as the background and set the image with the following property,
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Using image source URL inside stylesheet make it hard to change the source dynamically.
Usually, the background image is pre-processed, you also might consider making it a transparent PNG file first before upload it into your static server, so you can make the image transparent using image process application like PS, Sketch.
I sharing you my answer, because I think it's a bit better than the accepted solution, mainly because with my solution you can set image URL in HTML, as I need. You can also easyly make different CSS class for different opacity levels :)
CSS:
body.light-bg {
background-position-x: 50% !important;
background-position-y: 50% !important;
background-size: cover !important;
}
body.light-bg::before {
background: white;
content: "";
height: 100%;
opacity: 0.35;
position: absolute;
width: 100%;
z-index: -1;
}
HTML:
<body style="background: url(image.png)" class="light-bg"></body>
You can use rgba background property with white color and opacity.
background; rgba(255, 255, 255, 0.3) url(IMAGE_PATH); /* Add other attributes as required */
You should use opacity property to set the value. The allowed values are from 0 to 1.
body {
background-image: url("PPI01.jpg");
background-attachment: fixed;
background-position: bottom;
opacity: 0.3;
z-index: -1;
background-repeat: no-repeat;
}
Check the complete documentation on W3C.
I have a div with a background color and a background image. The div calls this class:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png);
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
I am trying to make only the image somewhat transparent. I tried this:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png);
opacity: 0.6;
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
But that makes the entire div transparent.
So I tried this:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png) opacity(0.6);
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
But that makes the image disappear entirely. Can this be done?
What you're trying to do on that single element isn't possible, but there's plenty of ways that could do the same thing with very little extra effort. Probably the best way would be to either add an additional child element to the .cakebg element with the same dimensions that only has the background image, with opacity. Such as:
.cakebg .child-element {
height: 100%;
width: 100%;
background-image: url(img/cake.png);
opacity: 0.6;
}
If you're trying to keep your markup clean, you can even add this as a pseudoelement. Such as the following:
.cakebg:after {
content: "";
height: 100%;
width: 100%;
background-image: url(img/cake.png);
opacity: 0.6;
}
If neither of those methods work, a last resort could be editing the image to have that opacity baked in from your favorite editing software. Hopefully some of these methods might help!
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
.cakebg {
background-color: #F8BBD0;
background-size: 25%;
position: relative;
}
.cakebg::after {
content: "";
background: url(img/cake.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
OR you can simply use an trasparent png image as background
There is no CSS property to make just the background transparent, but you can fake it by inserting a pseudo element with the same size of element behind it and change the opacity of this.
.cakebg {
background-color: #F8BBD0;
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
.cakebg::after {
content: "";
background-image: url(img/cake.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Please note that that question was already asked quite often, read here for example.
i'm trying to use opacity on a background-image but if i use it it will effect the text aswell.
.content_wrapper{
width:320px;
height:374px;
color:black;
background-image: url('../images/beuningse-boys-midden.png');
background-size:130px;
background-repeat: no-repeat;
background-position-x: 95px;
background-position-y: 155px;
}
You cannot change the opacity of a background-image with CSS. However, there are ways of achieving the same result.
Method 1
This method uses the :after pseudo class which is absolutely positioned inside its parent. The background image is set on this pseudo element along with the opacity giving the impression that the background opacity is set on the background itself.
HTML
<div>
Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>
CSS
div {
width:320px;
height:374px;
display: block;
position: relative;
border: solid 1px #f00;
}
div::after {
content: "";
background-image: url('http://placehold.it/800x600');
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Method 2
If you need backwards compatibility, you will need an extra element in your markup to achieve the same result:
HTML
<div class="container">
<div class="background"></div>
Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>
CSS
.container {
width:320px;
height:374px;
display: block;
position: relative;
border: solid 1px #f00;
}
.container .background {
content: "";
background-image: url('http://placehold.it/800x600');
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Here is a great article with a CSS3 method of achieving the same result:
http://css-tricks.com/snippets/css/transparent-background-images/
Give to the text a class or an id and give it a color without opacity.
p {
color: rgb(120,120,120); // use here what color you want
}
I'm trying to put a dot in each corner of a container. I'm thinking the trick to this is a combination of .my-container:before and setting the :before's border or background property. The effect I want is similar to SO#17306087, but I don't want to use images.
Edit
jsfiddle
I'll be using this quite a bit, so would prefer it to happen automatically with a css class (not require additional DOM elements).
Edit
Since svg is text-based and can be inserted directly into css, I'm looking into that method. I see here that this does work: example fiddle
my updated fiddle (currently has a css error that I'm trying to pin-point) fixed fiddle with 4 dots using background prop
The svg is valid and not throwing errors as DOM: fiddle
You can do it only on a div and with standard CSS.
The trick is to use the pseudo elements to display 2 circles using radial gradients.
.test1 {
width: 200px;
height: 200px;
background-color: lightblue;
position: absolute;
left: 220px;
}
.test1:before, .test1:after {
content: "";
position: absolute;
height: 100%;
width: 20px;
top: 0px;
background-image: radial-gradient(circle at center, red 5px, transparent 5px), radial-gradient(circle at center, red 5px, transparent 5px);
background-size: 20px 20px;
background-position: top center, bottom center;
background-repeat: no-repeat;
}
.test1:before {
left: 0px;
}
.test1:after {
right: 0px;
}
fiddle
You could also draw the circles in the elements itself, but then you can not apply it to elements having background.
The above code renders the circles pixelated. It's better leaving 1 pixel for the red/transparent transition
background-image: radial-gradient(circle at center, red 5px, transparent 6px), radial-gradient(circle at center, red 5px, transparent 6px);
updated fiddle
Assuming you're okay with something a little crazy, there is a CSS only solution that's completely based on a single class (on a single element). The only caveat is that that element MUST have at least one child element (which should probably be the case anyways, right?)
.my-container:before, .my-container:after, .my-container *:first-child:before, .my-container *:first-child:after {
content: '';
height: 5px;
width: 5px;
position: absolute;
background: #777;
border-radius: 50%;
}
.my-container:after {
right: 0;
top: 0;
}
.my-container *:first-child:before {
left: 0;
bottom: 0;
}
.my-container *:first-child:after {
bottom: 0;
right: 0;
}
You can use :before and :after to create your dots, though the challenge comes in the fact that this only creates two dots per element. Because of this, I've set it to look for the first element inside the container, and apply the same styles to that. (the wildcard selector * looks for any element, and :first-child makes sure it only gets applied to one child element)
See fiddle:
http://jsfiddle.net/5N9ep/2/
Now obviously this won't work in every situation, and you can always mess with the selector for that second element if you have something that will work better.
Other than that, if you want to make it a little more practical (but less cool), I would recommend just making two wrapper div elements, and giving each one of them a unique class, each creating two dots with a simple :before and :after.
http://jsfiddle.net/qQP84/
HTML :
<div class="maindiv">
<div class="lefttop dot"></div>
<div class="leftbottom dot"></div>
<div class="righttop dot"></div>
<div class="rightbottom dot"></div>
</div>
CSS
.maindiv {
height: 150px;
width: 150px;
background: blue;
position: relative;
}
.dot {
height: 12px;
width: 12px;
border-radius: 100%;
background: red;
position: absolute;
}
.lefttop {
top: 0;
left: 0;
}
.leftbottom {
bottom: 0;
left: 0;
}
.righttop {
right: 0;
top: 0;
}
.rightbottom {
right: 0;
bottom: 0;
}
EDIT:
jQuery solution to easily append the dots to different divs that have the same class
$('<div class="lefttop dot"></div><div class="righttop dot"></div><div class = "leftbottom dot"></div><div class="rightbottom"></div>.appendTo('.myDivsThatNeedDotsClass');
This will append(give) the 4 dots to each element that has the class .myDivsThatNeedDotsClass
With this approach you can remove the HTML from above, but keep the css like it is.
If you don't have the same class for all of them, than you can do this
.appendTo('.myDivsThatNeedDotsClass, .anotherClassThatNeedsDots, #anIDthatNeedsDots');
the following can be your mark-up
<div class="my-container">
<div class="tr"></div>
<div class="tl"></div>
<div class="br"></div>
<div class="bl"></div>
<p class="stuff">Some stuff</p>
</div>
the css as follows
body {
margin: 10px; /* for visibility */
}
.my-container {
background-color: #eee; /* for visibility */
position: relative;
width:98%;
border:1px dotted red;
}
.my-container .stuff {
text-align:center;
}
.tr,.tl,.br,.bl{
position:absolute;
border:5px solid red;
border-radius:10px;
}
.tr{
top:0;
right:0;
}
.tl{
top:0;
left:0;
}
.br{
bottom:0;
right:0;
}
.bl{
bottom:0;
left:0;
}
Not sure if there's an trick to do this but I am looking for a way to basically use CSS to repeat a background image(repeat-y) to a certain point at the bottom of the element like 80 px.
I really hope there an way to do this.
.rep-img {
background-position: center left;
background-repeat: repeat-y;
background-image: url('../images/image.png');
background-repeat-y-stop: 80px; /* made up property */
}
Put the background on a pseudo element:
.rep-img {
position: relative;
}
.rep-img:before {
content: '';
background: url('../images/image.png');
position: absolute;
top: 0; right: 0; left: 0;
bottom: 80px;
z-index: -1; /* to push it behind any content in .rep-img */
}
Here's the fiddle: http://jsfiddle.net/T7JBx/