I have a background image for the wrapper div of a page. I want the image to be 0.5 opaque. My problem is that all other items inside the div also become 0.5 opaque. How can this be avoided?
#detailswrapper
{
background-size:cover;
background-repeat: no-repeat;
opacity:0.5;
}
you can use something like this
JS Fiddle
div::after {
content:"";
background: url('http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg');
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Related
I have a css styling problem:
I created a header with text inside. The header has two pseudo elements: ::before and ::after.
Both elements lay on top of the header element. How do I get the h1 to stay in front of everything??
Here is my code example: (got code snippets removed?? i didnt found the button where to add)
header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 99;
background-image: url("Bild1.svg");
background-size: 100% 100%;
text-align: center;
padding: 1px 20px;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("Bild2.svg");
background-size: 100% 100%;
opacity: .5;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -10px;
background-image: url("Bild3.svg");
background-size: 100% 100%;
opacity: .5;
}
<header>
<h1>Title Text</h1>
</header>
Here is a image how it looks:
As you can see the Text is behind both elements.
I tried to fix it using z-index but nothing worked for me. U have and ideas?
apply z-index 99 on background
and apply z-index 999 on the text I hope it will work
I would suggest making the z-index of the h1 tag
h1{
z-index: 999;
color: white;
}
and making the background z-index to 99 or something below that.
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
}
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/
I have a small .png file that repeats to form a background image. I need to set the body height of my page to 100% in order to use min-height property on my content wrapper. However, trying to use the background-image in conjunction with height:100% results in the image getting cut off when the page is scrolled. See picture to elaborate what I mean:
Background on top
But when scrolling it is cut off
How do I get the background image to repeat over the whole page, even after the user scrolls down? Here is the css:
body {
background-color:#9AAEBF;
overflow-y:scroll;
height:100%;
}
html:after {
background-image: url('http://www.example.com/img/background.png');
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Thanks for your ideas.
EDIT:
This is the image i need repeated:
Here is a fiddle:
http://jsfiddle.net/Nick_B/x2h3g/
try this
html:after {
background-image: url('http://www.example.com/img/background.png');
background-repeat:repeat;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Now used to background-size
As like this
body {
background-color:#9AAEBF;
overflow-y:scroll;
height:100%;
}
html:after {
background-image: url('http://i.stack.imgur.com/iuzZU.png');
background-size:100%;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo Full page
Live Demo
you can achieve your desired result through give the backgroun-size:100% in your html:after
CSS
html:after {
background-image: url('http://i.stack.imgur.com/iuzZU.png');
background-size:100%;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}