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.
Related
I am trying to fit my background image to my different media queries but i cannot make the image to display completely.
.main {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
background: url("images/BANNER.png");
background-size: cover;
position: center;
background-attachment: fixed;
}
#media (max-width:375px) {
.main {
background-image: url("images/BANNER.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
}
<section class="main" id="main">
<div class="content">
<h2>Hello, this is <br><span>Aptos Koalas</span></h2>
LFM!
</div>
</section>
I was able to center de image with background-position but i cannot make the image to show completely.
you are using the background-size: cover; property that will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
try with background-size: contain
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%;
}
I am currently positioning a background image that is small in height but large in width to stretch all the way across the browser. I am only able to achieve this when I do background size cover, but not when I set a certain size to the image other than cover. I tried background repeat-x but that does not seem to work either.
<html>
<body>
<div class="background">
<div class=“header”></div>
//some content
</div>
<footer><footer/>
</body>
</html>
CSS
.background {
background-image: url(some image);
background-size: //tried cover and it works but not when I set it to width 100% or something like 2800px
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
Just add background-size: cover code in css will resolve the issue.
.background {
background-image: url(some image);
background-size: cover;
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
It is working with background-size:100%;
.background {
background-image: url("marakele-elephant1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;
}
html, body{
height: 100%;
}
body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
div, body{
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
<div class="wrapper">
<div class="message"></div>
</div>
Not very related to this question but I hope this answer will save someone's time
For the people who are using bootstrap. Keep the image inside a container, check again if it is inside class="container", I had a typo, I wrote classs instead of class and the background image wouldn't fit.
Second, close previous divs.
Third, if you don't use container and start with just <div class='row'></div>, background image won't fit.
Working Example:
<div class="container" style="background-image: url('img'); background-size: cover;">
<div class="row">
</div>
</div>
I'm curious if the CSS unit vw (view width) will accomplish what you are trying to do with width: 100%
Instead of width: 100%, try width: 100vw
https://www.w3schools.com/cssref/css_units.asp
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>
I have this div.
.a {
background-image: url(url_image);
height: 400px;
background-position: bottom;
background-attachment: scroll
}
<div class="a">
<div class="b">
<div class="content1">
</div>
<div class="content2">
</div>
<div class="content3">
</div>
</div>
The .a image has an irregular border:
I need to put a background-image to div .b and obtain something like this:
Is this possible?
You need to flip the two images. The background image needs to go into .a and the irregular border image need to be in .b. Think of this as painting a picture, you start with the background then add the foreground. The foreground image needs to have a transparent background so you can see through to the background image. (This would be the blue part of the irregular background image above)
.a {
background-image: url(myImage);
background-size: 100% 100%;
height: 400px;
background-position: bottom;
background-attachment: scroll
}
.b{
background-image: url(irregularBorder);
background-size: 100% 100%;
height: 400px;
background-position: bottom;
background-attachment: scroll;
}