Marathia’s Stacks

RapidWeaver stacks for the rest of us

RapidWeaver stacks for the rest of us

Stacks Image 91370

SmartFloat Stack example #6

managing background colors


start | examples: #1 | #2 | #3 | #4 | #5 | #6 | #7 | #8 | back to the product page

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.

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…