In this blog I will discuss many recipes regarding CSS interactions with images. Recipes include dealing with borders, manipulating background images, rounding corners on boxes, replacing HTML text with images, and much more.
Settig a Background Image
Setting a background image that does not repeat. Use the background-image and background-repeat properties to control the display of an image.
Example:
body {
background-image: url(bkgdimg.jpg);
background-repeat: no-repeat;
}Creating a Line of Background Images
You want a series of background images to repeat vertically or horizontally. To tile the background images horizontally or along the x-axis, use the following CSS rule:
body {
background-image: url(bkgdimg.jpg);
background-repeat: repeat-x;
}
To have the background image repeat along the vertical axis, use the repeat-y value for the background-repeat property.
Positioning a Background Image
You want to position a background image in a web page. Use the background-position property to set the location of the background image. To place an image that starts 75 pixels to the right and 150 pixels below the upper-left corner of the viewport, use the following CSS rule:
html {
height: 100%;
}
body {
background-image: url(bkgdimg.jpg);
background-repeat: no-repeat;
background-position: 75px 150px;
}
To position center use this:
body {
background-image: url(bkgd.jpg);
background-repeat: no-repeat;
background-position: center;
}
To place a background image in the lower-right corner, as shown in, you can use the following CSS rule:
body {
background-image: url(bkgd.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}Using Multiple Background Images on One HTML Element
You want to place more than one background image within one HTML element.
In CSS3, the shorthand background property can accept multiple sets of background image information as long as commas separate them.
h2 {
border: 1px solid #666;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background: white;
padding-top: 72px;
text-align: center;
background: url(mail.gif) top center no-repeat,
url(printer.gif) 40% 24px no-repeat,
url(gift.gif) 60% 24px no-repeat,
url(content-bkgd.png) 50% 50% repeat-x,
url(heading-sub-bkgd.png) 3em 3em repeat-x,
url(plane.gif) center no-repeat;
font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;
color: #666;
}