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

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/https://home.comcast.net/~cherie1/Class/smbkgnd.jpg”);|

}

Background Image

To Make the Image Repeat

– background-image: url(“images/https://home.comcast.net/~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:

• http://vivifystudios.com/articles-css-inline-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-colorAny valid color value

Border width border-width

Any valid unit (usually “px”)

Border style border-styleSet 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