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/
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 background image in the following div, but the image gets cut off:
<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">
Is there a way to show the background image without cutting it off?
You can achieve this with the background-size property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
JSFiddle example or runnable snippet:
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
width: 100px;
height: 200px;
border: 1px solid;
background-size: contain;
}
<div id="imagecontainer"></div>
There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.
If what you need is the image to have the same dimensions of the div, I think this is the most elegant solution:
background-size: 100% 100%;
If not, the answer by #grc is the most appropriated one.
Source:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can use this attributes:
background-size: contain;
background-repeat: no-repeat;
and you code is then like this:
<div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
background-position-x: center;
background-position-y: center;
you also use this:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
I don't know your div-values, but let's assume you've got those.
height: auto;
max-width: 600px;
Again, those are just random numbers.
It could quite hard to make the background-image (if you would want to) with a fixed width for the div, so better use max-width. And actually it isn't complicated to fill a div with an background-image, just make sure you style the parent element the right way, so the image has a place it can go into.
Chris
try any of the following,
background-size: contain;
background-size: cover;
background-size: 100%;
.container{
background-size: 100%;
}
The background-size property specifies the size of the background images.
There are different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height).
percentage - Sets the width and height of the background image in percent of the parent element.
cover - 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
contain - Resize the background image to make sure the image is fully visible
For more: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Alternative:
background-size: auto 100%;
you can also try this, set background size as cover and to get it look nicer also set background position center like so :
background-size: cover;
background-position: center ;
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>
So I am creating a website for practice and I want an image to span across the website and be 400px high. But it turns out that the image is replicating it self into the two of the same images in order to expand across the webpage the height is fine.
1) Why is the happening.
2)How do I fix this below you will find my code.
.image {
background-image:url("sauce.png");
height: 400px;
width: 100%;
position: center;}
<div class="image"></div>
The dimension and position properties of the container are not related to background image. Try the following instead:
background-position: center;
background-repeat: no-repeat;
Also, if you want the background-image to fill the entire area, you can use
background-size: cover; which will crop and fill the container maintaining the aspect ratio, or background-size: contain; which will squeeze the entire image in the container, distorting the aspect ratio.
This is because of the CSS background-repeat property which by default is set to repeat.
In your CSS for .image, add the following line: background-repeat: no-repeat;.
background-position: center;
background-repeat: no-repeat;
My background image doesn't want to scale with the rest of the page. And when I've gotten it to do so, it created a huge white-space gap underneath it when I'm scaling down the page.
.vintage {
width: 100%;
height: 100vh;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
use background-size:cover for the background-image to cover the whole div.
see here more about this property : CSS3 background-size Property
.vintage { width: 100%;
height: 100vh;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-size:cover;
}
<div class="vintage">
</div>
Try adding the property value cover to your css file.
Like this:
div {
background-image:url('vintagemcdonalds.jpg');
background-size:cover;
}
This enables you to scale the background image to be as large as possible so that the background area is completely covered by the background image.
If some parts of the background image are not visible within the background positioning area, try giving some extra information to your css such as:
width: 100vw;
height: 100vh;
(Note that CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.)
If you don't want the background image to repeat simply add:
background-repeat:no-repeat;
For more info, check " https://css-tricks.com/perfect-full-page-background-image/ " it will give you a good idea of different approaches to be considered when trying to work with a full screen background.
Hope this helps and good luck! :)