How to Change Repetitive Backgrounds on CSS3 Sites

There are situations where you only want a single copy of a background picture on your CSS3 site. It may be that the image you’ve used is something that doesn’t repeat well or is large enough that you really don’t want it repeated. The following procedure demonstrates a technique you can use to tell the browser to use just one copy of a background image.

  1. Open the BackgroundPosition.CSS file.

  2. Modify the body style so that the image doesn’t repeat, 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;
     background-repeat: no-repeat;
     background-size: 80%;
    }

    The background-repeat property is set to no-repeat so that the browser knows to display just one copy. Because there’s just one copy and the image may not be the right size to provide a good presentation when the user resizes the browser, you should also set the background-size property to resize the image automatically.

  3. Save the CSS file as NoRepeat.CSS.

  4. Open the BackgroundPosition.HTML file.

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

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

  7. Load the NoRepeat page.

    You see the background. There’s just one image in the center now — and when you resize the browser, the image automatically resizes as well.

    image0.jpg
blog comments powered by Disqus
Advertisement

Inside Dummies.com