In today's video,
I'm going to talk about background images. Before going to Dreamweaver you have to set up a root folder on your computer.
On my desktop, I had already created a root folder. Inside this folder, there's an images subfolder. Inside this subfolder there are three images which I'm going
to use for this exercise. In Dreamweaver the first thing to do is
to set up the site. So I'm going to Site, New Site.
Give a name called Background Images. Make sure to click the browse button. I'm going to my desktop. Select my DW Bkg Images folder,
and then select folder. Now right here in the Local Site Folder, you see this is the correct path, and save. So right in my File panel, you see I have
my images subfolder here. Now before you even create a new page, go back to Site, Manage Site and export the site.
Export the site to your root folder again. Go back to my desktop look for my DW
Bkg Images folder and open, and save, and done. Now right away you see this is my Background Images site. Next, I'm going to create a new page.
Right-click on the name of the site, click New File and change it to index. Double click on index to open it up.
I'm going to have Split. Now I like my code on the left-hand side,
so I will go to View, Split and uncheck Live View on Left.
Now my code is on my left-hand side, and my Live Preview is on my right-hand
side. So right away I'm going to change the
title to Background Images. Inside the body I'm going to have an h1. Background Images. Now you see this is an h1. Underneath h1 I'm going to have a
section. Inside the section is a paragraph
with some placeholder text. In my head section I'm going to type
style, tab. The first thing is to style the body.
I'm going to take out the padding and margin. I'm also going to take out all the
default padding and margin for all the HTML elements.
I'm going to use a star which stands for universal selector. Padding, 0, margin 0. Right away you see that all the paddings and margins for h1 and
p are taking out. Next, I'm going to style
the h1. So, text-align, center, color, red. Next, I'm going to style the section.
I'm going to give a width and height for the section.
600 pixels. Height 400 pixels. Save. Now you won't see anything because
there's no background color or background image for the
section. So I'm going to give a background
color for the section. I'm going to give it a khaki. Now see
this is my section. I'm going to move it to the
center of my preview. So I'm going to use margin,
100 pixels at the top and bottom and auto on the left and right. Now right away you see this is my section. Now if I go inside my section
and try to insert an image. Click image, and go to my image and click the puppy.
OK. So my image is inserted inside the section, but my paragraph
is above the image, is not on top of the image. In order to have the
paragraph on top of the image, I have to use the
image as a background image instead of
an inserted image. So I'm going to delete this. Go back to my section and have a
background image. Now when you have a background
image you have several options. The one you want to use
is the url, and then you browse, go back to the
images folder and click puppy. OK. Now see my puppy is right over here and
then my type is over here but I cannot read the
type. So I'm going back to my CSS.
Now you can read the type. When you mouse over you see the dimension of this image
is 500 by 330 pixels, but the section has a 600
pixels in width and 400 pixels in height. The default behavior of a background
image is it will repeat itself horizontally and vertically. If I don't
want the background image to repeat, I can have background repeat, and then you have several choices,
now I'm going to click no-repeat this time. Now see the image is not repeating.
Of course, we can have repeat-x, now this image is repeating horizontally. If I have repeat-y then this image will
repeat vertically. So I'm going back to
no-repeat. Now to fill up the whole section, I can use the background-size. As you can see there are three options:
auto, contain, and cover. I'm going to use contain first. When you
use contain you're telling your browser to show the image even if it leaves a
little space to the sides or bottom. Now you can see that I've got a little
space here. So if I change this to 450,
now you see there's more space at the bottom.
If I change the width to 700 pixels.
Now you see I have some space on the side. When you use contain, the background image will be stretched in proportion to fit
the parent container. So I'm going back to 600 pixels
by 400 pixels. Now next, I'm going to use cover. When you use cover,
you're telling the browser to make sure the image always covers the entire
container even if it has to stretch the image or
cut a little bit off of the image. Now I'm going to change the
width and height of my section to demonstrate the behavior of cover.
If I change this to 800 pixels, now you see that the bottom of the image
is cut because it stretches to fix the
width of the container. If I change the width
to 300 pixels and the height to 800 pixels.
In order to see the puppy you have to use a background position. The default background-position is in
the upper left-hand corner. Ss you remember the
puppy is close to the right-hand side of the
image. So the first value I will use is right,
and then center. Okay now you see the tail of the puppy. So of course you
can adjust it. Instead of using right, you can use
center center. Now you see the puppy is right here. When
you use center you see half of the puppy. So I'm guessing maybe
65 percent offset to the left. So I'm going to type 65.
Now right away you see my doggy over here.
So you can use the background-position to move a background image around within
its container. And you have two values like this, the
first value is the horizontal offset
and the second value is the vertical offset. Next I would like to fill my body with a background image. So I'm going back to my body and put background image. url, browse.
I'm going to use this called sun-pattern png.
OK. If you think the background image is too big, you can always use the background size to change the size of the
background image. I'm going to use a background-size 50%
first, to see what'll happen. Now it looks like
if I use fifty percent actually it's getting bigger
because it's using fifty percent of my browser here. The image is only 400 by 400,
and then in the Live Preview, you see that the whole browser is around 1,100 pixels. So when I use 50%,
that means I'm increasing the background size from 400 pixels to around 550 pixels. So I can change it to around 30 pixels(%).
Now you see the background image is much smaller. So this is another way how
to use background-size to control the size of
the background image. When we first start out using CSS,
CSs won't allow us to insert more than one image as a background image. But right now we can use multiple
background images. The way to insert a multiple background
image is first to insert the image that you want it to be on top of the other
image. url.
Browse. This is my first image. To insert the second image i have to use
a comma, I can use the url again, and browse and use this puppy. OK. So both images will have no repeat.
The image at the bottom will have a cover but the image at the top, I would like to
reduce its size. So I say 25%, comma.
Now I want to move this image to the lower left hand corner of my container.
So horizontally I will offset it to 5%, vertically I'll put it to the bottom, comma. Now you see this doggy is
on the lower left-hand corner. To control the position of this dog I
can use a percentage. Instead of using bottom, I can use 80%. Now, this is 80%. So I can adjust it by
using 90%. So this is 90%. When you're using multiple background
images be aware to put the image which you would like to be at the front
first and the image which should be at the back
last. So this will conclude our video talking
about background images.
