How to Include External Images From a Remote Location with CSS

With Cascading Style Sheets (CSS), you can include an image from outside your Web site on one of your pages. The three ways to give an element attributes in CSS are inline styles, internal style sheets and external style sheets. Follow these steps to include external images from a remote location with CSS.

Instructions

Difficulty: Moderately Challenging

Things You’ll Need:

• Internet access
• Computer

In-line Styles

1. Find the code for the element you wish to place an image in. In this case, it is
   .
2. Insert the following code between the end of the opening tag of the element and the closing square bracket:
   
   style = “background-image: url(image_url); width: X px; height: Y px;”
   
   Where image_url is the URL of your remote image, X is the width of your image in pixels and Y is the height. So, in our example, our div would become:
   
   
   
   

Internal Style Sheet

3. Find the tag in the code of your Web page. It should be toward the top of the code.
4. Move the tag down one line. If the tag is situated on a line with other code, move it to its own line, and then move it down one more.
5. Insert the following code on the line above the tag:
   
   
   
6. Insert the following code between the end of the opening tag of the element and the closing square bracket:
   
   class = “bri”
   
   So, in our example, our div would become
   
   
   
   

Tips & Warnings

• Use internal style sheets to fill a number of elements with the same image. In this case, you would give the class = “bri” attribute to every element you wanted filled. This way, you can add other CSS tags to the "bri" class elements without changing at each element, just at the top of your document.
• You can use external style sheets by putting the code from inside your internal sheet (that is, the tags ) in a separate document. Then, instead of putting those tags before your tag, put: You can put this where FILENAME.css is the filename of your new sheet file. This allows you to use the same sheet for a number of pages, which is great if you wish to use the same styles in all your pages.
• When you display a remote image on your page, viewers will be downloading it from the remote location. This will eat up the bandwidth of that remote location. Other Webmasters may not take kindly to this; they might cut you off from including images from their domain, or they may complain to your Web host about your abuse of their images. Obtain permission first.