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

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

3. Background Image

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

5. Example of Repeat Image

6. Repeat Image & Readability

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

8. Prevent Background Image from Scrolling background-attachment

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

10. Control by: Percentages Pixels Mixing

11. 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.

12. 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

13. 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

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

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

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

17. 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

18. 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)

19. Content, padding, borders, margin

20. 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”

21. For additional experimentation: See this link: http://vivifystudios.com/articles-css-inline- block/

22. Adding Borders

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

24. 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

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

26. 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

27. 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

28. 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.

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