Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to HTML and CSS

Well done!

You have completed Introduction to HTML and CSS!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

CSS Images

3:31 with Laura Coronel

Explore CSS techniques for enhancing images and backgrounds. Learn how to style images, center them, add borders, and set background properties to create visually appealing web designs.

Something that you may have noticed is that our recipe image doesn't have a set 0:00
width or height since we took away its height and 0:04
width properties earlier in the stage. 0:07
This image is currently displaying at its original dimensions, 0:10
which are 600 by 400 pixels. 0:15
However, something interesting happens if we resize the screen so 0:17
that it's narrower than the image. 0:21
Since the image is displaying at its original dimensions, it will always 0:24
display at 600 pixels wide even if the browser window is too small for it. 0:29
This is not ideal for 0:34
us because we might have visitors who are viewing from their phones. 0:35
Remember the max width property from the box model video, 0:40
that property can be used for images too. 0:44
Let's find the hash intro image selector and 0:47
add a max width to the list of declarations. 0:50
But what can we put here? 0:54
Any pixel measurement will give us the same issue. 0:56
It's good to know that pixel is just one type of unit that we can use. 0:59
Another is percentage. 1:04
Here we can assign a max width of 100% of the images container. 1:06
Let's give it a go. 1:11
Save and refresh the page. 1:13
If the containers width is less than 600 pixels, 1:15
we can see that the image now shrinks to fit within its container. 1:19
And if we resize the browser window so that it's larger than 600 pixels, 1:23
the image retains its original dimensions. 1:28
This is called responsive web development, and there's a lot to learn about it. 1:31
If you're interested, check out some resources and 1:36
links to other courses in the teacher's notes. 1:39
Finally, let's assign this background image that we can see in the mockup. 1:42
To do this, we'll use the background-image property on the body element. 1:47
As you might have guessed, 1:52
this property allows us to select an image to use as the element's background. 1:54
Let's find the body CSS rule block and add the background image property. 1:58
When you want to set the background image property to a file that's located 2:05
in a folder, you must use the URL notation to specify the path to the image file. 2:11
Without this, the browser might not know how to interpret 2:17
the value as a reference to an image file. 2:21
Since we're using a file hosted in our own project, let's use a relative link. 2:25
First, let's mention the image folder and then the slash, 2:31
and then the image name, background.jpg. 2:36
Save the file, and let's check out the page. 2:40
Brilliant, we've got a repeating pattern background that matches the mockup. 2:45
Now, I don't know about you, but having a repeated background move with me 2:50
when scrolling can be a bit much on the eyes. 2:55
To prevent this, I like fixing the background so 2:58
that it remains stationary while I scroll. 3:01
We can do this by applying an additional declaration using 3:04
the background attachment property and the fixed value, like so. 3:09
Save and refresh the page. 3:14
Now we can see that the background pattern stays fixed even when 3:18
scrolling down the page. 3:22
Fantastic job, 3:24
we've just made the carbonara.html page look just like the mockup. 3:25