Full-width Image Issues After Update - URGENT NEED FIX

Hi, I have tested this with multiple sites that had no issue before and now all sites are doing it after newest update.

If you create a new blank site with newest version of pro and each page set to blank - no container-header footer- global container set to off.
Full width feature comes up short. You cannot set an image, image background, Slider Revolution image … to expand to full width. You can test yourself on any site.
My resolution on my PC is
2880x

and

1600x

Need update urgently.
THANKS!!!

Hey @ronei1682,

What do you mean by

I have followed the setup you described in my test site and the image and Slider Revolution spans fullwidth.

Would you mind providing the URL of the page where this issue is happening?

Thanks.

If an image resolution is:

1600x1068

It appears that this image size breaks the full-width attribute to stretch as screen resolution grows beyond 1600x.

Can you test an image with same size?

Also tested an image resolution of:

1600x849

Same issue. So looks like an issue with any image size 1600x…

But if i make the image 2000x

It will expand to full-width…

And these image sizes work on older versions of pro.

Thanks for any help in this matter!

Also tested with image size 1000x

Same issue.

Are you able to duplicate the same on your end?

Hello @ronei1682,

We cannot duplicate the issue from our end. When any image used as a background image, the width of the background image will remain the same if you set the background size as auto. For example, a 1600px image set as a background using auto when viewed in a larger screen will only display 1600px image or the actual image width. As soon as you set the background size to cover, then the 1600px image will expand and cover the whole width of the browser screen.

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.

If nothing is helping, provide us the url of the page with your 1600px in it or at least the access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thanks.

how to set the image to cover - in pro newest version?

Hello @ronei1682,

If you are using the latest version of the theme, you should be able to set the background size in the Advanced background options.

And if you are not seeing the background options, please go to Pro > Settings > Permissions > User Preferences > Advanced Mode and set it to “Always ON”.

Hope this helps. Kindly let us know.

Yes , but where is the feature under:

image element

or

revolution slider? (Also set to cover in its settings)

These are the places where it doesn’t work.

Hey @ronei1682,

There is no cover option for the Image element nor the image in the Image Element can be set to 100%. The reason for this is you will need to use a quality image for the display/monitor you intend to support. For example, if your monitor resolution is 1920 x 1080px, you should use an image with a minimum resolution of 1920px. If you’re going to support Retina devices, you need double than that. If you use lower than that, the image element will display the native resolution of the image even if you set the Image Width option to 100%. Take a look at the screenshot below for a visual example.

Through custom CSS, that image can be set to 100% but that would look blurry in large screens. This is true if you’re using an image as a Section background. Try using a 200px image to see what I mean. Though it will span fullwidth or 100% or cover the screen, it would look blurry.

Below, I’m using an image that is larger than my monitor’s resolution. It will span fullwidth out of the box provided that I don’t enable the Retina support option. If I’m going to support Retina screens, the image must be double than that.

Slider Revolution’s Image layer can be set to 100% but again, you need to take into account the pixelation (blur).

Hope that helps.

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