This might be a rookie question, but I can't find an answer anywhere. I'm writing a website with parallaxed background images and want to make said images a bit transparent as opposed to the text above them, which should be completely opaque. I followed w3school's model (with some changes) and it works considering that background image is defined in the parent container, so the text inherits the image's opacity, as seen in bgimg-2.
What I've tried to do, appart from fiddling with the stylesheet to no avail, is to create a new container section-img that encapsulates both the background and the text, so their styles don't overlap with each other. This, however, makes the image's (bgimg-1) height equal to 0.
Here's an MRE:
<!DOCTYPE html>
<html>
<style>
body, html {
height: 100%;
margin: 0;
background-color: #282828;
font-family: sans-serif;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.section-img {
position: relative;
min-height: 100%;
}
.bgimg-1 {
background-image: url("https://i.redd.it/v3wjcf1p59841.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
z-index: -1;
}
.bgimg-2 {
position: relative;
opacity: 0.6;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.redd.it/o1a3xr4b39841.jpg");
min-height: 100%;
}
#title {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: white;
font-size: 7vw;
letter-spacing: 2vw;
}
.section-text {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
font-weight: bold;
color: white;
letter-spacing: 2vw;
font-size: 3vw;
color: #f7f7f7;
}
</style>
<body>
<div class="section-img">
<div id="title">No background picture here!</div>
<div class="bgimg-1"></div>
</div>
<div class="bgimg-2">
<div class="section-text">I want different opacities :(</div>
</div>
</body>
</html>
What's the sanest way to achieve this difference in opacities for both items?
Why Don't you use "rgba" style(CSS input), "rgb" will set the colour of the background and the "a" command will set the opacity (transparency) of the image, it can be set between 0-1 where 0 is transparent(0% opacity) and 1 is 100% opacity. i hope this helps!!
.bgimg-1 {
background-image: url("https://i.redd.it/v3wjcf1p59841.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
// z-index: -1; // you won't need this
// add position relative so that the ::before position absolute will be in relation to it's parent and not the body:
position:relative;
}
// .bgimg-2 { // don't need this div
.bgimg-1::before { // add this instead
// position: relative; // no this instead:
position: absolute;
top:0; left: 0; right: 0; bottom: 0;
// end this instead //
opacity: 0.6;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.redd.it/o1a3xr4b39841.jpg");
min-height: 100%;
}
Related
Trying to build out a hero style masthead with a transparent cover image, and a color tint overlay; then display some text on top of this. I am using bootstrap 3 as underlying framework.
I have my hero wrapped in a div, I then have two child div. One contains the background tint layer, the other contains the text/title.
The background div layer is breaking out of the parent wrapper div and covering the entire viewport below it. I'm not sure where i went wrong.
Fiddle of my broken attempt:
Fiddle
#page-title {
font-size: 2.2em;
padding: 20px 40px;
margin-bottom: 40px;
}
.bg-layer {
opacity: 0.75;
background-color: #f7f8fa;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.bg-wrapper {
background-image: url(/whatever.png);
background-position: right center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
}
<div class="bg-wrapper">
<div class="bg-layer"></div>
<header id="page-title">
<div class="container">
About Us </div>
</header>
</div>
Add high z-index on .bg-layer, beacuse bootstrap CSS navbar Class default z-index is 1000
.bg-layer {
opacity: 0.75;
background-color: #f7f8fa;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index:1001;;
}
https://jsfiddle.net/lalji1051/9b46x5yo/3/
All your code is absolutely fine, Just add this line position: relative;to the .bg-wraper class and you will get the desired result!
#page-title {
font-size: 2.2em;
padding: 20px 40px;
margin-bottom: 40px;
}
.bg-layer {
opacity: 0.75;
background-color: #f7f8fa;
background-color: #f005; /* just adding this for visibility*/
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.bg-wrapper {
background-image: url(/whatever.png);
background-position: right center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
/*Just this additionale property*/
position: relative;
}
<div class="bg-wrapper">
<div class="bg-layer"></div>
<header id="page-title">
<div class="container">
About Us </div>
</header>
</div>
I wanna know how I can make the div's background responsive
My code:
height:500px;
background-image: url(../images/Doctor.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
The result:
When i zoom out :
The problem is when I zoom in or out I want the doctor image fixed in zoom not in scroll
In order to make it responsive, try the following snippet. Do not set width, height, or margins.
body {
background-image: url(https://cdn.dribbble.com/users/394/screenshots/196178/attachments/3368/background-circles.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
span {
color: tomato;
font-weight: bold;
font-size: 2em;
margin: 0;
padding: 0;
position: absolute;
top: 50%;
}
<span>Responsive Background<br/>Image</span>
try this
height: auto;
background-image: url(https://cdn.dribbble.com/users/394/screenshots/196178/attachments/3368/background-circles.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
I have a background image which covers the full width and height of the browser. When opening the html file on a smaller screen, only the left side of the image is visible.
What I want is to scale and center the image on the background. What do I have to change in my css code?
div#background-content {
position: relative;
}
div#background-content:after {
background-image:url('./images/sunrise.jpg');
opacity:0.7;
width: 100%;
height: 100%;
background-size:cover;
display:block;
content : "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
you can add this code in your css:
div#background-content:after {
background-size:contain;
background-position:center;
}
CSS background-position:
background-position: center;
add background-position: center;
i recomended to you use background:url('./images/sunrise.jpg') no-repeat center;
div#background-content:after{
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
div#background-content:after {
background-image:url('./images/sunrise.jpg');
opacity:0.7;
width: 100%;
height: 100%;
background-position: left -206px top -95px !important;
background-size: 320% 110% !important;
display:block;
content : "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
I'm creating a simple website that is supposed to have a parallax-type effect. Originally it was using background-attachment: fixed;, however that's causing a repaint on each scroll, leading to some noticeable FPS drops.
Here is the desired effect, which in the real use-case, is causing slight stuttering:
body {
padding: 0;
margin: 0;
}
#container,
#container2 {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 100vh;
}
#container {
background-image: url('http://fillmurray.com/1200/1200');
}
#container2 {
background-image: url('http://placekitten.com/1200/1200')
}
#more-content {
font-size: 48px;
padding: 35vh 0;
text-align: center;
background-color: white;
}
<div id="container"></div>
<div id="more-content">
Here's some more content
</div>
<div id="container2"></div>
As a work-around, I've created a div and applied a ::before pseudo-element that's position: fixed;, and I've set it into the background by doing z-index: -1;. I've added will-change: transform; to avoid repaint issues.
body {
padding: 0;
margin: 0;
}
#container {
height: 100vh;
overflow: hidden;
position: relative;
}
#container::before {
content: ' ';
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-image: url("http://www.fillmurray.com/1000/1000");
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
will-change: transform;
}
#more-content {
text-align: center;
font-size: 48px;
padding: 50vh 0px;
background-color: white;
}
<div id="container"></div>
<div id="more-content">
Here's some more content
</div>
The problem is introduced once I try and create a second fixed image, beneath the section that says "Here's some more content". Because position: fixed; takes the element out of the flow (despite its parent being position: relative), I can't figure out a method to incorporate the second image, preserving the "wipe" effect in my first example. Being that they occupy the same space, only one image shows.
I've seen a few people ask similar questions, though most were not recent, nor did they have any answers.
I'm open to suggestions, otherwise I'll be tasking myself with a JavaScript workaround.
I'm trying to put in the right place a button which is a sibling with a div which have a cover background image. Every time when I stretch the cover div (to be "responsive" in some way), I want the button to be in the right place about this cover image. I mean that the cover div image has some graphics (feathers) and I want the button to be between them every time. How can I do that? Thanks in advance.
My HTML
<div class="cover_bgr"></div>
<div class="main">
Click
</div>
My CSS
.cover_bgr {
background: url(http://www.hdwallpapers.in/walls/colorful_background-wide.jpg) center no-repeat;
min-width: 100%;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
position: fixed;
top: 0;
left: 0;
min-height: 100%;
height: 100%;
}
.main {
position: relative;
margin: 0 auto;
z-index: 100;
height: 500px;
width: 100%;
}
.btn {
position: relative;
top: 30%;
left: 70%;
padding: 15x 5px;
background-color: #2a2a2a;
display: inline-block;
color: #fff;
}
My JSFiddle:
http://jsfiddle.net/onlinepch/w7v6L578/