I have created a HTML page. There is a background image in my page. I want to change the opacitry of my background
i.e. opacity of image used in background. I am using this code to add a background image to my page:
<!DOCTYPE html>
<html>
<head>
<style>
body{background-image: url('IMG_18072014_115640.png')}
</style>
</head>
<h1>Hello world!</h1>
<body>The background image will be shown behind this text.</body>
</html>
How can I change this code to change the opacity of this background image.
Apply background-image to body's :after :pseudo-element and change its opacity, so that the body's content is not affected.
body, html {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
body:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://www.lorempixel.com/600/400);
opacity: 0.3;
z-index: -1;
}
<h1>Hello world!</h1>
<body>The background image will be shown behind this text.</body>
I think you misunderstand some things in html,
but one simple solution would be to make a transparent background image... (PNG24 transparency)
Try this way to change opacity of psudo element : DEMO
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(http://s.hswstatic.com/gif/evil-robots-3b.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Related
I need to add a very thin stripes pattern over an image in html. I can't really add it to the image itself for multiple reasons (images are uploaded in a CMS, must be used in other places without the stripes, and i also want the pattern to remain unscaled, whereas the images do scale...).
So i made a transparent PNG with the pattern, put it over the image with a pseudo element and use background-repeat to loop it over the entire image (see snippet).
The problem i have is that the image is blinking/flashing when i scroll the page down. Tested on Firefox & Chrome with the same result. I tried different other options like using a very big stripe image to avoid background-repeat, or using a non transparent image with mix-blend-mode:multiply, but the result is always the same.
I also tried a pure css solution with repeating linear background but the rendering is not very good because the pattern is too thin.
The only way i can have a clean rendering is by inlaying the pattern in the original image, no blinking then, but this is not really an option for the reasons mentionned above.
Any ideas ? Thanks :-)
#container {
position: relative;
}
#container:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://indelebil.fr/stripes.png) repeat;
}
img {
display: block;
max-width: 100%;
}
<div id="container">
<img src="https://indelebil.fr/sample.jpg" />
</div>
We can do this with linear-gradient
No need to use strips.png
body {
height: 300vh;
}
#container {
position: relative;
overflow: hidden;
}
#container:after {
content: '';
position: absolute;
top: -200vh;
left: 0;
right: 0;
bottom: 0;
width: 200vw;
height: 400vh;
background-size: 3px 44px;
background-repeat: repeat;
background-image: linear-gradient(to left, transparent -5px, #000000a3 8px, transparent 26px, transparent);
transform: rotate(-45deg) scale(1.5);
}
img {
display: block;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stack Overflow</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="container">
<img src="https://indelebil.fr/sample.jpg" />
</div>
</body>
</html>
I finally found a workaround, the flashing effect tends to disappear by lowering the pattern opacity, it is still present but it becomes kinda acceptable under 0.6% alpha.
By the way if anyone has a better way keeping 100% opacity i would be happy to hear about it !
#container {
position: relative;
}
#container:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://indelebil.fr/stripes.png) repeat;
opacity:.5;
}
img {
display: block;
max-width: 100%;
}
<div id="container">
<img src="https://indelebil.fr/sample.jpg" />
</div>
I use this loader spinner using css and jquery. I would like to blur the background exept the image from URL. Any idea ?
Css:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
background: url("http://enjoycss.com/bg-img/custom/107898-1py1ieu.1zm9.gif")
center no-repeat #33333308;
}
Js
<script>
$(window).load(function() {
$(".se-pre-con").fadeOut("slow");;
});
</script>
Thank you
When the gif is showing you can add a :before pseudo-element to the body. The blurry effect can be tricky to achieve, I'd recommend using a blurry PNG or a svg as background, in the snippet below I'm just using color:
body:before{
content:'';
background-color: #dbdbdb;
opacity: 0.7;
background-size: cover;
width: 100%;
padding-bottom: 100%;
position: fixed;
z-index: 1;
}
You can replace the body selector with a class and then with some jQuery remove or add the class to the body.
See this fiddle for reference: https://jsfiddle.net/3r1zc9gw/3/
Is there any way to make semi-transparent overlapping elements, from which only higher z-index will be visible? I would like the images to be transparent to the background, but not to the other pictures. Here is fiddle.
body {
background: white;
}
section {
height: 400px;
position: relative;
perspective: 500px;
}
img {
height: 300px;
left: 50%;
margin: -100px;
position: absolute;
top: 40%;
transform: rotateY(-30deg);
width: 200px;
}
img:nth-child(1) {
left: 30%;
opacity: 0.8;
z-index: 3;
}
img:nth-child(2) {
left: 45%;
opacity: 0.4;
z-index: 2;
}
img:nth-child(3) {
left: 60%;
opacity: 0.2;
z-index: 1;
}
<section>
<img src="https://media4.s-nbcnews.com/j/newscms/2016_36/1685951/ss-160826-twip-05_8cf6d4cb83758449fd400c7c3d71aa1f.nbcnews-ux-2880-1000.jpg">
<img src="http://toprozdily.cz/wp-content/uploads/2015/04/slon-africky.jpg">
<img src="http://img.huffingtonpost.com/asset/,scalefit_950_800_noupscale/55fc14631c00004800082775.jpeg">
</section>
So what you're going to need to do is put the images each in their own div container and set the div background-color to white. That way you see the white background through the semi-opaque images and not the image underneath.
I edited your fiddle to give you the functionality you're looking for. Hope it helps!
There isn't a way to make an element be transparent to one element but opaque to another.
However, you might be able to simulate the transparency by tinting the images instead, either by positioning a partially-transparent div of that color over each image, or with CSS filters:
https://www.w3schools.com/cssref/css3_pr_filter.asp
I'm trying to figure out why when setting an inline background-image all other background properties are not working.
External CSS:
background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url("http://lorempixel.com/1400/900/");
Result:
But when an inline background-image is added the gradient property seems to be ignored.
Inline CSS
<div class="intro-img" style="background-image: url('http://lorempixel.com/1400/900/')">
Result:
you're actually overriding your background property with your
background-image: url('XXX')
You could fix it by also adding your gradient to your inline style
Another solution would be using another element / pseudo element to handle your gradient
#test, #test2 {
width: 600px;
height: 400px;
}
.is-overlayed {
position: relative
}
.is-overlayed::after {
content: '';
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6));
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.text {
color: #fff;
}
.above-overlay {
z-index: 1;
position: relative;
}
<div id="test" class='is-overlayed' style='background-image:url("http://lorempixel.com/1400/900/")'>
<p class='text above-overlay'>ABOVE OVERLAY</p>
<p class='text under-overlay'>UNDER OVERLAY</p>
</div>
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.