This is my div tag background image code.
<div class="text-center paira-gap-2 paira-gap-1 position-r parallax parallax-1527413728902" style="background: url("//cdn.shopify.com/s/files/1/0611/5003/6139/files/Home2_1659f2cd-aa5a-4d18-9a93-b5955c1ec056.png?v=1648657681") 50% 8px no-repeat fixed; height: 900px;">
If someone have solution let me know.
You can make use of background-size and set it to cover to span the entire div. In addition, I recommend, placing the background to the center:
div {
background-size: cover;
background-position: center;
}
<div class="text-center paira-gap-2 paira-gap-1 position-r parallax parallax-1527413728902" style="background-url: url("//cdn.shopify.com/s/files/1/0611/5003/6139/files/Home2_1659f2cd-aa5a-4d18-9a93-b5955c1ec056.png?v=1648657681") background-size: cover; background-position: center; height: 900px;">
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 HTML and CSS like this:
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-size: 100% auto;
border-radius: 50px 50px;
}
<div class='item'></div>
When I resize the browser, the bottom border-radius doesn't work.
Change background-size: cover; and you could add background-position: center; to center your image.
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius:50px 50px;
}
<div class='item'></div>
As mentioned in other answers, you might want to use background-size: cover;. It will stretch the image to cover the whole area of the div (so the border-radius will be visible).
However since the image can be cropped after this change (specifically in the case when it does not have the same aspect-ratio like the area of the div), it might be necessary to use also background-position to position the background image as you like (by default it is aligned to the top left corner).
Most probably you will have good results with centering it, but the possibilities are endless ;)
background-size: cover;
background-position: center;
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 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>
For some reason I can't get an image to span 100% width across the browser.
You can find my site here.
My div reads:
<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg);
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; ">
</div>
Any help would be appreciated.
In your website you stretch your div to the whole page width. But the background image won't stretch unless you do:
background-size: 100%;
Background images are not resized with the size of the element containing them. Why not use
<img class="home" src="http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg"
style="background-attachment: fixed; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; ">
</div>
and remove the property
height: 560px;
?
Add background-size: 100% auto;
<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg);
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% auto;">
</div>
Use this CSS property
background-size:100% 560px;
Which tells that your background image should expand to 100% in width but have 560px as height.
I don't like the idea of stretching a image to fit the browser's window. As this depends on the client's machine on how the site will appear.
So, I will not suggest searching for such solutions. Rather:
Use repeating image as a background
Fix the dimensions of the image container. The effect you are trying to create will still look pretty cool
Detect the screen size and change the background as per the resolution.