CSS Tutorial for Beginners - 21 - Background image property Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 21st tutorial on
beginning CSS in this video we're going
to take a look at the background image
property so let's go ahead and open up
our web page now this is different from
a regular image that we display on our
site a background image goes inside a
element and it's exactly that it's in
the background of the element so this
text will be in front of it and it can
really make your elements look very
snazzy now I'm going to use this
photograph of clouds now what you can do
is you can go out to google and type in
cloud patterns CSS and that should bring
up some cloud patterns if you want to
follow along with this tutorial so let's
close that out and let's go into our
source so let's go to the style sheet
and let's put this background image in
the paragraph 3 element so we'll go
ahead and do that now this is the
property right here background - image
and then you have to have URL and then
in parentheses is where you put the
location of the image now this image is
in the same folder as our stylesheet
everything's in our website folder so
it'll just find this name now if you
were pulling in an image from the web
you would actually put an HTTP URL in
here okay so we're good to go let's go
ahead and save this and let's open up
our index page and there you can see
we've got our background cloud pattern
now and that looks that looks pretty
good I think um now let's go ahead and
actually apply it to the entire body so
let's let's go ahead and let's see what
that looks like so we'll go up to the
body section let's put that in here
we'll save it and yeah you know what
that looks actually even better
it looks pretty pretty good but let's
actually remove that we'll keep that in
our paragraph element so we'll just
remove that put it back in our paragraph
3 and we'll save this and we're back to
normal
ok that's going to do it for this video