Background

Introduction

K01a - (2:34)
- Now it's time for a background check!
- HTML's background image limitations:
  - Tiling only
  - No positioning
  - No fixed position
- To apply a background to an entire page, use the body element.
- Backgrounds are not inherited.
  - However, elements are inherently transparent, so background colors set to parent elements will still appear through transparent child elements. This is not inheritance but it appears as if it is.
- Background properties overview - here are the five background properties with example values:
background-color: #E97C23;background-image: url(images/hero.jpg); background-repeat:repeat-x; background-attachment:fixed; background-position: center top;

background-color

K01b - (3:04)
- Avoid background colors that will not work well with your content.
- Use any standard css color specification method:
  - Hexadecimal - long or short
  - rgb percentage or integers
  - Named colors

The mainContent div has its own
background-color & background-image
	This table has it's own background-color The default background-color for elements is transparent. Defining background colors overrides the default. This is why the table color is seen instead of the page's background, and the row's color instead of the table's, and cell's instead of the row's.
		This cell has its own background-color

This row has its own background-color.

This row has its own background.		This cell has its own background-color

background-image

K01c - (1:32)
- Avoid background images that make text or other content difficult to read or properly perceive.
- You can blend a background gradient or similar image into a background color.
- Syntax: url (path to file);
  - background-image: url(http://www.w3.org/html/logo/img/html5-display.png);
- The path can be local or remote.
- Note that unlike the <img> tag, there is not need to specify the background image's dimensions.

background-repeat

K01d - (4:13)

This image is designed to tile in all directions seamlessly

This image is designed to tile in all directions seamlessly	Diagonals as background	Gradient image	Gradient as background
	A New Slant On Life! The default of background images is to tile endlessly horizontally and vertically. The background image for this cell was created in a manner that allows it to seamlessly match its right edge with its left edge and its bottom edge with its top edge. Tiling allows designers to take advantage of the default that background images have which causes them to tile in all directions. This provides the appearance of a larger image whilst using just a small one. Such images can be found or generated on the web at various sites. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis.		Making the Grade! This section's background uses the image of the linear gradient on the left. This cell also has a background color that matches the brighter color at the bottom of the linear gradient. The background image is set to repeat-x. This is what provides the nice blend. Making the image narrow keeps the image file size small. By default, the gradient image would have repeated itself vertically after its height has been fully revealed by its container. In other words, at the point in this background where the entire length of the background image has been accommodated, we would then see the distinct darker top edge of the image as the image begins to repeat vertically. But we do not. This is because the CSS used for this background image is as follows: `background: url(images/grad.jpg) repeat-x;` The gradient's lighter color at the bottom blends seamlessly into the cell's background color. This is a standard method of creating a nice background. Note that normally background images of this nature would be only 1 pixel wide, but I have made it 20 pixels wide so that it is easier for you to see it.

Diagonals as
background

Gradient image

Gradient as background

A New Slant On Life!

The default of background images is to tile endlessly horizontally and vertically.
The background image for this cell was created in a manner that allows it to seamlessly match its right edge with its left edge and its bottom edge with its top edge.
Tiling allows designers to take advantage of the default that background images have which causes them to tile in all directions. This provides the appearance of a larger image whilst using just a small one.
Such images can be found or generated on the web at various sites.

Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque.

Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum.

Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque.

Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis.

Making the Grade!

This section's background uses the image of the linear gradient on the left.
This cell also has a background color that matches the brighter color at the bottom of the linear gradient.
The background image is set to repeat-x.
This is what provides the nice blend.
Making the image narrow keeps the image file size small.
By default, the gradient image would have repeated itself vertically after its height has been fully revealed by its container.
In other words, at the point in this background where the entire length of the background image has been accommodated, we would then see the distinct darker top edge of the image as the image begins to repeat vertically.
But we do not.
This is because the CSS used for this background image is as follows:
background: url(images/grad.jpg) repeat-x;
The gradient's lighter color at the bottom blends seamlessly into the cell's background color.
This is a standard method of creating a nice background.
Note that normally background images of this nature would be only 1 pixel wide, but I have made it 20 pixels wide so that it is easier for you to see it.

Background images can be made small and then appear large. This is done by making a small image that has edges that blend into adjacent copies of itself.
Example:

background-attachment

K01e - (0:48)
- The background image of the sun in this mainContent div is fixed.
- The image remains in the same position when scrolling.
- Options:
  - scroll (default)
  - fixed

background-position

K01f - (3:58)
- background-position: x (y) ;
  - Note that on the web, positions are almost always relative to the top left corner of the container.
  - If you specify only one value or keyword, the other one will be center.
  - Pixel or percentage positions are specified in this order:
    - x (from the left)
    - y (from the top)
    - For example:
      - In either case below, if only one value is specified, it is used for the x position and the y position will be 50%.
      - 50px 100px = 50 pixels from the left and 100 pixels from the top.
      - 100% 100% = bottom right corner
      - Note that you can mix % and length, for example: 70px 80%
- background-position: keyword(s)
  - Horizontal relative positions:
    - left | center | right
  - Vertical relative positions:
    - top | center | bottom
  - Note that if only one keyword is used, the other will be center.
  - Combinations of the above:
    - left top (default)
    - left center
    - left bottom
    - right top
    - right center
    - right bottom
    - center top
    - center center
    - center bottom

Background Shorthand

K01g - (1:51)

Background shorthand: list the property values in any order. If any of the properties are not represented, the default will be used. Example:

background: #FFD url(images/grad.jpg) repeat-y scroll 0 0;

Assignment

K01h - (8:24)
1. Create a new folder and name it: yourlastname_K01
2. Create a new html file and name it yourlastname_K01.html
3. Save it in the new folder you just made.
4. Create a new stylesheet file. Name it yourlastname_K01.css
5. Also save it in the new folder.
6. Create another new folder within your existing folder and name the new folder images
7. Right-click on the four images at the bottom of this page and save them into your images folder.
  - When you save them, do not change the names.
  - Note that the thin black borders are not part of the images, they are there to make it easier for you to know where to right-click to save the files. Here is what you will be saving:
  - The large ampersand (Note that this is an ampersand: & )
    - ampersand.gif
  - Two image files that are gradients:
    - gradBgStudent1.jpg
    - gradBgStudent2.jpg
  - An image of diagonal lines:
    - diagonals.jpg
8. Create a link from your html file to your css file.
9. Define all your css rules in the external css file.
10. Use background shorthand for all of this exercise.
  - It is referred to in the last section of the lesson.
  - If you have questions about it, please research it online before you ask me about it - I want you to become familiar with finding information about code online.
11. Please do the following:
  1. Use the body tag as the selector for the next steps.
  2. Make the ampersand image the background image for your html page.
  3. Set it not to repeat.
  4. Set it to be at the bottom and 10% from the right edge of the browser window (that last spec is tricky!).
  5. Set it to always remain in the same position relative to the browser window regardless of scrolling.
  6. Set the background color of the page to #FFF. The ampersand's background color is also white and ought to blend in seamlessly it.
12. Make a table with two rows and two columns.
13. Put two full paragraphs of Lorem Ipsum text into each cell, except the bottom right cell.
14. At the top of each cell, going clockwise from the top left, put in <h3> headers that say the following:
  - Top left cell:
    - Background Image Repeats In All Directions
  - Top right cell:
    - Background Image Repeats Horizontally
  - Bottom left cell:
    - Background Image Repeats Vertically
  - Bottom right cell:
    - This cell is the exception: do not put any header or text in this cell.
15. Then, once more going clock-wise from the upper left cell, apply the following using the specified id selector for each cell:
  - Top left cell:
    - id:
      - repeat
    - Set the background image to diagonals.jpg.
    - Make no other background settings.
    - The default of repetition of the image in both in x and y will fill the cell.
  - Top right cell:
    - id:
      - repeathoriz
    - Set the background image to gradBgX.jpg
    - Set it to repeat in x only.
    - Set the background color of the cell to #EFEFDB
    - Because the background image is probably not going to be the full height of the cell and is repeating only horizontally, the background color ought to be seen underneath it, BUT the background color will be indistinguishable from the bottom of the image because they are both the same color, creating a nice blend.
  - Bottom left cell:
    - id:
      - repeatvert
    - Set the background image to gradBgY.jpg
    - Set it to repeat in y only.
    - Set the background color of the cell to #EFEFDB
    - When the background image is no longer visible on the right, the background color ought to blend in seamlessly, making it seem as if the image never ended.
  - Bottom right cell:
    - id:
      - repeatno
    - Set the background image to this (it is the html 5 logo):
      - http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png
    - Position it so that it is centered horizontally and at the top of the cell.
    - Set the image to not repeat.
    - Do not set a background color for this cell.
16. Check that it all works in your browser. This is not an easy exercise, so be sure the instructions have been followed.
17. Zip the folder as yourlastname_K01.zip

IMPORTANT!!!
- K01i- (0:34)
  - BEFORE you send your files in , please add about five+ paragraphs of Lorem Ipsum text both above and beneath the table so that we can see the page's background image.