Week 5 Intermediate CSS & JS DOM
Advanced styling with images and JavaScript
CSS background-image
It’s easy to insert background images directly through CSS. This will not interrupt the flow of other HTML elements.
Simply use CSS to place a background image…
background-image: url("../../path/to/image.png")
and this is the most common way to set the background image
body {background-image: url("../../path/to/image.png")}
but you can always use it in any elements like divs…
- We also set the background-color in case the background-image does not load up.
In case you need to position your background image, the property takes two items: either left, right, or fixed for the horizontal positioning and top, bottom, center, or fixed for the vertical position.
- Shorthand:
background: color image no-repeat/repeat position;
ex). background: #fff url(path/to/image.png) no-repeat center center;
Tables
The HTML table element creates a table to present tabular data to the user.
To create…we use the table tag:
1 . Inside of the tag, we add the <tbody>, which represents the body of the table
2. Then, we place the <tr> tag, which represents a table row
3. Finally, we add the <td> tag, representing a column in the table and containing the data we want to display.
And to add more rows, we could add more <tr> and <td> tags.
Figures and Captions
So far, we have used images for our page and for backgrounds. And there is another use of images — figures.
- The figure element is an element that can hold any content that has an optional caption attached to it. Typically this content is an image.
<figure></figure>
<figure>
<img src= “../../path/to/image.jpg” />
<figcaption>A caption to an image!!!</figcaption>
</figure>
This will give an unstyled image and caption, but you can always style the figure, image, and figcaption tags with CSS to get the looks and feel we want.
