Recommendations for Themes with Full-width Sliders

This tutorial will help you understand how images are handled and cropped in themes with full-width (not fullscreen) sliders on front page:

While full-width sliders look good on any website, there are some things you should consider before deciding which kind of images to use in them in order to avoid important areas to be cut.

The good and the bad of using “background-size: cover” in CSS

We’re using a CSS technique called background-size: cover, because this is the easiest way to fill a full-width slider with an image.

Here you can see more details and demo of this CSS property:

Background size demo
Background size demo 2

---

In order to explain things easier, we’ll provide an example.

Let’s take the following image in landscape orientation and insert it in a full-width slider:

Since most of the full-width slider have a fixed height of about 500-600px, it’s hard to keep entire image visible, so some of its areas will be cut from the edges to the center:

 

Shown above is the slider from Venture theme with a fixed height of 520px on large monitors.
As you can notice, the slider tries to fill entire area with the image, without affecting its original aspect ratio.

Demo:

You can see this in action on the following link.
Be sure to resize the window to see how the image will change on different resolutions.

Conclusions

As can be noticed from the example above, on larger monitors the image will be cut the most. This happens usually on larger than 2000px wide monitors.

Wondering why? Because the original image has the size 2000x1333px, while the slider on a 2000px wide monitor has the height of 520px:

Recommendations

We highly recommend you to upload large images in your sliders, and don’t crop them to match your slider height. Any image with the minimum size of 2000x1300px will be displayed fine across all devices.

✖   Don’t use portrait-oriented images.

✖   Don’t use images in which the focus area is not located at the center (at least vertically):

✖   Don’t use images with large typography at all, or make sure that the text is small and located at the center:

Related Docs

• Change text strings in WPZOOM Themes using “Say What?” plugin
• How do I set up my slider?
• How to Add a Featured Image to a Post or Page
• How to add advertising banners
• How to Change the © Copyright Notice in the Footer
• How to Change the Cropping Area of Featured Images in WordPress
• How to Create a Contact Form in WordPress
• How to Fix 404 Errors on Custom Post Type
• How to fix Google Maps not loading in Unyson Page Builder
• How to fix incorrect Facebook thumbnails
• How to hide “comments are closed”
• How to remove “Designed by WPZOOM” copyright from footer
• How to set up author pictures (Gravatar)
• I marked a post as Featured but it doesn’t appear in the slider
• Is my WPZOOM Theme Compatible with Gutenberg?
• Slider troubleshooting: why isn’t my slider working?
• Understanding the Structure of WPZOOM Themes
• WPZOOM themes’ file structure
• WPZOOM Usage Tracking