XHTML and CSS Tutorial - 20 - Background Images Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys now that we know how to
change background color let's spice
things up even more let's learn how to
add images as the background so the
first thing that we need to do is make
sure that we have our body tags in here
because that's what we're going to be
editing that background of the body so
go ahead and as your element go ahead
and type body and give you some space to
work with and the first thing I want to
you guys is how to add an image is the
background so again make sure that
whatever directory you're working in
let me just a little bit make sure
whatever directory you're working in
that you have see I'm working at this
file right here the index make sure you
have an image file either a gif or JPEG
or a ping in the same folder as the file
you're working on and I have a little
you can see my face right here a little
picture file called my face dot ping so
remember that because that's going to
come in handy in about five seconds so
in order to add an image for our
background you need the property back
ground- image and for the value you need
to set it to this URL and then go ahead
and put parentheses now inside the
parentheses go ahead and type the name
of the file my face dot ping now go
ahead and add your semicolon and this is
how you change the background image so a
lot of you guys might think that um just
put background image and then the file
name no that's not it make sure you have
that URL or it's not going to work so
let's go ahead and save this and see
what we get
pretty sweet-looking website this is
actually one of the prettiest websites I
think I've ever created in my life
pretty sweet just a bunch of buckey's it
kind of looks like kind of reminds me of
that Brady Bunch intro where there's
like nine people there's a story some
dudes named Bucky you know
okay I'm just going to I better stop
singing so anyways you're saying alright
Bucky your face is beautiful but we
don't need eighty of them right there
well if you just have an image and you
just want one image and you don't want
it to repeat then you can change that as
well I mean by default as you saw the
image is just going to repeat both left
and right and up and down it's going to
title itself so you don't always want
this effect so in order to make it not
repeat go ahead and type background -
repeats and as the property you can
either have it I think it's like repeat
on by default or something anyways
default is what you saw if you don't
want it to repeat and then type no
repeats and check it out if we save this
and refresh we see we only have one
image that doesn't repeat so if yet you
know you made this big cool background
that you know some images are made for
repeating some art so anyways you know
no need to explain so that is how you
get an image not to repeat and I just
shook that and since I have Windows 7 it
closed everything so let me open
everything back up and yeah make sure we
got that so anyways that is how you make
it not repeat whatever saying all right
but what if a special case scenario
comes along that I only want to repeat
it left and right or dang it now my
Camtasia shut there we go my screen
recorder shut down I didn't know how
long I had on my video but I've got to
remember not to shake any windows again
I guess but anyways sometimes you're
going to come across a situation where
you have this image but you only want to
tie left or right or up and down so you
can do that using the same background
repeat' property but instead of
no-repeat go ahead and change to repeat
minus X and this is going to tile it let
me show you left and right in the x axis
the x axis is left and right Y is up and
down and Z is forward and backward but
since we're working with a computer
screen we don't have Z so you know just
a little tidbit of information so that's
how is it left and right
why if you repeat it titles up and down
this kind of reminds me of you know when
you go to the mall and you put like a
dollar in those photo booths you know
that's what it reminds me of kind of
freaky seeing me staring at myself but
anyways that is how you title it up and
down and the last thing I want to
mention is um let's go ahead and put
no-repeat so I can demonstrate the last
point I have whenever you have a
background image I mean you might be
saying this all right I want one image I
don't want it to repeat but the only
thing is I don't want it stuck in the
top left corner I want yet either you
know maybe centered on your website or
maybe you want it 10 pixels over and 50
pixels down or you want to in a specific
location you don't always want to jammed
up in the top-left so in order to do
that you need a property called
background - position and this lets you
alter the position of your background
image now this takes two parameters the
first parameter or the first piece of
information it needs is how far from the
left hand side do you want to move it so
go ahead and put ten pixels now your
image is going to be shifted ten pixels
to the right and the next piece of
information you need to give is how far
from the top do you want to move it so
let's say you want to move it 60 pixels
down so go ahead and write 60 pixels and
that's it just save it and see what we
got
so now that we change that background
position 10 pixels 50 pixels it took
this image which was jammed up in the
top left move the 10 pixels to the right
in 60 pixels down or 50 I forgot what I
put 60 there we go we're saying alright
that's pretty cool Bucky but I don't
let's say I want something like I want
this picture centered on my webpage but
I don't know how big their browser
window is going to be so how am I
supposed to guess how many pixels well
lucky for you not only can you do this
with pixels but you can also do it as
percentages so if you want
sixty pixels down but you want it
centered then just go ahead and say all
right move it fifty percent from the
left and this is going to Center it left
and right or horizontal you know
whatever so let's go ahead and save this
and see what we got
since it's 50 percent to the left that
means there's 50 percent to the right
that means your background image is
perfectly centered in the middle of your
website so this is perfectly centered
left and right and it's also down 60
pixels so that is pretty much all you
need to know with working with
background images um
again there's probably some more but
this is pretty much the core foundation
of working with background images so if
you understand this then you should be
good to go from now on so anyways that's
all I have for you guys for this story I
know I threw a lot at you but uh you can
always watch it again if you didn't
catch anything so thank you guys for
watching don't forget subscribe and
don't forget to check out my website