Adding Images with CSS

If you are looking into how to add images with CSS, then you should already have preliminary knowledge in terms of how to use basic HTML.

Preliminary knowledge includes: use of simple tags such as <p> and <h1>. These should not be confusing to you at this point – and if they are, then it is best to start with the tutorial for beginners on how to use CSS.

The tutorial will guide you with the basics so that you can come to this section totally prepared for what we have to cover. More significantly, the guide should not take you time to read through and practice – it is designed with user-friendliness and with readability in mind.

Now for those of you who are prepared and have already covered the basics, let’s start. As you may know (and should know) images are pictures that are located on webpages. While it may seem that the webpage owner probably copies and pastes the image onto the page, there is actually a lot more going on than what you may think.

Images are added to a webpage through a link and the holding space, which is where the image appears on the page, is designed by the image tag <img>. This tag provides the holding space or reference for your image.

When thinking of images in terms of appearing after one loads a page, the concept is actually pretty simple. Once someone loads a webpage through a URL, the browser at that very second reaches out to the web server, gets the image, and adds it into the page.

Most people are familiar with adding images to text through programs like Microsoft Word. In Word, you essentially insert the image into the document and as a result, it is a piece of the document itself. Once you save the Word file to your computer, there really is nothing left for you to do but to ensure that the file remains on your computer. When you open the program back up, the image is on the page and that’s it.

Alternatively, if you are using an HTML page, there is a bit more work involved. With the HTML page, you need to reference the images by using the <img> tag. With this system, your job is to make sure that the images are always linked to the page and that they remain in the same spot that you designated for them. Problems occur when someone tampers with the path that leads to the HTML page and the referenced image. To put the issue into perspective, this tampering occurs when you see this image after you load a web page:

image error

This icon should be pretty familiar to you – and now you know why it happens. To repair this problem, you need to fix the connection between the HTML page and the referenced image. Once you repair it, the browser will be able to find the image you are referencing on the <img> tag.

Now that you know about the mechanics of loading images on a webpage, let’s get to the practical information that you have been waiting for:

Insert Images into Your Web Page Using CSS

The great thing about this stage of the process is that it is very simple to understand and follow. In addition, it is a powerful resource that will enable you to take more control of your webpage and the website creation process. As you use CSS, you will notice that block-levels and incline elements (tags) are features that allow for images to be inserted into them. For those who do not know, block level tags are designated by: <p> and <div>.

While one approach allows you to insert the images into the block level or incline tags, you may just find it better to stick to block level tags. Overall though, there is not much of a difference – it really is all personal preference. Whether you use one or the other does not matter because any tag can be modified into a block-level tag or incline tag. Here is the process of changing a tag to a block-level tag:


display: block;

If you were to do it for incline, it would look like this:


display: inline;

As you can tell, inserting backgrounds and inserting images is essentially the same process. You can also do this with any element you like. Just do not forget to add some extra padding so that you can add a heading for your image.If you were to do it for incline, it would look like this:

Here is an example of the above technique in action:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS image placement</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css" media="screen">
#headline1 {
background-image: url(images/newsletter_headline1.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
margin-bottom:50px;
}
#headline2 {
background-image: url(images/newsletter_headline2.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
}
</style>
</head>
<body>
<div id="headline1">Some text … </div>
<div id="headline2">Some more text .. </div>
</body>
</html>

For the sake of simplicity, what you see above is the CSS code that was inserted into the webpage. While the typical approach would be to add the CSS code into a separate CSS file and then link to it in order to reuse the code on other web pages, this was just a simpler way to do it.

A few things to point out about the above code: here, you will notice that there is a background image for each ID (headline 1 and headline 2). In addition, there also is an increase in padding (padding.top:68px) that works to push down the text. The text here needs to be pushed down so that there is enough space for the background image.

If things do seem unclear, then the best thing to do would be to check out the source code and work on it yourself. You can change figures like the padding number. As you do this, you will be able to see the alterations to the webpage itself. If you are wondering why 68px padding was used on this page, since it is tall, the essential point to remember is that you can use any number you like. By changing the numbers, you can achieve the placement that works best for you.

Finally, it may be helpful to keep in mind that padding does not influence the background image. What it does affect is the content inside of the tag element. In the case above, you will notice that a <div> tag was used.

At this point, you should be well versed not only in the basics of HTML and CSS, but also what it means to add images to a webpage, the tags used, and the detailed information that goes with it. If you would like to continue, then the next section that we are going to cover is using CSS in Web Pages.

Continue

We'd love to hear your thoughts...

Leave a reply

Hosting Review Box
Compare items
  • Total (0)
Compare
0