I am wondering if/how one size (background)image can appear in one viewport size, and a smaller/different version of the same image can appear in smaller/different viewport/screen. Or if an image can be styled to accomdate this. Currently, with my code below, the image appears cropped when viewing though a smaller screen. What’s the solution?
.jumbo-0 {
color: #800000;
background:url('../images/2001.png');
background-repeat:no-repeat;
background-size:80%;
background-size:cover;
background-position:center;
background-color: #e5e5e5;
}
<div class="jumbo-0">
<div class="container text-center">
<h3 class="thin">TEXT TEXT TEXT<br>
Text text <br><br><br>
Text text</h3><br>
<h3 class="thintype">text text</h3>
<h5 class="thintype">text text</h5><br><br>
</div>
</div>
If you want to use a different version of the image, for example a low resolution version to save bandwidth on mobiles, you can add a media query and set the image within that.
It is certainly possible to make the image responsive to adapt to any size. The code you have: background-size:cover; should do this.
The problem is the container will change its aspect ratio, so at some point that ratio will not match that of the image, so with cover cropping will happen. Using contain you won’t get cropping, but will get “letterboxing” instead.
Either way, if the image aspect does not match the container aspect, you have to have one or the other. Choose what you consider the lesser evil.
With some elements you could constrain the aspect ratio to that of the image, but often with containers with text (as your’s has) that’s not an option.
The easiest way is to choose a suitable image to start with.
Look at this site and see how the big background image works at all screen sizes.
Of course if you have a large unsuitable image that needs to be viewed whole then you have a logistic problem.
You can use media queries to supply a smaller and differently cropped image for smaller screens and also to be able to reduce the file size of the image for say devices less than 600px width (approx). (If you don’t know what a media query is then just shout :))
There is of course no limit to the amount of media queries you could use and thus supply a range of images but that is a maintenance nightmare and I would stick with two images.
Most of the time a clever choice of image will ensure that the focus of the image is present as in my example above.
It would help if you attached the real image you were using so that we could see exactly what problems you were having or set up a small codepen demo with your code to make it easier for us to help.
Thanks for the replies/advice and image example.
Yes, I’d like some guidance with media queries, please.
Regarding “attach image you were using”, I’ve created an example image, same size, same layout.
The first two attachments show background-size:contain; and the other two attachments show background-size:cover. Large ones are desktop screens, and smaller ones are from screen > more tools > developer tools display
The image (of images) using ‘contain’ look pretty centered in the smaller screen, but it would be nice in the conatin larger screen could spread the image out more, while not cropping.
The image (of images) using ‘cover’ look off center in the smaller screen, and pretty chopped/cropped.
If theire is a way to get an image like this to appear well inj large screen, as well as, small, I’d appreciate any guidance.
In their simplest from a query will look like this:-
.jumbo-0 {
background-image: url(../images/wide.jpg);
}
@media screen and (max-width: 500px){
/* Code here applied only to screens smaller than 500 pixels wide */
/* 500px can be changed for any value that fits your needs, this is just an example */
.jumbo-0 {
background-image: url(../images/square.jpg);
}
}
Because you image is 4 images in a roughly square aspect, when the container is wide it may look better to have the 4 images arranged side by side to make a wide aspect image that fits the shape of the container.
But on the smaller screen you could swap for the square version to more closely fit the not so wide container.
Though still the aspect is not fixed so you will still get either cropping or letterboxing.
What exactly do you expect to happen? You are putting a square into a rectangular hole. So the choices are to trim the edges off the square to make it a rectangle too (crop) or shrink the square to the smallest edge of the rectangle.
If the container is full screen width you could give it a min-height: 100vh That is 100% viewport width to keep the height at least a square aspect.
With an empty container you can constrain the aspect using vertical padding, but this has content, so not an option. Using that trick you could place content absolutely on top, but that’s a slippery slope to wrongness that I would not advise for content other than image/video.
