CSS: Class 1 Background Images, Controlling Position of Background Images, Add Padding to Page Elements, Add Borders to Elements on a Page

Add Background Images Looks like this (put after CSS statement): body { –Background-image: url(“images/ et/~cherie1/Class/smbkgnd.jpg”);| }

Background Image

To Make the Image Repeat –background-image: url(“images/ et/~cherie1/Class/smbkgnd.jpg”);| –background-repeat: repeat-x;| –}

Example of Repeat Image

Repeat Image & Readability

Controlling the Position of the Background Image Use the background-position property to control where the image appears within an element

Prevent Background Image from Scrolling background-attachment

How to Control Position of Image Default position of background- position is top-left corner of element Control by providing positions to this property

Control by: Percentages Pixels Mixing

Choices: Use pair of percentages to reference a relative distance from the top-left corner Example: –background-position: 50% 50%; centers the image within the element.

More Choices: Specific-length measurement: background-position:25px 50px; The above positions the top-left corner of the image 25 pixels from the left edge of the element and 50 pixels from the top edge

Mixing Percentage & Pixels background-position: 25px 100% This positions the image 25 px from the left edge of the element and at the bottom of the element

CSS Keywords top left right bottom Center Example: background-position:right

Background Shorthand Property Use when applying background color & image. It also sets repeat, position, and attachment

Looks Like This: body { background:#fff url(images/smbkgnd.jpg) no-repeat bottom right;| }

Add Padding to Elements of a Page Looks like this: padding-top padding-bottom padding-right padding-left Values usually set in pixels or percent

Context Every block level element exists within box that is made up of 4 key sections: – content (the element’s inner html) – padding (between content and border) – borders (outer edge) – margins (distance from border to neighboring elements)

Content, padding, borders, margin

Definitions Content: what’s in the element (text) Padding: what surrounds the text next to the box. What is between the content section and the border Elements are either block or inline: Block (paragraphs). Occupies own space on page Inline. Exists within a larger block of text. Does not need to define own space. Note: other terms used are “float” and “table” for “block” and “inline”

For additional experimentation: See this link: block/

Adding Borders

Borders Looks like this: border-bottom-color: #5e7630; border-bottom-style: solid; border-bottom-width: 2px;

About Borders Invisible by default Interesting visual effects can be achieved The border defines the interior area of the box Background colors fill to the outer edge of the border Background images positioned relative to it

CSS Borders have 3 Properties 1.Border color border-color 2.Border width border-width 3.Border style border-style

CSS Borders have 3 Properties Border color border-color Any valid color value Border width border-width Any valid unit (usually “px”) Border style border-style Set by keywords: Dotted, dashed, double, groove, inset, outset, ridge, solid

CSS Border Styles When using a color with a dotted or dashed line, the background color will show through as it fills to the outside edge of the border Styles that contain shading ( groove, inset, outset ) use browser-determined shades of border color Distance between lines in double style is determined by browser

Removing the Border none and hidden Renders the same way With tables, hidden causes cells to collapse into one another, eliminating the default cellspacing. None does not do this.

Miscellaneous Each side of box can have the border set individually Example (top border): border-top-color, border-top- style, and border-top-width