How to Position Graphics on CSS3 Sites

In essence, to position graphics in CSS3 sites you use the combination of the left, right, top, and bottom properties to provide basic positioning. Tweaking the position involves using the margin-left, margin-right, margin-top, and margin-bottom properties. To ensure that the image stays in one place, normally you set the position property to absolute. All positioning is relative to image size, which you set by using the height and width properties.

Background images also have positioning functionality. You can also control the background image position, margin, and size. The following procedure provides an example of how you might modify the SingleImage example to place a single copy of the image in the center of the page (and keep it there no matter how the page is scrolled).

  1. Open the SingleImage.CSS file.

  2. Modify the body style so that the image is fixed in the center, as shown here.

    body
    {
     background-image: url("CuteCat.jpg");
     background-color: SaddleBrown;
     color: SeaGreen;
     font-size: x-large;
     text-shadow: 1px 1px Yellow;
     background-position: center;
     background-attachment: fixed;
    }

    The background-position property makes it possible to define the placement of the primary copy of a background image. The default setting places the image in the upper-left corner, which may not be very pleasing to the eye.

    The background-attachment property defines how that image is attached to the browser’s background. Setting this value to fixed means that the image stays in the same location even when the user resizes the display or scrolls the content.

  3. Save the CSS file as BackgroundPosition.CSS.

  4. Open the SingleImage.HTML file.

  5. Modify the <link> tag so it looks like this:

    <link rel="stylesheet"
     href="BackgroundPosition.CSS" />
  6. Save the HTML file as BackgroundPosition.HTML.

  7. Load the BackgroundPosition page.

    You see the background. Notice that the initial image is now centered and the copies radiate out from it.

    image0.jpg
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.