This question already has answers here:
Can I set background image and opacity in the same property?
(15 answers)
How to set opacity in parent div and not affect in child div? [duplicate]
(7 answers)
Overlay a background-image with an rgba background-color
(5 answers)
Closed 7 years ago.
I'm trying to give my full page background-image an opacity but when I add the opacity code, my whole html get's an opacity of 0.4 exept the image.
html {
background: url(../img/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Source
I tried to add opacity like this:
html {
background: url(../img/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.4;
}
But as I said, my whole html turns 0.4
And I tried to add 0.4 after background: url(../img/bg2.jpg) no-repeat center center fixed 0.4; but my image just goes blank then.
How can I add 0.4 only to my background-image?
Try using ::after pseudoclass:
html::after {
content: "";
background: url(../img/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
I use the :after psuedo element on the body tag in these cases, together with some absolute positioning and the opacity property: https://jsfiddle.net/kc0sf39r/
HTML:
<body>
content
</body>
CSS:
body {
background: url("http://digital-photography-school.com/wp-content/uploads/flickr/205125227_3f160763a0_o.jpg") no-repeat;
width: 100%;
height: 100vh;
position: relative;
}
body:before {
position: absolute;
top: -99px;
bottom: -99px;
left: -99px;
right: -99px;
background-color: red;
content: " ";
opacity: 0.5;
}
Set opacity for body also and try again :
body {
opacity : 1;
}
Related
This question already has answers here:
How to add a color overlay to a background image? [duplicate]
(4 answers)
Closed 1 year ago.
I have set an overlaying color on background image and then the text color has been changed. I set text color to white but the color changed after overlaying.
Code:
body {
background: url(./survey-form-background.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
text-align: center;
color: white;
font-family: 'Poppins', sans-serif;
}
.container::after {
content: '';
position: fixed;
top: 0;
left: 0;
background-color: rgba(68, 28, 179, 0.753);
z-index: 2;
width: 100%;
height: 100%;
}
<div class="container">
<h1 class="heading">freeCodeCamp Survey Form</h1>
<h3 class="sub-heading"><em>Thank you for taking the time to help us improve the platform</em></h3>
</div>
Image:
I want "White" as the text color of the whole page. How can I do that.
Please help me.
Thank you.
I got the solution.
Replace the
.container::after {
content: '';
position: fixed;
top: 0;
left: 0;
background-color: rgba(68, 28, 179, 0.753);
z-index: 2;
width: 100%;
height: 100%;
}
with the below code:
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
background-color: rgba(68, 28, 179, 0.753);
z-index: -1;
width: 100%;
height: 100%;
}
The best way to solve this, is not to use a pseudo-element in the first place. You can use linear gradient befor the background image to color it directly like in the sample below:
body { background: linear-gradient(rgba(68, 28, 179, 0.753), rgba(68, 28, 179, 0.753)), url(./survey-form-background.jpeg) no-repeat center center fixed; }
body {
background: linear-gradient(rgba(68, 28, 179, 0.753), rgba(68, 28, 179, 0.753)), url(https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
text-align: center;
color: white;
font-family: 'Poppins', sans-serif;
}
<div class="container">
<h1 class="heading">freeCodeCamp Survey Form</h1>
<h3 class="sub-heading"><em>Thank you for taking the time to help us improve the platform</em></h3>
</div>
In the following example only background-color displays but the image is not visible. The opacity also seems to be not working.
.my-container {
position: relative;
background-color: blue;
min-height: 100px;
}
.my-container:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg");
background-position: 100% center;
background-repeat: no-repeat;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
<div class="my-container">
<p>Contents</p>
<div>
Your code actually works and image is visible, but you set opacity: 0.1 and background: blue so it's barely visible. Just increase the opacity and maybe change background-color to more user friendly.
I cleaned up your code and placed content on top of image. In your example content has on image overlay which makes text harder to see.
.my-container {
position: relative;
background: blue;
height: 200px;
font-size:2rem;
color:#fff;
}
.my-container:before {
content: '';
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
opacity: 0.6;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg");
background-position:center;
background-repeat: no-repeat;
background-size: cover;
}
#content{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
}
<div class="my-container">
<div id="content">CONTENT</div>
<div>
It seemed to work just fine for me. I can see the picture when I set opacity: 0.5; And the blue background is still there. So I would suggest just raise your opacity
higher than 0.1. And see what looks best for you.
Please use the css filter: brightness(80%); instead of opacity.
filter: brightness(50%);
I have an image for my background that has an opacity on .4. I have an image in front of it that seems have the same opacity. What do I do so the opacity of the front image is 1.0?
Here is a jsfiddle.
http://jsfiddle.net/aaronmk2/6zjtgxdm/150/
Here is my html
<div>Hello World
<img src="http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg" alt="">
</div>
and my css
div{
width : auto;
height : 1000px;
background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
background-position: 65% 65%;
background-repeat: no-repeat;
background-size: cover;
opacity: .4;
}
you can give div position relative and use before with same image and give before same opacity.
you can check below given code within jsfiddle.
/* Here is the code Start */
div{
width : auto;
height : 1000px;
position:relative;
}
div:before{
content:" ";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
background-position: 65% 65%;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.4;
}
/* Here is the code Start */
I found a solution. You need to put your background image in the div::after pseudo element, like this :
div{
width : auto;
height : 1000px;
}
div::after {
content: "";
background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-position: 65% 65%;
background-repeat: no-repeat;
background-size: cover;
}
Like this, the div element doesn't have the transparent opacity, which was previously applied to its child element, the image.
I updated your fiddle
I have tried changing the image opacity in css. But that is affecting all the children inside it. I have looked upon many stackoverflow questions and answers, but still it's not working for me. Hence, decided to ask a question myself.
My sample code :
<div id="home" class="home">
<h2 style="margin-top:130px; text-shadow: #fff 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2><br />
</div>
CSS :
#home {
background: url(../images/home1.png) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*opacity: 0.5;*/
}
At first, I tried changing the opacity of the div home, but since it was eating up the text as well, so I decided to change the image opacity manually using GIMP.
I changed it. Even then the text doesn't look to be having the actual color. So I tried making it glow by doing some text-shadow and stuff. Still I don't seem to get the actual text color.
Original Image
This is the actual picture without changing the opacity.
Image with changed opacity in GIMP
This is the image after changing it's opacity in GIMP.
I want the image to have this kind of opacity but the text color of the first image.
Hope I am clear. I uploaded those images here, but since I don't have reputation enough so had to share the links after uploading in another website.
you can use pseudo element for adding background and add opacity to it
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#home {
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#home:after {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url(http://placeimg.com/640/480/any) no-repeat center center fixed;
background-size:100% auto;
opacity: 0.5;
}
<div id="home" class="home">
<h2 style="margin-top:130px; text-shadow: #222 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2>
<br />
</div>
The only way I know of (so far) is to use rgba() as your background-color; this doesn't affect its children (divs or elements).
Example:
rgba(0,0,0,0.5)
Use a div inside a div to serve the background, and make that div only have opacity:
Use background-size:cover; to let the image cover fully. It will abide to the sie of the div.background. So you need to set the div.background to width and height 100%.
http://jsfiddle.net/Preben/0mgrt069/13/
<div id="home" class="home">
<div class="background"></div>
<h2>Find the suitable tutor you are looking for..</h2>
</div>
And CSS:
h2 {
margin-top:130px;
text-shadow: #fff 0 0 10px;
color:black;
font-weight:bold;
font-family: 'Gloria Hallelujah', cursive;
}
.background{
background:url(http://lorempixel.com/400/300/nature/);
background-size:cover;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .4;
width: 100%;
height: 100%;
}
I solved it somehow. What I did is I added another div overlay_home
and changed it's rgba in css. That makes the image only change it's opacity without the text.
<div id="home" class="home">
<div id="overlay_home"></div>
<h2 style="margin-top:130px; text-shadow: #fff 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2><br />
</div>
#home {
background: url(../images/home1.png) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*opacity: 0.5;*/
}
#overlay_home{
height:100%;
width: 100%;
position: absolute;
background-color: rgba(0,0,0,0.5)
}
Working in Dreamweaver, I'm trying to get a background image that is the same on every page. I want it to be set and fill the whole page, have content scroll not the picture, and I need the picture to be a bit transparent, so the text will be easier to read. I have NO idea how to do opacity other than that this is what I have in my Style.css class.
body {
overflow-x: hidden;
width: 100%;
background-image:
url(/CuzbZDV%5B1%5D.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}
Try with that:
body:before {
position: fixed;
z-index: -1;
content: " ";
top: 0; left: 0; right: 0; bottom: 0;
background: url() no-repeat center center fixed;
background-size: cover;
opacity: .5;
filter: alpha(opacity=50); /* IE8, I believe... */
}