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>
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 am making a layout with an background in body. I need to center it both horizontally and vertically. For that purpose I use background-position:center.
background-image:url('address');
background-repeat:no-repeat;
background-position:50% 50%;
However, the background not positoned correctly vertically: you can see only half of the image in the top of the screen. Check it here link to codepen.
As a solution I tried to use images with different sizes and background-position:50% 50%. Then I double-checked other background-relative selectors and found that if I add background-attachement and change it from its default value which is scroll to fixed, than the image is centered correctly.
Can anybody explain please why this happens?
It happens if you didn't gave the body a height, as its default is 0.
The body's height is based on its content, and a background image doesn't set it.
Here is a sample showing how you need to do
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
Sometimes it can create other issues when one need to give the body a height, and when, a positioned div is one option
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
So, based on how/if you need to use background-attachment: scroll and/or positioned div's, here is a sample showing their behavior when one scroll (and a fiddle demo to play with)
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
}
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/180/0f0);
background-repeat: no-repeat;
background-position: center center;
}
#bkgdivfixed {
position: fixed;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/160/ff0);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
<div id="bkgdivfixed"></div>
<div style="width: 5px; height: 150vh; background: red; margin: 5px"></div>
If you want to gave background to body, its really simple task.
initially you need to write css for body and html
html, body {
margin: 0;
height: 100%;
}
The next ting is you need to gave background css to the body
body {
background-image: url(https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg);
background-position: center;
background-repeat: no-repeat;
}
Okey now the image seems to be the center of the body(screen),
Now you can adjust the size using background-size property.
background-size: cover;
The images enlarged enough to cover the entire screen.
background-size: contain;
The images enlarged up to the height or width(which is smaller) of the screen.
you can give fixed size my giving size to it
background-size: Xpx Ypx;
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/
On the website of Nintendo Online is a post image, which has little dots on it due to CSS. I would like to do this too, but without using a div container around the image.
Here is my current code:
.image {
background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat;
}
<img class="image" src="http://media2.giga.de/2013/06/osx_hero_2x.jpg" height="250" width="500px">
What do I have to change to make it visible? If I set z-index to 1 the image goes one stage up either. Is it even possible?
use :before or :after
http://jsfiddle.net/omjo21mk/
div {
background: url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) repeat;
position: relative;
min-height: 200px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
div:before{
content: '';
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat;
}
<div></div>
Just use multiple urls in the background css
.image {
background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat, url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) no-repeat;
}
See it here
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;
}