I'm trying to setup a series of div's with a background image that each have their own fixed height, and stretch to fill up the width, even if there is overflow on the top/bottom that is clipped. I just don't want the white space on the edges.
Currently, I have: http://jsfiddle.net/ndKWN/
CSS
#main-container {
float: left;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.chapter {
position: relative;
height: 1400px;
z-index: 1;
}
#chapter1 {
background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
#chapter2 {
background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
See my answer to a similar question here.
It sounds like you want a background-image to keep it's own aspect ratio while expanding to 100% width and getting cropped off on the top and bottom. If that's the case, do something like this:
.chapter {
position: relative;
height: 1200px;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/3/
The problem with this approach is that you have the container elements at a fixed height, so there can be space below if the screen is small enough.
If you want the height to keep the image's aspect ratio, you'll have to do something like what I wrote in an edit to the answer I linked to above. Set the container's height to 0 and set the padding-bottom to the percentage of the width:
.chapter {
position: relative;
height: 0;
padding-bottom: 75%;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/4/
You could also put the padding-bottom percentage into each #chapter style if each image has a different aspect ratio. In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value.
http://jsfiddle.net/ndKWN/1/
You can use background-size: cover;
But the thing is that the .chapter class is not dynamic you're declaring a height:1200px
so it's better to use background:cover and set with media queries specific height's for popular resolutions.
Related
I have been searching for a while, I still cannot find the exact answer.
I have a <div> for which the width takes 100% of the screen, the height is fixed at 600px.
I would like to add a background picture to the div for which the picture height would fit the <div> height (600px and no picture crop). Whenever I modify the width of the screen, the height should always remain 600px. The picture would then be centered and cropped on the width direction.
Try this:
.container {
width: 100%;
height: 600px;
background: url('https://images.pexels.com/photos/268415/pexels-photo-268415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
}
<div class="container"></div>
Did you tried
`
background-image: url('your-image.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
`
I think this what you are looking for :
body {
margin: 0px;
padding: 0px;
}
div {
width: 100vw;
height: 600px;
background: url('https://wallpaperbrowse.com/media/images/704532.jpg') no-repeat;
background-size: 100% 600px;
float: left;
background-position: center;
}
<div>
test
</div>
Hope this was helpful for you.
<html>
<link rel="stylesheet" type="text/css" href="index.css">
<body>
<feature></feature>
</body>
</html>
In the above feature I want to have an image (background-size:cover) so it fill exactly 4:3 ratio and be on the center of the screen at all time (and doesn't exceed either the height or width of the screen).
I tried the following stylesheet:
feature {
padding: 40% 50% 40% 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40%;
margin-left: -50%;
background: url('horse1.jpg') no-repeat center;
background-size: cover;
}
This has a problem when the screen is very wide, the height will exceed the height of the screen. max-height doesn't seem to limit it.
somethinghere's solution isn't bad but when the screen's width is greater than its height, the image will leave 20% of white space on top and bottom.
Instead you can try this:
width: 100vw;
height: 75vw;
max-height: 100vh;
max-width: 133.33vh;
margin: auto;
position: absolute;
top:0;bottom:0;
left:0;right:0;
You can accomplish this with percentages, as a matter of fact, I would explicitly use percentages to maintain the aspect ratio.
html,body { min-height: 100%; height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 90vmin;
}
div:after {
content:"";
display:block;
padding: 0 0 75%;
background: #000;
}
<div></div>
It can be done using the media query for aspect ratios to determine when the page has changed aspect - this might not work depending on what else you have on the page but it can be very useful on background images.
Example one (limits width when height is below aspect ratio)
.feature {
position: absolute;
top: 50%;
margin-top: -40%;
left: 0;
width: 100%;
background: url('http://via.placeholder.com/400x300') no-repeat center;
background-size: cover;
}
.feature::before {
display: block;
content: "";
padding-top: 75%;
}
#media screen and (min-aspect-ratio: 4/3) {
.feature {
top: 0;
margin-top: 0;
height: 100%;
background-size: contain;
}
.feature::before {
padding-top: 0;
max-height: 100% !important;
}
}
<div class="feature">
<div>
Example 2 (loses aspect when width is greater than 4/3 aspect)
Remove line background-size: contain;
First of, you cannot accomplish this with percentages. To keep the appropriate aspect ratio, you need to use a unit that is the same size in both dimensions, so use something like vmin or vmax to accomplish this. The same for your centering using margin and percentages - those percentages don't have a universal meaning, they are related to the wrapping box. Here a translate is useful, as those percentages represent the size of the box (1--% is the full width of the box), not its parent.
The following will keep the aspect ratio of 5x4 through your paddings (although it might be better to just use width: 100vmin and height: 80vmin in this case). Note that your paddings are not actually a 4x3 ratio, but you can easily figure that out at this point.
html, body {
height: 100%;
}
feature {
padding: 40vmin 50vmin 40vmin 50vmin;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: url(http://placehold.it/100x80);
background-size: cover;
}
<feature></feature>
https://jsfiddle.net/2esv5wja/
css code snippet:
.imageContainer {
height: 750px;
width: 100%;
overflow: hidden !important;
}
.imageContent{
background: url('http://orig15.deviantart.net/0e45/f/2010/052/1/1/calvin_and_hobbes_2010_by_nami86.png') no-repeat center center;
background-size: 100%;
width: auto;
height: 100%;
padding-top: 3%;
padding-bottom: 3%;
min-width: 1200px;
overflow: hidden !important;
}
Is there a way to make it so when the image stops scaling, it crops to the center? That is, as it stands, it crops from the right. Can we crop from both sides evenly? If so, how is that done?
Please see the updated jsfiddle > here
You need to scale by height in order to get the crop effect you are looking for in order to do this, please see the code:
.imageContent{
background: url('http://orig15.deviantart.net/0e45/f/2010/052/1/1/calvin_and_hobbes_2010_by_nami86.png') no-repeat center center;
background-size: auto 100%;
height: 500px;
padding-top: 3%;
padding-bottom: 3%;
}
The background size property handles the scaling which is why I have changed it to be so that the width is always auto and the height is 100%, I have then added a hard height in pixels which you can change. This creates the desired effect.
Easy answer is to set the
background-size: 50%;
Looks ok on your fiddle.
replace background-size: 100%; with background-size: cover;
https://jsfiddle.net/2esv5wja/4/
Try this:
background-size: 100% 100%;
I have a div with a background-image defined as follows in my stylesheet:
.information_photo {
position: relative;
top: 30px;
width: 100%;
height: 200px;
background-image: url('http://www.ladyblitz.it/wp-content/uploads/2015/04/carbonara.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
<div class="information_photo"></div>
As you can see it stretches the original image, instead I want it to just focus on a part of the background-image without stretching or resizing it.
The 100% 100% background-size value means the background should stretch (100%) of the width of the element and (100%) of the height of the element. Have either of them set to auto, which will size the undefined dimension automatically, while preserving the images aspect ratio.
You can then choose which portion of the image is visible by adjusting the respective background-position style.
.information_photo {
position: relative;
top: 30px;
width: 100%;
height: 200px;
background-image: url('http://www.ladyblitz.it/wp-content/uploads/2015/04/carbonara.jpg');
background-repeat: no-repeat;
background-position: center -30px; /* Visible 30 px from the top */
/* 100% height, auto width */
background-size: auto 100%;
/* 100% width, auto height */
background-size: 100% auto;
/* or simply */
background-size: 100%;
}
<div class="information_photo"></div>
I have a rectangular image and I would like to crop it into square. It's something like this:
img {
width: 200px;
height: 200px;
}
It works great, but only when I know final width and height. But what I should do when I don't know height value, only width and not in px but in %?
img {
width: 25%;
}
I have only width (25%) and I need square image. What should I do?
I need solution in CSS. I can't use JS.
If it doesn't need to be an img then I would create a div, make the image the background-image, force a pseudo element to make the height relative to the width of the div and then make the background image cover the div with background-size:
http://jsfiddle.net/8tqxvvzs/
div
{
position: relative;
display: block;
background-image: url('http://placehold.it/350x150');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 25%;
}
div:before
{
content: "";
display: block;
padding-top: 100%;
}