How to insert a full-width image on a web page?

Hi Elise,

Do you know how we can insert a full-width image on a web page WITHOUT using Slider Revolution?

If you look at these two screenshots, it will explain the problem:

https://hnwgallery.com/fireshot-screen-capture-1189-hnwgallery-hnwgallery_com/

https://hnwgallery.com/fireshot-screen-capture-1190-home-2-hnwgallery-hnwgallery_com__page_id11288previewtrue/

Thanks very much.

Hello,

You would better try Promo banner https://demo.xtemos.com/basel/banners/ or set the image as the background on the row and insert your content inside the columns. https://wpbakery.com/video-academy/add-row-column-background-wpbakery-page-builder-wordpress/

Best Regards

Thanks Elise,

I was able to set the image as the background on the row, as per your suggestion.

This created some extra space under our logo on our Home Page. Do you know how to get rid of this extra space under our logo?

Here is a screenshot to show you what I mean:
https://hnwgallery.com/wp-content/uploads/2019/06/FireShot-Screen-Capture-1197-HNWgallery-hnwgallery_com.png

Thanks Elise,

I was able to set the image as the background on the row, as per your suggestion.

This created some extra space under our logo on our Home Page. Do you know how to get rid of this extra space under our logo? Here is a screenshot to show you what I mean:
https://hnwgallery.com/wp-content/uploads/2019/06/FireShot-Screen-Capture-1197-HNWgallery-hnwgallery_com.png

Also, you will notice in this screenshot that the image/row is still full-width on a mobile device. Do you know how we can get the width of this image/row to fit properly on a mobile device?
https://hnwgallery.com/image-1-30/

Hello,

1. Enter the page and set margin-top:-40px in the upper row settings: http://prntscr.com/lexqqs

2. If you want the image to be scaled add the image as a single image element and remove the row background. It will fit the row, however, it will be minimized on mobile.

Best Regards

Thanks Elise,

When I was using the row background element, it stretched the image to the full-width of my desktop screen (and this was perfect). And it resized the image on my iPhone when I was holding the phone horizontally. But for some reason, it did NOT resize the image on my iPhone when I was holding the phone vertically. In other words, this configuration worked perfectly, except the image did not resize on a mobile phone if the mobile phone was held in the vertical position.

So I followed your advice and added the image as a single image element and removed the row background element. However, the image does not stretch to full-width on a desktop screen, as shown here:
https://hnwgallery.com/fireshot-screen-capture-1200-hnwgallery-hnwgallery_com/

Do you know to fix this? I can use the row background element or the single image element, but I need the image to stretch to full-width on a desktop screen, but also resize on a mobile phone screen in the vertical position.

I look forward to your thoughts.

Hello,

You can assign a class to the row and add the image as a background by means of custom CSS and write cover for desktop and contain for mobile and iPad.

Best Regards

Thanks very much Elise.

I appreciate all your help.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts