Computer Science 318

Learn

Background Image CSS

background-image:url(images/image.jpg);

background-image

Instead of using an <img> element in the HTML an alternative is using the CSS property background-image. Keep in mind that background images are not semantic HTML tags, therefore screen readers will not announce the presence of background images. Background images should only be used for decoration and not critical information.

Above is an example of the CSS declaration for a single background image.

Hint: You will need url or file path to tell the browser the source of the image. If you place the image within an images folder remember to indicate that in your path.

background-image:url(images/image1.jpg), url(images/image2.jpg);

Background-image you can have more than one image in the declaration. To do this you will separate the images with commas like above. They will be displayed in the order they are in the CSS declaration.

background-image:url(images/image.jpg);
background-repeat: repeat;

background-repeat

Defines how background images are repeated. A background image can be repeated along the horizontal (x) and vertical (y) axes, or not repeated at all.

Values for background-repeat:

• repeat-x - The image is repeated only horizontally.
• repeat-y - The image is repeated only horizontally.
• repeat - The image is repeated as much as needed to cover the whole background image painting area. The last image will be clipped if it doesn't fit. (default).
• no-repeat - The image is shown once.
• space - The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. The background-position property is ignored unless only one image can be displayed without clipping.
• round - As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px.

When defining the background-repeat for multiple images use commas to separate the values.

background-image:url(images/image.jpg);
background-repeat: repeat;
background-position: top;

background-position

Defines the position of the background image within the element.

Background-position: has a variety of values that can be used to define the image's position. By default all images start in the top left corner of the HTML element they are assigned to.

Values for background-position:

• keywords: top | bottom | left | right | center
• percentages
• edge offsets: for example "bottom 10px right 20px"

When defining the background-position for multiple images use commas to separate the values.

background-image:url(images/image.jpg);
background-repeat: repeat;
background-position: top;
background-size:cover;

background-size

Values for background-size:

• cover - Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
• contain - Scales the image as large as possible without cropping or stretching the image.
• percentages
• em, rem
• pixel

When using one value with background-size the value is the width size and the height is scaled accordingly, if there are two values the first is the width and the second is height.

When defining the background-size for multiple images use commas to separate the values.

CSS Pseudo-Classes

button{
    background-color:blue;
}
button:hover{
    background-color:red;
}

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it. In the CSS example above the button would be blue, except when the user hovers their cursor over the button, then it would turn red.

There are many different types of pseudo classes. Here is a list of all possible pseudo classes. Below are some of the most basic pseudo classes, we will be adding more to our repertoire in future labs.

Location Pseudo Classes

These pseudo-classes relate to links, and to targeted elements within the current document.

:visited

• Matches links that have been visited. This is useful to visual show the user that they have already clicked on a link.

:link

• Matches links that have not yet been visited. This is useful to visual show the user they have not clicked on the link.

User Action Pseudo Classes

These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

:hover

• Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.

:active

• Matches when an item is being activated by the user, for example clicked on.

Embedding a Video

Embedding a video iframe from Youtube is very easy. Follow these instructions to accomplish it.

Locate the video you would like to embed.

Click on the share icon below the video.

In the share options click on embed

Copy the iframe code.

Paste the iframe into your HTML document were you want the video to appear.

Now you will be able to see the video in the browser