I have a background image for whole page and another for content div. What I want is the background image of content div should be semi transparent so that some of the background image(for the whole page) below it should also be visible.
I also tried reducing the opacity of my .png background file using image editor but it didn't show my the background below , instead the image just got lightened.
Use a pseudo-element
body {
background-image: url(http://lorempixel.com/image_output/nature-q-c-1600-1600-10.jpg);
background-repeat: no-repeat;
background-size: cover;
}
div {
width: 600px;
height: 500px;
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://lorempixel.com/image_output/city-q-c-600-500-7.jpg);
opacity: 0.5;
z-index: -1;
}
<div>
<h1>Heading Text</h1>
</div>
To make a div transparent you can use:
.thediv{
background-color: transparent
}
Edit: Semi transparent with:
.thediv{
background:rgba(255,255,255,0.4);
}
HTML
<body>
<div></div>
</body>
CSS
body {
background-image: url(https://static.pexels.com/photos/24419/pexels-photo-24419-large.jpg);
background-repeat: no-repeat;
}
div {
width: 600px;
height: 500px;
background-image: url(https://static.pexels.com/photos/940/sky-sunset-sand-night-large.jpg);
opacity: 0.5;
}
JSfiddle: https://jsfiddle.net/0jw6c79L/
Related
This question already has answers here:
Can I set an opacity only to the background image of a div?
(8 answers)
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 1 year ago.
I have a background for the entire body of my page. Inside the body, I have a form that has another background image specifically for it. I want the background of that form to be slightly transparent so I could see the <body> background image.
What my code does:
makes the background and the content within the form both transparent
What I want to happen:
only make the background image slightly transparent and the text for content within it to remain at 100% opacity.
<style>
#mainbody{
background-image: url("/images/forest3.jpg");
background-repeat: no-repeat;
background-size: auto;
background-size: 100% 100%;
min-height: 700px;
opacity: .5;
}
#mainbodyContent{
opacity: 1;
}
body{
background-repeat: no-repeat;
background-size: cover;
background-image: url("/images/trianglify/trianglifyBlue.png");
}
</style>
<body>
<div id="mainbody">
<div id="mainbodyContent">
...some content
</div>
</div>
</body>
aditional info:
bootstrap 4.6
In such cases, use a pseudo-element by stretching it to the size of the block and setting the necessary styles.
body {
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.stack.imgur.com/GEVAe.png");
}
#mainbody {
position: relative;
min-height: 700px;
color: yellow;
}
#mainbody::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
background-image: url("https://i.stack.imgur.com/57ffF.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.5;
}
#mainbodyContent {
color: white;
}
<body>
<div id="mainbody">
... some content in "#mainbody"
<div id="mainbodyContent">
... some content in "#mainbodyContent"
</div>
</div>
</body>
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 want the div to appear like it is blurring the background image of the page. Should work when div position is changed. Consider window resizing.
I was able to come up with a neat solution that requires no js. The technique was to use the same backgroud with specific common settings
JSFIDDLE
HTML:
<div class="mydiv">
<div class='bgblur'></div>
</div>
CSS:
body {
background: url('/etc/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
.bgblur {
background: url('/etc/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-filter: blur(26px);
-moz-filter: blur(26px);
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
.mydiv {
position: relative;
overflow: hidden;
// not necessary
border: 2px solid black;
height: 200px;
width: 200px;
}
Lets assume I have a div with a Gradient applied as a background-property.
I now want to overlay a black PNG (of smaller size) and set the PNG to have a background-blend-mode of overlay. Unfortunately I have no idea on how to achieve this.
I know I can have a working background-blend-mode when I render the Gradient into the CSS of the Div with the PNG image like:
background: url(../img/plus.png), linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
background-blend-mode: overlay;
This however results in the Gradient being as small as the actual PNG, which is not a desired effect, like this:
What I want to achieve is this with pure CSS (if possible):
Here a Codepen to illustrate what I'm trying to do: http://codepen.io/anon/pen/zxOXGP
Notice the Black Icon. I wanna overlay this.
Try using mix-blend-mode instead of background-blend-mode and switch to simple text for the plus-sign or a webfont for more custom figures.
Example Codepen of the below:
.placeholder {
position: relative;
width: 400px;
height: 300px;
background-image: -moz-linear-gradient(#ff0000, #0000ff);
background-image: -webkit-linear-gradient(#ff0000, #0000ff);
background-image: linear-gradient(#ff0000, #0000ff);
}
.center {
position: absolute;
top: 25%;
width: 100%;
font-size: 120px;
}
.center span {
display: block;
text-align: center;
color: red;
mix-blend-mode: screen;
}
<div class="placeholder">
<div class="center"><span>+</span>
</div>
</div>
The gradient sandwich
Ingredients
The :before forms the bottom z-layer with z-index: 1, it is full opacity
The .content div forms the filling, central z-layer, with z-index: 2. It needs position: relative to take its z-index.
The :after forms the top z-layer with z-index: 3 and completes our lunch item. It is half opacity.
This is the tasty result:
Full Example
I have removed all but the standard CSS3 gradient for simplicity. View in a supporting browser.
.gradient {
position: relative;
height: 200px;
padding: 20px;
}
.gradient:before,
.gradient:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
background-size: 100%;
background-image: linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
opacity: 0.5;
}
.gradient:before {
opacity: 1;
z-index: 1;
}
.gradient:after {
z-index: 3;
}
.overlayed_image {
position: relative;
width: 64px;
height: 64px;
display: block;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://cdn.flaticon.com/png/256/9029.png);
}
.content {
position: relative;
z-index: 2;
}
<div class="gradient">
<div class="content">
You can see me!
<div class="overlayed_image"></div>
</div>
</div>
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
}