Example #7: managing background images

The SmartFloat stack has some advanced settings for managing background colors and background images.

These options are especially important when those images or colors are semi-transparent.

This page explains the solutions for background images with opacity. For more information on semi-transparent background colors, see example #6.
Below, a background image is used for the wrapping element, but not for the floating element. I agree it’s an ugly image, but it helps showing what’s going on.
Things look great on wider screens, but on smaller screens the background of the top element is missing.
This is the floating element. It has no background image, so on screens smaller than 768px, it does not look great.
This is the wrapping element. It has a background image.

Some filler text to make the floating element bigger than the wrapping element: On screens wider than 768px, this element wraps around the element on the left (the floating element).

On smaller screens, this element is shown below the floating element.

Some filler text to make the floating element bigger than the wrapping element: Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Setting the background image is on the floating element as well does not solve the problem.Things look great on smaller screens, but on wider screens the two background images are on top of each other:
This is the floating element. It has the same background image as the wrapping element, but on screens wider than 768px, it does not look great.
This is the wrapping element. It has a background image.

Some filler text to make the floating element bigger than the wrapping element: On screens wider than 768px, this element wraps around the element on the left (the floating element).

On smaller screens, this element is shown below the floating element.

Some filler text to make the floating element bigger than the wrapping element: Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

When the option below breakpoint: use the background image of the wrapping element is selected, the background image of the wrapping element will be applied to the floating element, but only when they are shown below each other on small screens:
This is the floating element. It has no background image on screens bigger than 768px, but on screens smaller than 768px, it gets the same background image as the wrapping element.
This is the wrapping element. It has a background image.

Some filler text to make the floating element bigger than the wrapping element: On screens wider than 768px, this element wraps around the element on the left (the floating element).

On smaller screens, this element is shown below the floating element.

Some filler text to make the floating element bigger than the wrapping element: Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Just like with the background color options, there’s also an option below breakpoint: use a different background image for a surprising effect on small screens:
This element has no background image on screens bigger than 768px, but on screens smaller than 768px, it gets its own background image.
This is the wrapping element. It has a background image.

Some filler text to make the floating element bigger than the wrapping element: On screens wider than 768px, this element wraps around the element on the left (the floating element).

On smaller screens, this element is shown below the floating element.

Some filler text to make the floating element bigger than the wrapping element: Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Change the width of your browser window to see the responsive characteristics of the SmartFloat stack.
© 2015-2017 Marathia Web Design | Contact