I'm making a website and using a background image in a div.
The background image itself is using "cover" as its size. The div itself has a max width, as does its parent div.
However, when I test on larger screens, it continues to stretch. The divs themselves do not, they stay bounded at their upper levels, but the image continues to grow as the window expands.
I've tried using a width of 100%, which has the same problem. I've tried limiting the img.bg size, I've tried changing the background-size to cover contain and 100% cover, but nothing seems to make a difference.
Here's where it's at right now. On 1920x1080 browsers, the image will stretch all the way to 1920, even though I can only see 1300px of it.
img.bg {
max-width: 1300px;
}
.parallax {
background-image: url("images/headerimage2.jpg");
height: 350px;
max-width: 1300px;
min-width: 650px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The HTML where it's going I invoke with just this:
<div class="parallax"></div>
Related
according to the window size, the picture should both cover the window and even if the window height is greater than the height of the picture, let the picture be centered and fully covered.
But I don't want like this (Because the image is not centered, it just starts from the corner.):
background-size: center cover;
Your attempt looks like you try to do it with a OneLiner.
body {
background: url(https://via.placeholder.com/500/green) transparent no-repeat center center / cover;
height: 100vh;
}
<body>
<div>
hello World
</div>
</body>
background-size sets the size of background images for the element. The size of the image can be constrained, completely or partially in order to maintain its aspect ratio.
then remove the margin and padding from the element's parent
try to separate each term, like this
background-size: cover;
background-position: center;
try using margins
I have defined a css for you
.image{
width: 40%;
height: 40vh;
margin-top:30vh;
margin-left: 30%;
}
u can change the width and height of image but remember change margin top and margin left by half.
I used this for a div with an image inside of it. should work just fine. it will get smaller/larger depending on the window size and it will be in the exact center of the page.
background-image: url(path/to/image);
background-size: cover;
background-position: center center;
I have a status menu as a header on certain pages on my site which works fine on narrower viewports but on larger ones the background image is stretched too wide and becomes too narrow so the status menu dissapears into the white body.
How can I stop the background image from going too narrow when the viewports are made wider?
Trying a min-height in css didn't seem to solve the issue for some reason.
with the html:
<header class="banner-header bg-light">
</header
and the css
.banner-header {
width: 100%;
background: url("../images/navbar-header.svg") no-repeat center bottom;
background-size: cover;
min-height: 180px; }
Working fine on smaller viewports
Goes to narrow on larger viewports
background image without status menu
Try to control background-size manually on larger screens with #media
More info on #media here
More info on background-size here
For example:
.banner-header {
width: 100%;
background: url("../images/navbar-header.svg") no-repeat center bottom;
background-size: cover;
min-height: 180px;
}
#media (min-width:1200px) {
.banner-header {
background-size: 1600px 300px;
}
}
1600px is the width and 300px is the height. Those are placeholder values, pick what best suits your needs.
I hope this will help you!
I have an image that I'm trying to use for my initial parallax styled background that won't change orientation. It's the proper aspect ratio for a portrait, but no way I edit the code or the image itself it won't stop turning.
I've tried using translate code in my css, and I've tried the whole z-index and webkit lines and I eventually learned that those wouldn't work anyways. I don't know what else to try.
.parallax1 {
/* The image used */
background-image: url("me.jpg");
/* Set a specific height */
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The expected outcome is supposed to be landscape oriented version of a portrait of me. The aspect ratio is correct for this type of image but the photo still stretches and turns portrait.
You might want to create a JSFiddle to demonstrate this, but it's most likely your background-size: cover; value for background property ensures that the image will fill your whole container while preserving the aspect ratio. Because you only defined a height on your container your width is naturally "100%" (because divs are block elements). If your viewport or the container's parent ends up more wide than narrow so will your background image:
https://jsfiddle.net/w4x3bq61/
One way you can tackle this is to set the width of .parallax1 as well so it always have a taller height vs width such as:
.parallax1 {
/* The image used */
background-image: url("");
/* Set a specific height */
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 300px;
}
So I came across this today.
I have a section that is longer than the viewport, which has a background image with background-attachment: fixed;. This background is also using the background-size: cover; property. (needed for responsive purposes)
With the fixed position applied to the background, it crops off the image to fit it within the current viewport height and overflows the top of the tag.
Is there a way to make the image sit in the correct place (i.e. same position as if it wasn't fixed) and maintain the cover propery.
.hero {
background-image: url(http://lorempixel.com/output/food-q-c-1920-1920-1.jpg);
background-size: cover;
background-position: 50% 50%;
/* set the height of the hero. */
height: 125vh;
}
.fixed {
background-attachment: fixed;
}
<h4>With the fixed position</h4>
<section class="hero fixed"></section>
<h4>Without the fixed position</h4>
<section class="hero"></section>
I'm guessing as fixed elements are fixed to the viewport, the answer is no, but wasn't sure as it's a background image.
I wondered if perhaps anyone has found a workaround?
The Problem is, that the background area is fixed to 100% view port if you use fixed - You can enlarge the background area by adding background-size:
.hero {
background-image: url(http://lorempixel.com/output/food-q-c-1920-1920-1.jpg);
/*background-size: cover;*/
background-position: 50% 50%;
/* set the height of the hero. */
background-size: 125vh;
height: 125vh;
}
I am trying to create a full width parallax site and having an issue getting background images for sections to scale properly.
How would I get a full width image in desktop view to shrink down and contain a 100% width but the height shrink and image contain proportions to fit the width? The problem I am having is I can't set a background container to have a max height.
I'm really looking for a way for the height to shrink from 100% down when the viewport keeps getting smaller so that the focus of the picture isn't lost and maintains proportions just like a responsive image would.
I have tried background-size: contain as well but even then the container has to a have a fixed height which has to change while the background image shrinks because otherwise the image won't be fluid with the container.
#main-photo {
background-image: url("images/main.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 130px;
height: 100%;
width: 100%;
}
If I remove the height obviously nothing is rendered in the browser and max-height doesn't work like it would for responsive images.
Can someone please help me with this effect?
You need to use background-size: contain instead of background-size: cover. Demo here
#main-photo {
background-image: url('images/main.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 100%;
width: 100%;
}
I found a solution using a padding trick that adds height and allows the image to maintain its aspect ratio. Thank You!
Just add
padding-bottom: %here
You won't need to specify a height for the background image only a 100% width.
Here is a great article. http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/