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:

WPZOOM Themes with Full-width Sliders:

Capital
Diamond
Inspiro PRO
Insight
Medicus
Modena
Seasons
Venture
VideoBox

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: