Class Notes for Monday 3/18/19, Wednesday 3/20/19
- Full background graphics (Cover)
- Positioning (static, absolute, relative, and fixed)
Download the Class Presentation PDF
Full image backgrounds
- Default value.The background image is displayed in its original size
- 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.
- 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"
- Resize 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
- Resize the background image to make sure the image is fully visible
- Sets this property to its default value.
- Inherits this property from its parent element.
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). https://www.w3schools.com/css/css_positioning.asp
- Default value. Not affected by the top, bottom, left, and right properties. Not positioned in any special way, just according to the normal flow of the page
- Positioned relative to its normal position. Setting top, right, bottom, and left properties will position the element away from its normal position.
- Positioned relative to the viewport (always stays in the same place even if the page is scrolled). Top, right, bottom, and left properties used to position the element.
- Positioned relative to the nearest positioned ancestor. If an absolute positioned element has no positioned (any positioning property except "static") ancestors, it uses the document body, and moves along with page scrolling. Top, right, bottom, and left properties used to position the element.
- Positioned based on the user's scroll position. Toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place. Does not work in every browser
When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element with greater stack order is always in front of an element with a lower stack order.