Thanks for writing in and I’ll be happy to run you through the Size & Position controls for the image layers when utilizing advanced backgrounds.
The Size and Position inputs for this control grouping correspond to the CSS properties
background-position respectively. Make sure to click on those links to visit a fantastic CSS reference that will include much more information on those properties for you to review if needed.
Out of the box, these inputs are set to
center respectively, which will provide you with a full-sized background image that will cover the entire area you are working on (sometimes called a “hero image”). This is typically one of the more common ways in which people tend to utilize background images, so it is a sensible default for the majority of users. It will yield the following result:
For a situation like you’ve described where you have an image you’d like to position down in the bottom right corner of the Section you’re working on, let’s walk through that step-by-step now. First, we will swap out our previous background image with our intended graphic. For this example I’ll be using a styled “23” that we’ve used in some other demo videos. Changing out the image will result in the following:
Note that since we haven’t adjusted any of our Size or Position parameters, our small graphic is still covering all the available space of the background. The first thing I would do is adjust the Size parameter to get my image sized appropriately:
background-size CSS property can take certain keywords like
contain, but it can also specify a specific image size using values such as
%, et cetera. If inputting a specific size, if only one value is present, that value will be utilized for both horizontal and vertical sizing. For example, inputting
100px would mean the background image would be sized to
100px wide and
The value I’ve input of
265px auto is specifying both a width and a height. This says that the image should be
265px wide, and the height should
auto size based off that. The reason I’ve picked
265px wide is because the image is
530px wide originally, so we divide it by half to ensure that it shows up appropriately on devices with high pixel density. The
auto just makes things a little simpler without having to input the specific height needed.
Next, we’ll adjust the Position input. Similar to Size, there are keyword values that can be accepted such as
center, or we can use specific values to position our image exactly as we want. Also similar to Size, we can input one value that will be applied to the both horizontal and vertical position, or we can specify each axis independently. First, let’s see what using a keyword value will do:
Using the keywords
bottom right together, we have positioned our image in the intended area. That being said, this this may not be the exact desired positioning, as you may wish to have it offset from the side a bit. To do that, we’ll have to switch to using
% values along with the CSS
calc() function to perform a little positioning magic.
To achieve the same positioning using
% values, you could input
100% 100% instead of
bottom right. You can think of
% values for
background-position as a scale, where you can place your image anywhere along those lines both horizontally and vertically, with
0% being the start and
100% being the end. You could easily achieve an “inset” look by using something like
90% 90%, but keep in mind that the background image will move as your screen is sized up and down using this, since these percentage values will always be changing relative to the size of the container. If you want to keep a consistent spacing away from the edge of the background—say
35px—you would need to use
calc(), which allows us to perform math operations by combining units. For this example, we would input
calc(100% - 35px) calc(100% - 35px), which is instructing the image to be positioned
100% along both horizontal and vertical axes, but then subtracting
35px away from that original position. The end result would look like the following:
We can also use
calc() to add some extra spacing. For example, let’s say you wanted your background image to always overlap the edge of the Section by
35px, you would use
calc(100% + 35px) calc(100% + 35px) instead, where you are adding the
px value to the
% value, which would result in the following:
Armed with this, you can effortlessly position background images anywhere along the spectrum of size for the element you’re working in, and even make pixel-perfect adjustments utilizing
calc() if needed.
Hopefully that helps to point you in the right direction.