The background-position property determines where a background picture begins. CSS Syntax is background-position: value; Values for the backround-position property include left top, left center, left bottom, right top, right center, right bottom, enter top, center center and center bottom. Other values include x% y%. The first value represents the horizontal location, and the second represents the vertical position. The upper left corner has a value of 0% 0%. The lower right corner is 100% 100%. If you only enter one number, the other will be 50%. The default number is 0% 0%. Another value is xpos ypos. The first value represents the horizontal location, and the second represents the vertical position. The upper left corner has a value of 0 0. Pixels (0px 0px) or any other CSS measure can be used as units. If you only enter one number, the other will be 50%. You can combine % and locations. There is also initial and inherit. The initial property is set to its default setting while the inherit property inherits the parent element's property.
The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. CSS Syntax is background-attachment: scroll|fixed|local|initial|inherit; Values for the background-attachment are scroll, fixed, local, initial and inherit. Scroll is where the background image will scroll with the page. This is default. Fixed will not allow the background image to scroll with the page. Local is where the background image will scroll with the element's contents. Initial sets this property to its default value. Inherit will inherit the property from its parent element.
The background-size property specifies the size of the background images. CSS Syntax for background-size: auto|length|cover|contain|initial|inherit; Values for the background-size are auto, lenght, cover, contain, initial and inherit. Auto is the default value. The background image is displayed in its original size. Length sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Percentage sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Cover resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. Contain resizes the background image to make sure the image is fully visible. Initial sets this property to its default value. Inherit again inherits this property from its parent element.
Before this edge offset, I thought I could only specify values like background-position: right bottom or background-position:70% 80% (70% from left, 80% from top), but not 20px from right and 20px from bottom. To address this problem, CSS3 has introduced the option of determining a reference point for my positioning and, as a result, determining my own 0,0 point to begin from. Instead of only writing two values (horizontal and vertical point from left to right), CSS3 now enables me to write the beginning point of the horizontal and vertical positions, as well as their offsets, such as: right 10px bottom 20px. Four values altogether. First create an empty DIV. Give that DIV a class="box". Then style the "box" DIV in the CSS file. Something like this: .box{ width: 100px; height: 100px; padding: 15px; border: solid 5px #000000; border-radius: 10px; }. Then add a background-image with a fixed size, while using the background-size property like this: .box{ background:url(images/image.jpg) no-repeat; background-size: 75px 75px; }. Set the horizontal starting point, “right”. Then set the distance from that position, in my example it is 20px. Then set the vertical starting point,“bottom” and the distance from that position. In this example it is 40px. The syntax looks like this: .box{ background-position: right 20px bottom 40px; }
CSS3 has a cool function that allows you to have multiple background images. The grammar is simple: separate them with a comma. I find it easiest/best to use the background shorthand property to specify the position, repeating, and other properties while keeping them all grouped together. What isn't clear from the syntax is which image comes first in the vertical stacking order when the images overlap. In this respect, the specification is clear, and browser implementations will follow. The first is on top, and they work their way down. The syntax looks like this: background: url(image.png) 500px 10px no-repeat, url(image-2.png) 10px 10px no-repeat, url(image-3.png); It's similar to z-index, but it's not z-index; it's parts of a unique element. It's a little perplexing to me because it's the inverse of how HTML functions in practice. If all elements have the same z-index (and are positioned in some manner and overlap), the last element, not the first, will be on top. It's not a big deal, though; you only need to master it once. The most important thing to remember is that if you use one of the backgrounds for a completely opaque / fully repeating image, put it last, not first, or it will cover up all the others.
The CSS background property is a shortcut for defining an element's background. CSS background attributes include background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin, and background-attachment. The CSS background property is used to specify and control an element's background. It is a shorthand property that allows you to define different styles for an element's background, such as color, size, image, origin, and repeat. There are numerous situations in which I would like to add an image to the background of our element or change the background color/gradient of our element. The background property's basic syntax is that it accepts all values in a single property, but I can modify it to suit my requirements.