Positioning Background Images
Explore how to position background images in web design using CSS properties like background-attachment and background-position. Understand the differences between scroll, fixed, and local attachments, and learn to place images using alignment keywords, exact units, and percentage values. Gain the skills to precisely control background image placement for improved page design.
We'll cover the following...
By default, background images scroll together with their parent elements. So, if you have a page that can be vertically scrolled, the background image moves with the page while you scroll up and down. You can change this behavior with the background-attachment property.
The background-attachment property
This property can have one of these values: scroll where the background scrolls along with the element, fixed where the background is fixed with regard to the current browser window, and local where the background scrolls along with the element’s contents.
The image below shows the difference between the scroll and fixed values.
The background-position property
In most webpages, you need more control over positioning background ...