Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to HTML and CSS!
You have completed Introduction to HTML and CSS!
Preview
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.
Resources
- Responsive Web Design Introduction - w3schools
- background-image - w3schools
- background-attachment - w3schools
Treehouse - Responsive web development
Want to go further with responsive web development?
Check out our Flexbox and Grid content!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up