How to Write CSS Style for Images

Using Cascading Style Sheets (CSS) to handle images on your web page gives you additional formatting options and lets you remove hard-coded URLs from your HTML file. You can use CSS, a styling language, combined with HTML, to improve the appearance of your web page. You can use the CSS "background-image" property along with a few other image properties to set up a CSS image.

Instructions

    • 1

      Open your CSS file with a text editor, such as Windows Notepad.

    • 2

      Add a new CSS image by adding the code "#myimage { background-image:URL('image.gif'); background-repeat:no-repeat; background-position: right top; background-attachment: fixed; }." The "background-image" property sets the URL of the image. The "background-repeat" determines if the image should repeat horizontally (repeat-x), vertically (repeat-y), both (repeat) or not repeat at all (no-repeat). The "background-position" property sets the starting position of the image. The "background-attachment" property determines if the image should scroll with the rest of the page or not.

    • 3

      Save and close the CSS file.

    • 4

      Open your HTML file in a text editor, such as Windows Notepad.

    • 5

      Add a division (div) with the identification you used in the CSS file, by adding the code "<div id="myimage"></div>." The image will appear on your Web page where you add this code.

    • 6

      Save the HTML file. Load it and the CSS file on your server to see the CSS image.

Related Searches:

References

Comments

Related Ads

Featured