I totally do not understand why when the background image has padding added suddenly the background image frame appears. It confuses me because I made sure the background image is bigger than the fox image. For example the image frame is:
120 x 174 & the fox image is smaller at 70 x 86.
So my question is please why do i have to add padding to a background image on another image element for it to show. My head hurts…
David, give this experiment a try and see if it helps explain what is happening.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
Given:
.basiframe is an image, not a separate container.
If the image is opaque, we can apply a background-color to it and the background-color will be hidden behind the image.
The background color will be displayed around the edges of the image IF padding is applied around the image.
Instead of applying a background-color, you have applied a background-image on your page.
In the following example, we find Basil floating left, surrounded by a magenta outline.
1. Add the background-color by deleting the opening (left-most) comment mark.
Hmmm. Nothing changes.
2. OK, lets add some padding around the image by uncommenting {padding:26px 21px;}
Ahhh. Gray background-color appears around the edges of the image!
3. OK, lets get nutty and add even more padding. Uncomment the last line of padding.
Wow! Talk about a gray area!
4. We know that background-images repeat by default to fill their container,
so I have allowed your background-image to repeat ad-nauseum.
5. Enable the background-image by deleting the left-most comment mark.
The background-image overlays (hides) the background-color.
Because of the massive amount of padding around the image, we now find Basil in the middle
of 9 frames.
6. Mix and match to expand this experiment. :)
An off-beat example, I know, but I hope it helps.
-->
<head>
<title>template</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
img.basilframe {
outline:1px solid magenta;
/* background-color:#ccc; /* */
/* background-image:url(frame.jpg); /* */
/* background-repeat:no-repeat; /* "repeat" is the default */
float:left;
/* padding:26px 21px; /* */
/* padding:164px 133px; /* */
}
</style>
</head>
<body>
<img class="basilframe" src="basil-70-86.jpg">
</body>
</html>
You don’t have padding on a background image. You have placed padding on an image. A background image on an image doesn’t make much sense, unless you put some padding on the image, so that the background can show through. A background image shows up in the padding area of an element. An image doesn’t have padding around it by default. <img> is a ‘replaced’ image, meaning that the image is inserted on the page where you tell it to go. It fills that space, and that’s it.
