CSS and Images

Within the standards-compliant semantic markup of a CSS "layout" style, well-placed images add beauty and interest to a site. The following are examples of common usage.

Applying borders to images

If you want to add a border to all images within the site, select the <img> tag and define the border.

	img {
      	border-width: 1px;
        border-style: solid;
        border-color: #000000;
        }

This code can also be written as follows.

	img {
      	border: 1px solid #000000;
       }

Your layout will contain images that you do not want to apply a permanent black border. Instead of selecting the <img> tag, create a CSS class for the border and apply it to selected images.

	.imgborder {
        	border: 1px solid #000000;
            }

The HTML markup looks like this:

<img src="picture.jpg" alt= "My Picture" class="imgborder" />

If you have a selection of images that you include in a group, you can set borders on all of the images within the ID container. This approach will avoid having to add the class to each individual image within the container.

	#albulmlist img {
   	border: 1px solid #000000;
       display: block;
    }

If you use an image for a link, browser default used to display it with a blue border. However, border has been deprecated in the current versions of HTML and XHTML. Just as you can create a border, you can remove one. 

	img {
    	border: none;
        }

Background Images

Body and HTML background images are applied to all pages to which the style sheet is attached. They can be a single image which can be specifically placed in a location, or patterns which can be tiled or repeated vertically or horizontally. The code below is an example of a single image which is centered both vertically and horizontally, not repeated, and remains in the same position when the text is scrolled. The content is positioned on the page using margins.

View the page As a new window:   Open and save the style sheet here. A view of the CSS is directly below.

body {
	font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	background-image: url(../images/fleur_de_lys_bg.gif);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment:fixed;
}
#content {
	margin-left: 180px;
	margin-top: 50px;
	margin-right: 180px;
}
  • background-repeat: repeat; This default value cause an image to tile across and down the page.
  • background-repeat: repeat-x; The image tiles across the page in a single row of images.
  • background-repeat: repeat-y; The image tiles down the page in a single column.

It is not possible to add more than one background image to your document, but iti is possible to acheive the effect of multiple images by applying background images to elements that are nested, the <html> tag and the <body> tag. An example of this with addition of the opacity filter is below.

View the page As a new window:   Open and save the style sheet here. A view of the CSS is directly below. 

html {
background-image:url(../images/floral_pattern_bg.jpg);
background-repeat:repeat;

}

body {
	background-color: transparent;
	background-image: url(../images/fleur_de_lys_bg_2.gif);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment:fixed;
}
#content {
	filter: alpha(opacity=70);
	opacity: 0.7;
	width: 700px;
	border: 2px solid #666666;
	background-color: #ffffff;
	font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
	color:#000000;
	margin-left: auto;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 50px;
	padding: 0 20px 0 20px;
	
}

Placing text on top of an image

The method is the same as applying a background image to the document. Instead of selecting the <body> element, create an ID and give it background image properties. The following example places an image within the content area of the document and also applies a repeating texture to the <body> element.

View the page As a new window:   As a Pop-Up window.

Open and save the style sheet here. A view of the CSS is directly below. 

body {
	font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-image:url(../images/bg.gif);
	background-repeat:repeat;
}
#smallbox {
	background-color: #FFFFCC;
	background-image: url(../images/fleur_de_lys_bg_small.gif);
	background-repeat: no-repeat;
	background-position: center center;
	border: 2px solid #999999;
	float: left;
	padding-left: 10px;
	margin-right: 20px;
	width: 220px;
	border: 1px solid #F5C9C9;
}
#smallbox ul {
	list-style-type: square;
	margin-left: 0;
	padding-left: 0;
}
#smallbox li {
	font-weight: bold;
	line-height: 1.5;
}
#content {
background-color:#FFFFFF;
	margin-left: 40px;
	margin-top: 40px;
	margin-right: 80px;
	border: 1px solid #CCCCCC;
	padding: 5px;
}