Background images – Webflow CSS tutorial (using the Old UI)


Much like the cockpit controls in a Boeing 747, there are Background Image controls for everything. And also like the cockpit controls in a Boeing
747, they give us access to immense power. With our section selected here, let’s go in
and add a Background Image. From here, we can select the image we want
and configure it. Let’s cover some of the options we have here: HiDPI will scale down the image based on
its starting resolution. And while this is an option, it’s not necessary. We can type a specific width. And as we tweak our width, we can see how
this affects tiling. We can also type in a width using percentages. If we want the image to scale larger than
the elements inside, we can use percentages higher than 100%. We also have the cover and contain options. This overrides any set width and height. It scales the image to cover our element’s
width or height, while making sure both dimensions are greater than or equal to the size of the
element we’re styling. That’s a really verbose way of saying that
cover fills out our element very nicely. Contain scales our image to contain inside
the element, never exceeding the size of the element we’re styling. For position, we can select different preset
arrows to justify our image content. We can even click and drag to make manual
adjustments to positioning, controlling the offset from the top-left. Now why is this important? Why would we use adjustments like this? Well, based on the positioning — when we
use these presets — we can affect the actual alignment of a Background Image as elements
like sections change dimensions. Let’s also tweak some of our settings here
so we can demonstrate tiling options: along a row, along a column. We can adjust these values to create all sorts
of effects. And finally, we can choose to have our Background
Image fixed. This fixes the Background Image during any
type of scroll behavior. This is just the beginning of what you can
do with Background Images. You can actually stack multiple Background Images
as layers and create all sorts of stacked effects. But Background Images give us the ability
to select an image, control its size and position, and layer it with other Background elements.

4 Comments

Add a Comment

Your email address will not be published. Required fields are marked *