Adding an Image and Background Image Using HTML and CSS

Adding an Image and Background Image Using HTML and CSS


what’s up guys so in this video we’re
going to start inserting some images which will really start to make our
website look legit right now you’ll notice I changed the colors I like to
change my colors up quite a bit and so now I’m going with a purple and teal
theme that’s because the images that I’m inserting will look better with these
colors so first let’s just do a quick review about the importance of file
structure so I’m going to open up my file structure here on the left
get into my aptana workspace or wherever your folder is for your website mine the
folders called hello world and make sure that you create a folder called images
if you don’t have one create it you’re not going to want all your files just
crammed in this folder you’re going to want some structure so what I did is I
added the images folder and I threw some images in there for us to play with in
this video so whenever we build our links into the images we’re going to use
relative links that will point to this folder and pull the images from that
folder okay so enough said about that let’s play with some images I’m going to
scroll down here and I am going to first put in my YouTube banner instead of the
hello world text at the top so that’s going to be down here in the HTML where
it says hello world I am just going to delete that out and then to insert an
image we are going to use the image attribute with SRC for source and this
is where we’re going to put the path to our image so I’m going to put images
because that’s the name of the folder it’s in and then this program it’s
already showing me a list of the images in there I want mouths banner dot ping
and then make sure it’s closed out with a quote now it’s always important to add
alt text or alternative text to your images in the event it doesn’t load or
someone’s viewing it with a screen reader so I’m going to put melodie
these youtube banner and you’re just gonna put the description of the image
be sure not to say image of or a picture just describe what the picture is
showing without the use of the words image or picture and then we could also
put a high throw with I’m going to mmm see I’m gonna put in a width let’s try
625 and then a height not nearly that much let’s try let’s try 85 see what
that looks like we might need to play with it and then let’s go ahead and go
up here before we do anything before we go look let’s go up to our CSS and in
our reset styles let’s add image so that would be here IMG comma so that we can
have those default border padding and margins
okay now let’s save it and let’s run it let’s see what it looks like okay so I
know I obviously need to play with the padding a bit that’s why I have all this
space around it and as far as the size the height could be a little bit higher
so if I go down here to where the image is what the height let’s go ahead and
put let’s go 95 and now with a height of 95 before we go and refresh and check it
out again I’m gonna go up here to the image itself which is in the heading and
I am going to add a height of 95 pixels so that the height matches
the height of the picture of course the navigation itself has a little bit of a
margin so we’re going to see a little bit of a gap but not nearly as much as
we did before and the reason why we don’t put px is because this is
automatically pixels so when you put numbers in it knows that it’s the pixel
size for images so let’s save this and go in and refresh much better okay so
nice and clean would I use this banner for a banner on my website not
necessarily the YouTube banner has different specifications as a
perfectionist as I am I would probably make this go all the way to the sides
and go and Photoshop and actually edit damage itself but there you go we’ve got
our banner now let’s go ahead and add a background image which is slightly
different you notice that to insert images where
you did it in the HTML and then we styled it using CSS to insert background
images we only use CSS so let’s go here and find my article in the article
section here we go and I am going to add a background image this time now
background images the best images to use for backgrounds would be called seamless
images you can go online and look for free seamless images there’s a bunch of
out there but seamless just means that it can be tiled and repeat and you
wouldn’t be able to tell so it’s a repeating pattern a seamless pattern so
I’m going to use one of those and then to add a background image we do
background and then we do a colon and then we type in the word URL a
parenthesis and then this is where we’re going to put the name of our image in
quotes so this is images and this time I’m going to use a seamless image I have
called geometric dot King and then don’t forget this am i calling
at the end there for the rule and then before we save since we have two
backgrounds here now we need to change this background color just to the
shortcut or shorthand rule background by having this here at the bottom very
important this rule takes precedent it will look at the bottom first
so in this declaration we’ll look at this one if it’s unable to load then it
will look at this one so if it can’t load the background it will keep a
background of white so important to keep both of those let’s go ahead and save it
and see what it looks like and there you go that’s one example a little busy for
my taste let’s try a different one so then I would just go in here and I’m the
images folder I also have another one let’s go here let’s try we’ve I think
I’m gonna like that better and that one is a jpg I believe so let’s save that
and you can use pings JPEGs gifts just remember the image type does impact the
demo type and there you go so now we have a background here now notice it
kept this square white and that’s because the article div itself the
container that the paragraph is wrapped in still has a background color of white
so the article which is this bigger box here has the background and then the
container the div has the background of white if I wanted them both to be the
same then I would go ahead and put that back on image in here too but then you
couldn’t read the text I think this is perfect and since it was applied to the
article you’ll notice we don’t see it past the footer so there you go we
inserted two images a background image and a banner image in our next video
we’re going to add a figure image and a caption so stay tuned and I will see you
next time

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *