DIVI: Fullwidth Slider Image with integrated text – perfectly controlling the responsive behaviour on all devices

Sliders, especially when full-width, usually use a flexible clipping of a background-image with an overlayed real HTML text. This is one way to achieve responsiveness. If we want to use an image that has the text integrated, for example with quotes that we want to style pixelperfect, responsiveness and full-width become challenging yet not unsolvable. Here’s the trick in DIVI:

Solution #1

The first solution uses a png with transparency, fading the sides into the background color. Create a fullwidth-slider, assign the png as background-image and set your chosen background-color. Then use this code, replacing #post-777 with the id of your page or post and the px and percentage settings to your situation. This is only suitable for images with anyhow quite unitary background, because the fade to the sides will also be visible in smaller resolutions where practically we would prefer to continue the image to the edges.

Solution #2

A second solution offers to design the fullwidth banner up to its edges, e.g. 1920px wide. Create a fullwidth-slider, assign the jpg as background-image (or you can also here use a png with transparent fadeout and set your chosen background-color to ensure that on even bigger resolutions it will still continue smootly). Then use this code, replacing #post-777 with the id of your page or post and the px and percentage settings to your situation. The advantage is full freedom, we can design the image up to the edges to also look amazing on big screens all the way.

Solution #3

Another solution, that only works if the background is consisting in one single color along the left and right edge (it is enough to be consistent across the whole height, the color on the left and right edge can be different, so gradients are possible), exists by using two different fullwidth-sliders disabled on different devices. Another disadvantage: It only works on websites with 1100px width, since exactly there the breakpoint between desktop and tablets sit. If this is not an obstacle, we can create an image with 1100px width in one fullwidth-slider set to Actual Size and a background color, disabling it for Mobile and Tablet. This slider makes sure the image is not stretched, but displayed in its original size, while the background color fills up to the edges of the browser. If a gradient is used in the image, we can set the background of the slider as a CSS gradient as well, assigning it to the .et_pb_slides class while making sure the .et_pb_slide is transparent:

For this solution we need again the padding height trick which turns out to be the fundament of all this text-in-image-fullwidth-slider experiment:

The slider here is only the container for the fullwidth-image, and it could work as slider if all slides have the same gradient background, but there can not be assigned different gradients to different slides.

Update 20.4.2017: Solution #4

Instead of a single-colored background, we can also use a gradient, making it a very nice solution. The background gradient will be applied as long as the screen resolution is bigger than the image width, and from that moment, the image will behave perfectly responsive and thanks to the padding trick keeping its proportions. For this we need to create to fullwidth-slider modules:

1. the background image size set to “Actual” and enabled only on the desktop resolution.
2. the background image size set to “cover” and enabled only for tablet and phone.