How to always display a full-width background image on any screen size?

Hi there,

We previously asked a question similar to this about how we can do so that the background images always display complete regardless of the size of the screen.

You gave us some suggestions, but we did not have the expected results.

The only thing that helped a little was to change the size of the images to 1500 x 540 px. But depending on the size of the screen, the images are still showing cropped.

Is there a possibility to solve this situation?

In private I share the link of our website so you can see what I say. For example, on the link I’m sharing in private, if you resize the screen, there are parts of the girl that will be shown and other parts will not. We want the full image to always be shown regardless of the size of the screen.

We appreciate your help a lot.

Thanks!

Hello There,

Thanks for writing in!

Sorry for the inconvenience if you haven’t achieve yet what you are trying to do.

With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps in explaining how the background image, the background container and the image size affects the outcome of the background image.

2 Likes

Hi @RueNel,

Many thanks for your reply.

One more question regarding the background images:

In our case, what is the ideal size that you suggest in order to have a better result? We use the “background-image: cover”. Our current background image size is 1500 x 540 px.

Your help is highly appreciated!

Thanks!

1 Like

Hi Charles,

A high quality image with aspect ratio of 16:9 pixel is an ideal size of a hero image (e.g 1200 x 675px, 1600 x 900px, 1920 x 1080px).

But to clarify, resizing your image will not resolve your background-image issue, the background-image is responsive in its own way. Your page will be viewed on different screen sizes and on portrait oriented mobile phones, the containers/section will respond to that sizes and so does the background-image.

You can not fit a landscape image on a portrait container, without squeezing/stretching or cropping it.

Your best option, in this case, is to utilize the background-position property. This way you can control which area of the image is to focus, and which is to cut when the container gets narrowed.



More information about how background-image works here.

If you really want the image to be 100% fit on the container regardless of the screen size. Then make it a Featured Slider Below Masthead.

Slider Revolution Documentation

You can install Slider Revolution under PRO > Validation > Extensions

Hope that shed some lights,
Thanks,

1 Like

Allow me to jump in here. I must say that RueNel & Friech’s replies above are so significant they should be made basic reading for everyone learning to design their 1st website. I wish I’ve read them earlier & saved myself much time.

May I ask 2 questions based on the above tips:

  1. Why is using a Slider Rev featured slide a solution? I’m at this point learning to do one. But I’m having massive problems making my images look decent on all devices. Are you referring to the solution of using a different image for the 4 portviews on one slide with the “visibility” feature?

  2. I’ve taken the advice to use an image that’s 1920x1080 & using “cover”. For one slide I’m doing, it looks great on the mobile portrait, but when I tilt my phone sideways to landscape, this image got bloated up & magnified, looking unnatural. What size should the slider (grid size) be to prevent the image from looking exaggerated in mobile landscape? Or what considerations should I bear in mind to get the best result?

I wish there’s a chart showing the different outcomes in effect pictorially using the different parameters - ie different image sizes, landscape or portrait, or square shape, versus different grid sizes, versus different devices. Also background image vs image that’s not a background but a layer. Then we can adapt our design instead of fumbling around by trial & error & agony😂

1 Like

Hi @iamwithU,

I agree, it shares the same concept with CSS backgrounds and styling and just made it into configurable options in the builder.

About your two questions,

  1. Yes, the device view and its feature to scale its layered with relative offset. That way you can arrange the layers per device it’s being viewed instead of forcing the single view that not fit to the aspect ratio of a device.

  2. If your slider is full-screen, then it’s unavoidable. But if it’s standard responsive layout then the slider will just scale down maintaining its aspect ratio. There is no actual solution since it depends on user preference with many difference devices from standard and non-standard, hence, there is no available chart. And if you’re referring to portrait of the equivalent of landscape 1920x1080, then it should be 1080x1920 or 979x1740 (for a full-screen slider)

You can use this online to calculate the aspect ratio https://andrew.hedges.name/experiments/aspect_ratio/

So yes, when it comes to device specific view, slider is the best option that using standard background that doesn’t scale based on its aspect ratio.

Thanks!

Thanks Rad for your kind reply. I’m not sure I follow your point 2: “fullscreen slider”.

A) My background image is big 1920x1080 (“cover”) & can fill up the whole screen. RueNel’s 1st Point says problem is only if my image is smaller, then it’ll be stretched. Why is my image stretched just because the device goes from portrait to landscape view?

B) The other odd experience I have is this: I sized my background image to 1920 x1080, which is bigger than my custom grid size of my mobile 768x 1024. Yet, when I set “contain”, there are large bands of emptiness on top & below the image. (This happens for “standard”, “fullwidth” & “fullscreen” slider settings.) Shouldn’t my large image be able to be contained in that whole grid size? I wouldn’t mind the cropping off width-wise. In the end, I had no choice but to change to “cover” - but this led to stretching of the image, making it look unnatural. What would you advise to have the image not being stretched?

Grateful for the discussion in this thread, which is very educational.

Hey @iamwithU,

A.) I’m sorry but I’m not sure by what @RueNel meant by stretch. Maybe he meant scaling. When background size is set to cover or contain, the image is actually scaling. Scaling preserves the aspect ratio while stretching does not respect the aspect ratio. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images

B.) Cover and Contain background sizes deals only with aspect ratio (@friech also said this above) though if you are using a small background image to a huge container, your image will look blurry because of scaling. There’s no workaround to prevent an image set to cover to not scale. It’s a spatial limitation. You need to use different background-position under different screen break points or media queries to make your image look good in different devices.

In Cornerstone, a none coding and currently the supported method is to use different sections and hide or show them using the Hide During Breakpoint feature.

Thanks.

Thanks for your prompt response.

I don’t follow you. I am using an image that is 1920 X 1090. Isn’t that big? Why is there a need to scale?

I don’t understand your point in (B) " if you are using a small background image to a huge container. Isn’t my image bigger than my container, which is only 768 x 1024?

Hi @iamwithU

I believe @christian_y was describing the situation in general, if you have this issue live on any site, please share its link so we can investigate why the images are looking blury although they are in a large size.

I would also second what @christian_y mentioned that the supported way is to use different sections and hide or show them using the Hide During Breakpoint feature.

Thanks.

Thanks Alaa for offer to investigate. The problem is not blurr, but stretching or enlarging of an already LARGE image.

I’m guessing the clue is found in Friech’s input above - we can’t fit a landscape image into a portrait container, vice versa.

I’m just intrigued why a BIG image still needs to be “scaled” into a smaller container. And how - so I know what image to use to provide for some allowance of scaling.

Rad & Friech, care to shed some light on this mystery?

Hey @iamwithU,

@Rad and @friech are not available at this time.

The most probable cause of your problem is aspect ratio mismatch. And yes, that is explained by @friech and I also referred to that. I’ll attempt to explain again. Please watch my explanation in this screencast. If you’ll be using parallax, please see this the continuation.

Sorry if you misunderstood what I said and here’s my response to that.

Yes, that’s big. But, that is not the point here. As I’ve said, Cover and Contain only deals with aspect ratio. If you have set the background to cover and view your site in 1024 x 768 screen, your 1920 x 1090 image will scale down. The 1090 height will scale down to 768px. The 1920 width will scale down also but this time, since the height is already covered, it stops to this point. Otherwise, it will shrink the image thereby distorting it. Please see the Stretching an Image section in this article I linked to previously to see a distorted image. Scaling is not only enlargement just for your information.

I’ll repeat again, cover and contain only deals with aspect ratio. To have a firm grasp of how this works, you will need to understand what is aspect ratio first.

Regarding what I said about “blurry”, I said “if” your image is small. I just gave a conditional situation to add to your understanding.

If you still don’t understand, please open a separate thread detailing your setup and what your design goal is. Also provide the URL of the page and post the link to this thread for reference.

Thanks.

Slider Revolution works for us.

A huge thanks to the team for the support!

You’re most welcome!
We’re glad we were able to help you out.

Thank you Christian for your video - it was enlightening. The takeaway for me is “aspect ratio” - the importance of choosing an image that has the same proportion as the container.

I appreciate your efforts in coaching us along the way​:blush::muscle:

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.