Scribd
Upload
26 views4 pages

Lesson 3 HeyDayAssignment

Uploaded by

idolhevev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views4 pages

Lesson 3 HeyDayAssignment

Uploaded by

idolhevev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Lesson 3Assignment

Add Large Background Photo


In this assignment, we’ll work with backgrounds to get some more practice. This time we're going
to use a single large photo as the background. You'll learn about a couple new CSS properties
along the way for sizing and positioning the background image.

Here are the Steps

1. Open your Intro HTML5 folder.

2. Open stylesheet.css in your editor.

3. Set the body style rule as shown below (if yours isn't already showing that). You can copy/paste
in the code below to save typing:
body{
background-image: url(pix/misty.jpg);
}

4. Save the style sheet, and open or refresh the page in the browser. The page should look
something like the one below.

Remove ImageRepeat
Depending on the size of your browser window, you may be able to tell that the image is tiling or
repeating itself to fill the available space. But that wasn't our intent here. We just want the photo to
show once. During the lesson you saw setting the background-repeat property to no-repeat could fix
that. Let's see how it works.
Here are the Steps

1. Open stylesheet.css in your editor.

2. Add background-repeat:no-repeat to your body{} style rule as in the code below.

[Type here]
body{
background: url(pix/misty.jpg); background-repeat: no-repeat;
}

3. Save the style sheet, and open or refresh the page in the browser.

Now when you look in the browser, the image no longer repeats. However, if the browser window is
larger than the image, the white page background also shows, as in the image below.

Change Size of Background Image


To change the size of the background image, use the CSS background-size property. If you don't have
a specific size in mind, just use the word "cover" as the value. That basically tells the browsers to
make the background however large it needs to be to cover the entire white background. So the
syntax would be backround-size: cover. Let's add that to your style sheet.
Here are the Steps

1. If it isn't already, open stylesheet.css in your editor for editing.

2. Add background-size:cover; to the body style rule, as below.

body {
background: url(pix/misty.jpg); background-repeat: no-repeat;
background-size: cover;
}

3. Save the style sheet, then open or refresh the page in your browser.

[Type here]
At this point, the image should be wide enough to cover the screen.

It might seem as though we're done, but there is a little potential problem you might not notice right
away, especially if the background image is small and the page is very tall.

Preventing Image Distortion


As the image stretches to fill the body that contains all the content, the image can get distorted
looking, and off center. That's because the image is actually being applied to the body element,
whose height increases with the content. Fortunately the people who designed CSS saw this, and gave
us a couple more properties to deal with it:

1. The first is background-attachment. If you set the background-attachment to "fixed" the


background image only fills the visible part of the page body, not the entire page.

2. The second is the background-position property. You can use this property to ensure that the
background image always stays centered both horizontally and vertically.

Those two lines of code look like this:

background-attachment: fixed;
background-size: center center;

When we add the following code, the reason why the code is there is because you only need it when
you're using a background image in the body{} style rule and want to ensure the image stays centered
and always fills the background.
Here are the Steps

1. Open stylesheet.css in your editor

2. Add the comment and two lines of code shown below to your style rule.
/* Use this only when you want one background image to fill the page
body */ background-attachment: fixed;
background-position: center center;

3. When your style rule looks like the one below, save your style sheet.
body {
[Type here]
background: url(pix/misty.jpg); background-repeat: no-repeat;
background-size: cover;
/* Use this only when you want one background image to fill the page
body */ background-attachment: fixed;
background-position: center center;
}

Now when you view the page in a browser, the background should be covered entirely with one
image, with the center of your background image in the center of the screen. Note that the sun is not
the center of that photo. So if it looks off-center to you, it's because you're assuming the sun is in the
center, but it's not. It's slightly left and above of the center in the photograph.

When the shape of the browser window is different from the shape of the image, some of the edges
will naturally be cut off. But the idea here isn't to show the image as a figure or photograph, but rather
just as a decorative thing to enhance the appearance of the page. The figure below shows
(approximately) how the image will look at different sizes and shapes of a browser window.

Though it won't be apparent when working with a page that has no content, using the fixed
attachment method, as we did above, prevents the image from scrolling when the user scrolls down
the page. Instead, the image stays right where it is and the content scrolls in front of it. That's a nice,
clean professional way to use a background photo. But again, you won't be able to try it out until your
page contains enough text and photos for a scroll bar to appear at the right of the page.

HTML and CSS are all about creativity. So please feel free to experiment and try out different
backgrounds until you find something you like, whether it is a color, gradient, or image.

[Type here]

You might also like