This paragraph isn't inside a div either...
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 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.
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.
This div will form to the dimensions, not the text
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.
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 |
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
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 down.
See what's happening?
The scrolling affects the text and the background.
This is the default behavior.
Scroll down.
See what's happening?
The background is remaining in place.
This is what the value "fixed" does.
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5