Example #6: managing background colors

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 colors with opacity. For more information on semi-transparent background images, see example #7.
Below, a semi-transparent background color is set for the wrapping element, but not for the floating element. Things look great on wider screens, but on smaller screens the background of the top element is missing.
This element has no background color, so on screens smaller than 768px, there’s no background color. Does not look great.
This element has a background color and opacity.

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 semi-transparent background color is on the floating element as well does not solve the problem.Things look great on smaller screens, but on wider screens the two backgrounds are on top of each other:
This element has also a background color and opacity, so on screens bigger than 768px it does not look great.
This element has a background color and opacity.

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 color of the wrapping element is selected, the background color and opacity of the wrapping element will be applied to the floating element, but only when they are shown below each other on small screens:
This element has no background color on screens bigger than 768px, but on screens smaller than 768px, it gets the background color and opacity from the wrapping element.
This element has a background color and opacity.

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.

Wait! There’s more! There’s even an option below breakpoint: use a different background color:
This element has no background color on screens bigger than 768px, but on screens smaller than 768px, it gets its own background color and opacity.
This element has a background color and opacity.

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