THIS HEADER 1 IS NOT INSIDE ANY DIV

This paragraph isn't inside a div either...


This heading is in a div tag

While the <span> tag goes around text in a line, the <div> tag goes around other elements and serves as a container.
Essentially it groups elements together.
As a container, divs can wield control over the flow and behavior of the elements inside it. If you set the width and height of a div, any paragraphs inside will flow within those limitations. You can add a background color to an entire page section. And you can even affect the font in multiple text elements at once.

We can change the background-color of an entire div by adding this inline styling to the <div> tag:
style="background-color:#BBCCFF; color:#333333"


Div Dimensions

Div elements can take on width and height properties. This can be a great tool for controlling a layout. If a div's dimensions are not specified, it will automatically stretch the whole width of the page or container that it's in.

To add dimensions to your div, we'll need to use the style attribute like we have for other CSS properties. Set the width, height, or both, to the desired value. Pixels and percentage are the typical measurements for setting a div's size. Pixels are an exact measurement, while percentage depends on the size of its container. So if you have a div set to a width of 100% inside a div with a width of 500px, the nested div will also become 500px, as that would be 100% of its container.

>PRACTICE

IMAGES vs. BACKGROUND IMAGES

Divs, however, do not quite have the same styling capability when it comes to images.

While a div is capable of holding images, it generally can’t affect them directly.
However, a div is a great opportunity to incorporate the background-image property. Instead of, or in addition to a background-color, you can actually use an image to serve as part of the page’s background. Any elements inside the div will appear in front of a background image.

This Div does not have any SET DIMENSIONS, so it will only be as big as the text inside this div will allow it to be. When it comes to normal image elements, a div will resize its height to fit around the height of the images. However, a background image has no power in forcing the size of the element it’s applied to. If you have a div with no assigned dimensions, and the paragraphs inside only make the div resize to about 50px tall, you will only see the top 50px of the background image. A background image will not resize itself to completely fit in its container.

Set this Div to have dimensions: 1000px by 500px

This div will form to the dimensions, not the text


Manipulating Background Images

Have you ever seen an image repeated over and over across the background of a webpage or as the "wallpaper" of a computer desktop or phone screen? Instead of creating a huge image of a repeating pattern of smaller images, CSS's background-repeat property can do it for you.

Repeating a background image both left and right and up and down is actually the default setting. If you do not want a background image to repeat at all, you can use the value "no-repeat". To repeat a background image in only one direction, use "repeat-x" to repeat the image only horizontally, or "repeat-y" to only repeat it vertically.

repeat (default)

repeat-x

repeat-y

no-repeat

When a background-image isn't set to repeat, you may want it placed in a certain part of the container. By default, a background image is placed in the top left, but the background-position property lets you change that. You can choose one of several general location keyword combinations. The following table shows the keyword combinations available. Make sure to leave a space between the keywords—values like "topleft" won't be recognized. And the two words you use can be put in either order—in other words, "top left" will work the same as "left top".

top left top center top right
left center center center right center
bottom leftt bottom center bottom right

BACKGROUND POSITION PROPERTY

You can also set a measured position using either percentage or pixels. In either instance, the first value you enter is the horizontal position, and the second value is the vertical position, originating from the top left.

background-position: 0px 0px

BACKGROUND ATTACHMENT PROPERTY

One more property you may want to utilize with a background image is the background-attachment property. This property has the nice trick of setting whether a background will scroll along with your content, or remain fixed in its original location. The default value, "scroll", makes the background image scroll with your content, while the value "fixed" will leave it in place.

scroll (Default)

Scroll down.

See what's happening?

The scrolling affects the text and the background.

This is the default behavior.

fixed

Scroll down.

See what's happening?

The background is remaining in place.

This is what the value "fixed" does.















TRY IT FOR YOURSELF


1. What is the best way to edit this code so that the first four paragraphs are 20px font, but the last paragraph is 10px.

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Paragraph 5


2. What would you add to this code so that the background image only appears once, and in the bottom right corner of the div?