I have an issue where I want to have to divs that act as a background. they basically wrap the entire page. both have the same gradient set as their background-image. the problem is that on div displays the gradient perfectly fine, but the other is just white.
html:
<div class="bg bg-base">
<div id="bg-animation" class="bg bg-animation">
<div class="layer-content">
<!--content here-->
</div>
</div>
</div>
CSS:
.bg {
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
position: absolute;
}
.bg-base {
background-image: linear-gradient(to left bottom, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}
.bg-animation {
background-image: linear-gradient(to right top, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}
.layer-content {
width: 100%;
position: relative;
}
I'm doing some opacity animations with the top gradient, that's why I need 2 of them on top of each other. but if say, I set the opacity of the top gradient to 0, the bottom one isn't there. if I add a height: 5000px; to the bg-base, it does show up.
Kill the absolute positioning:
https://jsfiddle.net/cathead/1nbjdp05/4/
.bg {
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
xposition: absolute;
width: 100%;
}
Related
I inserted two background images to a div and gave them the top and bottom positions. However, the issue is that I want the images to have an equal top and bottom margin. I'm not sure how to accomplish it.
I want the background images like in the SS.
html:
<div class="license-info">
</div>
css:
.license-info {
width: 100%;
height: 800px;
background: #181f2b;
background-image: url('/images/footerdiamondchain.png'), url('/images/footerdiamondchain.png');
background-repeat: repeat-x;
background-position-y: top, bottom
}
You can specify an independent background-position for each background image. So you could set them equal distance from top and bottom, respectively, via a rule like this:
background-position: center top 80px, center bottom 80px;
center top 80px sets the first image 80px from the top
center bottom 80px sets the second image 80px from the bottom.
.license-info {
width: 100%;
height: 800px;
background: #181f2b;
background-image: url('//placekitten.com/50'), url('//placekitten.com/50');
background-repeat: repeat-x;
background-size: 50px;
background-position: center top 80px, center bottom 80px;
}
<div class="license-info"></div>
you can do like that.
<div class="license-info">
<img class="first-img" src="./first/path"></img>
<img class="second-img" src="./second-img/path"></img>
</div>
.license-info {
position:relative;
}
.license-info .first-img {
position:absolute;
top:50px// change this position
}
.license-info .second-img {
position:absolute;
bottom:50px;
}
I've added a background-img to my section container. Inside that I wan't to create another div, which sits over the top and will include separate img/copy. At the moment if I try and position that div with margin or padding, it is also moving the background image (see whitespace in screenshot).
Is there a way to style this div so I can align it without the background image on the section moving as well? For reference, the 'tree' image is the background image
.section__feature {
background-image: url('/assets/img/hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
}
.featured {
position: relative;
margin-top: 2rem;
&__img {
background-image: url(/assets/img/featured.jpg);
background-position: center;
background-size: cover;
height: 20rem;
}
grid-area: featured;
}
<section class="section__feature">
<div class="grid-container">
<div class="featured">
<div class="featured__img"></div>
</div>
<div class="feature-small-top"></div>
<div class="feature-small-bottom"></div>
</div>
</section>
Many thanks
Try setting your background-position: fixed; and z-index:-1; on your .section_feature if that is your background image.
I'm trying to create a site with skewed/rotated divs, but I've got a problem with the ones that have fixed background image.
The code describes the issue best:
https://codepen.io/poveu/pen/pWJwYx
<div class="skewed_fixed">
<div class="content">
This parent's background is fixed. When you scroll down, there's still that white body background above, and this text scrolls into it.
</div>
</div>
<div class="skewed_normal">
<div class="content">
This background is not fixed and behaves properly.
</div>
</div>
<div class="margin"></div>
.skewed_fixed {
background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
background-attachment: fixed;
transform: skewY(-3deg);
background-size: cover;
width: 100%;
}
.content {
height: 300px;
}
.skewed_normal {
background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
transform: skewY(-3deg);
background-size: cover;
width: 100%;
}
.margin {
height: 600px;
}
(background-size: cover and width: 100% is here just to make the bg fit 100% width; margin div is to make the page scrollable)
I want to scroll the whole div with its background "mask" so the white space disappears when scrolling down.
I've tried to mix it with transform-origin: left; but then the transparent space appears on the bottom of the div.
Is there any easy (non JS) way to achieve what I want?
I had used translate property with skew property. Try this.
.skewed_fixed {
background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
background-attachment: fixed;
transform: skewY(-3deg) translate(0px, -50px);
background-size: cover;
width: 100%;
}
.content {
height: 300px;
padding-top: 60px;
}
.skewed_normal {
background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
transform: skewY(-3deg) translate(0px, -50px);
background-size: cover;
width: 100%;
}
.margin {
height: 600px;
}
<div class="skewed_fixed">
<div class="content">
This parent's background is fixed. When you scroll down, there's still that white body background above, and this text scrolls into it.
</div>
</div>
<div class="skewed_normal">
<div class="content">
This background is not fixed and behaves properly.
</div>
</div>
<div class="margin"></div>
You could play on positions and margin or padding to compensate the empty space :
.skewed_fixed {
background: url(http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg) no-repeat;
background-attachment: fixed;
transform: skewY(-3deg);
background-size: cover;
width: 100%;
background-position: 0px -100px;
top:-50px;
position:relative;
margin-top:50px;
}
I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>
The header of my website's homepage consists of the following layout:
<header>
<div class="navbar-lock"></div>
<div class="hero"></div>
</header>
Where div.navbar-lock is a fixed navigation with an initial height of 90px, and div.hero contains some header text. Visually, I want to give the appearance that one background image (2000px x 481px) spans the height and width of both. On scroll, the fixed navbar's background will be the top 90px of the image; when the scroll position is back at the top of the page, the header once again appears as one background image.
What I've tried:
Approach A:
header {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
background-size: cover;
}
div.navbar-lock {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
background-size: cover;
min-height: 90px;
padding-top: 20px;
position: fixed;
top: 0;
z-index: 100;
width: 100%;
}
Approach B (crop the image into 2):
div.navbar-lock {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
background-size: cover;
}
div.hero {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 -90px;
background-size: cover;
position: relative;
top: 90px;
padding: 80px 0 134px; // padding to properly position its text
}
But in both attempts, I was unable to get the image(s) to line up properly. What am I missing here?
I would put the header and the hero div's into a parent div. And would put the image onto the parent div.