HOME
 HTML
 CSS
 PHP
 PHOTOSHOP
 WEB DESIGN
 SITE INFO
CSS
INTRODUCTION
 TEXT FORMATTING
 INTERNAL STYLES
 EXTERNAL STYLES
 ADVANCED CSS

Advanced CSS

Introduction

This article outlines more advanced CSS syntax and techniques, including positioning divs and adding backgrounds to divs.

Position & Backgrounds for Divs

CSS allows you to absolutely position or relatively position something on a page. For example, if you wanted a particular division of text to be 100 pixels from the top of the page and 50 pixels from the left of the page you would write, <div style="position:absolute; top:100px; left:50px;">. You can also specify height and width in the same manner. This is particularly helpful when designing a layout.

There are many attributes in backgrounds for divs that you can change. There is the obvious background-color that has already been discussed. However, you can also have a background-image. See the following example to understand how it is used.

<div style="background-image:url(image.jpg); background-position: center top; background-repeat: no-repeat;}>Text Here</div>

The background-position attribute is for how the background image is positioned in the background of the div. The first value is how it is positioned horizontally, be it left, right, or center. The second value is its vertical position, top, bottom, center. Likewise, the background-repeat attribute determines whether or not and in which direction the background image is repeated; the possible values are repeat-y, repeat-x, repeat, and no-repeat.

The background attribute can be especially useful when creating your own classes, or for example inserting an image into every page. For example, the banner image on every page of this site is inserted as a background image of a div through CSS, rather than using the HTML <img> tag.

Sources / For More Information

<< Prev | Next >>