2R CSS Background Properties

Background Position

The background-position property sets the position for a background image. You can choose from several value choices: top, bottom, center, left, right, and more. The values can also be determined by percentages, pixels, or a combination of a word, pixel, and percentage.

Background Attachment

The background-attachment property sets a background image position and decides if it will be fixed or scrolling as a user scrolls down a page. If the background image is fixed, a user can scroll down a page with the words moving and the image will stay in the same place. If the background image is scroll, and if the background image is at the top of the page, the user will eventually see the image disappear at the bottom of the page as they continue scrolling through the text.

Background Size

The background-size sets the size of a background image. The background image will always fill up the space whether it repeats/duplicates itself to fill the space or whether it enlarges itself. The value entered for the background-size property determines how the image will fill the space. Using the contain value will have the image at it's original size and repeat itself to fill the space. Using the cover value will enlarge the image and fill the space.

Background Edge Offset Value

The background-position can be customized in several ways. In addition to using percentages, pixels, and top/bottom/center/left/right text to position the image, all of those can be used together to offset the image. For example, the code to offset a background image which uses text and pixels could be written as background-position: bottom 10px right 20px;

Background Multiple Stack Order

When using multiple backgrounds, the stacking order is to have the main background at the bottom and anything you want to have in the front above it in the code. The main background that you want in the back should be the last line of code in the background css property.

Summary

Overall, there are several ways to adjust the background property in CSS and add multiple backgrounds. Backgrounds can be adjusted with a variety of CSS background properties and values.