I saw some similar questions regarding this. But my approach is different and none of those works to me. That's why I'm posting this.
I want to change the opacity of background image without changing the opacity of child elements, where background-image is loaded inside the body tag.
html :
<body>
<div id = "background-div">
<div class = "header">
<div class = "ham-icon">
<img src = "images/ham-icon.png">
</div>
<div class = "logo">
<span class = "google-logo">Google</span><span class = "hangouts-logo"> Hangouts</span>
</div>
<div class = "profile-data">
</div>
</div>
<div class = "body">
</div>
</div>
</body>
css:
body
{
position: relative;
background: url(../images/back1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
HTML Background with BODY filter
<HTML> gets a background image while <body> gets a 50% transparent white (layer of transparent color using RGBA)
html, body {
height:100%;
padding: 0;
margin: 0;
}
html {
background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;
}
body {
background:rgba(255,255,255,0.5); /* applies a 50% transparent white background */
}
Using CSS pseudo selector :before for body
Another way is using the pseudo selector for body, which can be a "layer" behind the actual body that can get the opacity property without affecting other elements.
html, body {
height:100%;
padding: 0;
margin: 0;
}
body:before {
background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;
display: block; content:""; position: absolute; z-index:-1;
top:0; left: 0; right: 0; height: 100%;
opacity:.5;
}
You can try the following workarounds:
1) use an image which already has an alpha channel, such as png;
2) have the background div ad a sibling and not as a parent of the other elements, and change their position with css, such ad position:absolute; z-index; and so on.
3) if your image only consist in colours, you can leave your html untouched and use rgba/css gradients
You can put the background to a separate <div>:
<body>
<div id="content">
<div id="background-div"></div>
<!-- content -->
</div>
</body>
Then position and style to fill the entire content.
#content {
positon: relative;
}
#background-div {
position: absolute;
width: 100%;
height: 100%
opacity: 0.5;
background: url(...);
}
use direct child selector
body > .backgroudimg{
blah blah
}
Related
I would like to define the background image for whole table with DNA image and I want to use default color gray for whole table but some of columns I need with white color.
If I try to override the background color, the DNA image is gone.
I have tried this one with bootstrap:
HTML:
<div class="container mt-3">
<div class="row">
<div class="col-6 col-white">col1</div>
<div class="col-6 col-white">col2</div>
</div>
<div class="row">
<div class="col-6">col3</div>
<div class="col-6">col4</div>
</div>
</div>
CSS:
body{
background-color: yellow;
}
.container{
background-color: gray;
background-image: url('https://raw.githubusercontent.com/skoruba/css-bg-img/main/dna%20(1).png');
background-repeat: repeat-y;
background-position: 50px 0;
}
.col-6 {
padding: 20px;
}
.col-white {
background-color: white;
}
Demo: https://jsfiddle.net/6sugwzbh/2/
Currently:
Expected:
How can I override only background color, but not background image as well?
You could just add the DNA as a repeating background to an after pseudo element on the container, positioning it just to the right a bit.
This will go over everything without affecting anything else's positioning.
You need to set the position of the container though so that its pseudo element can position itself in relation to that.
Add this to the CSS:
.container::after {
content: '';
position: absolute;
left: 50px;
top: 0;
width: 30px;
height: 100%;
background-image: url('https://raw.githubusercontent.com/skoruba/css-bg-img/main/dna%20(1).png');
background-repeat: no-repeat repeat;
background-position: center center;
}
and add position: relative to the .container but remove the background-image from there.
I'm trying to place some text over an image that has a background color as a tint and opacity.
I'm using Bootstrap 4 and it's possible some classes are overriding each other, but not 100% sure.
This is what I currently have:
Index.cshtml:
<div class="layer">
<div class="jumbotron jumbotron-fluid jumbotron-container resume-jumbotron text-white">
<div class="container-fluid jumbotron-content">
<h1 class="text-center jumbotron-header mb-4">Hey there, I'm #Model.FullName!</h1>
</div>
</div>
</div>
site.css:
.jumbotron-container {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
filter: opacity(60%);
}
.resume-jumbotron {
background-image: url(https://content.codecademy.com/courses/asp-dot-net/boots.png);
}
.layer {
background-color: #512F1E;
position: relative;
}
.jumbotron-header {
font-weight: bold;
}
The above renders this:
I've tried adding a z-index and position to the layer and the header but it screws up the rest of the positioning in the jumbotron.
The currently rendered text shows up behind the background color. How can I position the text so it renders above the .layer div despite it being a child of it?
The text isn't showing up behind anything. It has reduced opacity, as set on the jumbotron element. You cannot reset opacity for interior elements. Instead, apply a mask over your background image:
.jumbotron-container {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
.jumbotron-container::before {
position: absolute;
content: '';
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.4);
}
Demo
I did have to set position on .jumbotron-content to keep the pseudo-element behind it.
Replace my black mask color with the rgba equivalent of your hex color. You can eliminate the layer element.
I have a following class that has a background image to it, and this is the image I want to apply a tint over:
<div class="jumbotron d-flex align-items-center" id="upper-half" style="background-image: url('${mediaInfo.backdrop}')">
<div class="tint"></div>
</div>
<div class="class2">
....
....
</div>
Classes jumbotron and class2 divide the screen into two parts, both of which are visible simultaneously on the screen.
The problem is, when I apply tint, it applies to the whole screen, even on the class class2. Ideally, that should not happen as it is defined inside the hjumbotron class.
Here's the CSS:
#upper-half {
background-size: cover;
background-blend-mode: multiply;
}
.tint {
z-index: 0;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0, 0.9);
}
Can someone tell me what's going on? I want the tint to cover only the jumbotron class, not anything else.
Its because your .tint class is absolute positioned which is relative to body because you have not applied position:relative in its parent...
So use position:relative in ##upper-half
#upper-half {
background-size: cover;
background-blend-mode: multiply;
position:relative;
}
Its because of the tint class which is absolute and covering whole screen because of its style. Try adding following style to your #upper-half and I think it will solve your problem.
#upper-half{
position: relative;
width: 100%;
height: 200px;
background-size: cover;
background-blend-mode: multiply;
}
Change the width and height to your desired dimension and don't forget to use position:relative; or else tint will take the dimensions of body.
Hope this helps
I want to link an image url to a div so that image will be used as a background and watermark for the content within the div.
When I set the url to the body, it repeats the image, which i dont want.
<body style="background-color: white; background-image: url(https://preview.ibb.co/ntRarR/watermark3.png);">
...
</body>
And when I set the url within the div (where i want it and which is inside the body tag), the image does not appear.
<div style="background-image: url(https://preview.ibb.co/ntRarR/watermark3.png); text-align: center">
...
</div>
Any advice is greatly appreciated.
Thanks
use this way for image opacity
.bgdiv {
position: relative;
z-index: 1;
width:450px;
height:450px;
}
.bgdiv .bg {
position: absolute;
background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
background-size:100%;
opacity: .4;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="bgdiv">
<div class="bg"></div>
...
</div>
for body use
background-repeat:no-repeat;background-size:cover;
body{
background-image: url(https://preview.ibb.co/ntRarR/watermark3.png); text-align: center;background-repeat:no-repeat;background-size:cover;}
Make sure your div is not empty.
Use property
background:url('https://preview.ibb.co/ntRarR/watermark3.png');
to give background for your div.
If you apply background property to body tag, it will be applied to the
entire webpage.
In case you want to apply background image to the body tag, use
background-size: cover; (cover the entire page).
My background image is not covering all contents on my page, rather it's applying only half of the screen.
The same code with same image is properly working on my another page.
Only the difference is that i have a lot of content on this page but i think that doesn't matter.
Where is the issue?
Thanks in advance.
html
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
css
#main {
position: relative;
}
#main:before {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background: url(../..//images/3.jpg) center center fixed;
width: 100%;
height: 100%;
opacity : 0.2;
filter: alpha(opacity=20);
z-index: -1;
try this code
background-size:100% 100%;
Hi, you just try with following CSS snippets
background: url(../..//images/3.jpg);
background-repeat:no-repeat;
background-size:contain;
This method will work
body
{
margin:0px;
width: 100%;
height: 100%;
}
#main {
background-image: url('download.jpg');
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
Here you are using a psudeo element :before .The functionality of psudeo element :before is as follows.
It would attach a child node at the first index.In your case you are trying to attach an image before the div element.And this does not correspond to your whole body.
To make the image applicable to your whole body try this:
body
{
margin:0px;
width: 100%;
height: 100%;
background: url(../..//images/3.jpg) repeat left top;
}
And remove your psudeo element :before
#main {
position: relative;
/*Other CSS Properties*/
}
try this one
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
I guess you have missed a double quote while writing your ID.
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>