Week 8ART 239 Web Design I

Class Notes for Monday 3/18/19, Wednesday 3/20/19

Agenda

Download the Class Presentation PDF

Full image backgrounds

auto
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
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
contain
Resize the background image to make sure the image is fully visible
initial
Sets this property to its default value.
inherit
Inherits this property from its parent element.

Positioning

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

static
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
relative
Positioned relative to its normal position. Setting top, right, bottom, and left properties will position the element away from its normal position.
fixed
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.
absolute
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.
sticky
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

z-index

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.