I have a background set to cover in a div (see code below). I’m testing on a 27-inch (5120 x 2880) monitor and when the browser window is fully expanded across, the image is very cropped but when I make the window smaller, then I can see more of the image.
Is it possible to make the image appear less cropped at the larger window size using CSS? I’m not sure if you can do this by using media queries.
Think what you are asking. How can you make a real world image cover an aspect ratio different from its own without cropping in some way.
You either have the image cover the area or you use contain if you want the whole image to remain inside the viewport. Of course if you use background-size:contain you will get gaps at the edges in one direction.
The only other options are to stretch the image which would be bad for a real world image or to use the picture element to deliver a different image for larger screens where the content is more centrally focused and the outer edges of the image are not important visually.
Choosing the right image is an important part of the design process.
The image is just a closeup of a person against a background and I understand that if I had a different image where the subject was further away then I probably wouldn’t have the problem.
I know the “less cropped” remark wasn’t the best way of explaining it.
The picture element seems like a good idea - is it widely supported in many browsers?
Also, couldn’t you serve a different image at larger sizes using media queries?
Hi, thanks for the suggestion. It did adjust it slightly but I think in this case I’m going to need different images depending on the width of the browser window. I’m just trying to work out how the html5 picture element works as I’ve never used it before.
The background percentage position is applied to both the image and the container, so e.g. 40% is positioning the image level of 40% at the 40% level of the container.
Did you try other values to optimize the display?
(If you followed @coothead’s request I could have suggested another value. )
A 5120px image is too big to give to everyone so you should really just offer it to those that need it. (I’m guessing you have an imac which I believe is actually 2560px with a double density resolution (but I may be wrong).)
As you are using a background image then you could use media queries based onscreen size to deliver different images and cater for retina images that need to be double the resolution.
As I said above its not just about cropping or stretching an image but using an image that will fit the purpose you want. For example in this old demo (non retina display) I have used an image where the sea background goes wide at both sides but the children in the centre remain the focus form small mobile to 27" imac without too much trouble.
It’s all about choosing the right images to start with.
Hi Paul, sorry to come back to this. When I looked into using the picture element I realised that you can only wrap it around img elements and it can’t be used on background images in the css. Because of this I thought the easiest workaround would be to use a media query to increase the height of the div on wider screens as this will show more of the image. As mentioned I’m using a 27inch 5k retina display which according to the specs on my computer has a 5120 x 2880 pixel resolution. When I look in my system preferences though, the resolution is set to “Default for display” and this is 2560 x 1440 (which is half of the resolution that the computer spec says that I have). So just some questions if that’s ok:
As I’m trying to optimise the image display for a full screen width on a 27inch monitor, in the media query, do I target 2560px or 5120px? And why is the actual resolution half the resolution in the specs?
As I want the media query to kick in only when the screen width is larger than a 21.5 inch monitor and up to a 27 inch monitor is it best to write a combined query so I can specify a range? If yes, would the media query below work?
@media (min-width: 1920px) and (max-width: 2560px) {
div {
height: 638px;
}
}
/* Targeting a width of 1920px up to a width of 2560px*/
I’m just quite confused by the resolution and would be grateful if you could clarify things a bit.
A retina display is a double density display. It maps 1 css pixel (an abstract measurement) to 2 device pixels. Therefore a resolution of 5120 becomes 2560 css pixels. This allows for greater clarity of the display.
For example the iphone X has a resolution of 1125x2436 but each device pixel is mapped to 3 css pixels so as far as css is concerned its 375px wide. It would be impossible to use if it was 1125px css pixels as that is as wide as a desktop and much too small to read on a phone.
Therefore for crisp images on an iphoneX you would need to create them at a resolution of 1125px natively. This is not just stretching a smaller image you have to have the original image source to create it n higher resolution.
Yes you can use a range in your media queries but why would you want to?
e.g. Just use a min-width and catch anything larger
@media (min-width: 1920px) {
div {}
}
Why would you limit the width after 1920px to a max of 2560px. What about even bigger devices?
I would also avoid setting a fixed height on the div as that never works out the way you expect. Height 638px is a magic number that will make no one happy.
You are too busy chasing devices. There are literally hundreds of devices, monitors, resolutions to cope with and all are different. Just because you have a 27" screen doesn’t mean that others with a 27" screen will have the browser maximised or use the same resolution as you. I have a 27" imac and I never have the browser window maximised. It’s just much to big to be of any use and I usually have 4 windows open at the same time which is why I bought the large screen.
What you need to do is design for all screen sizes with a good fluid approach and minimum media queries.
At present we have not seen the image you want displayed and have no idea what sort of frame you are putting it in. If you can upload a demo of the page or a codepen then we can give specific advice about your problem. At the very least we would need to see the image you are using or something close to the image you are using so we can post examples of how to make it fit.
If for example you are doing a viewport fill technique for the image then there are different methods from just displaying an image at its own aspect ratio. We need to see the image in question and the place where the image is being shown with content around it etc…
Thanks again for the replies - your explanation and link relating to image size and resolution is helpful.
I didn’t think about larger devices so just using a min-width is probably better and yes I know I probably shouldn’t used a fixed height.
As everyone (including @coothead) have suggested, I’ve now created a code pen project so if you wouldn’t mind looking at it, do you think I can make any changes to the css to make the background image work better (I just obscured the image but the subject, background and size of image is how it will be once I can find a solution to this problem). As you’ll see, more of the image is shown at smaller screen sizes so I’m just trying to get it to work at the wider 27inch size.
Looking at the image you posted it looks to me as though the frame portion could be sized to stretch as it is not a real world image but some sort of fuzzy background in a frame.
e.g.
background-size:100% 100%;
That would keep the frame always in the picture.
Then I would remove the person from that image and place the person separately so that it can be resized at a different rate to the background image and also fit better with a few simple media queries.
I would also consider making that first section a viewport height screen as the image looks really odd being cut off when the next section starts.
I’m afraid I don’t like the frame effect or fuzzy background effect (but then I’m a coder not a designer). You should really avoid trying to throw classic ‘print’ designs at webpages as the web page is not a piece of paper with a finite size. I would not also use an 800k background for a simple pattern effect no matter how good it looked
Of course these are design issues and compromises have to be made along the way to achieve something that is both pleasing and workable.
.