Time for action — Adding a background pattern

The default background property value for the body is white.

Let's change the background color and add a background image to the body of your site using the following steps:

  1. Add the URL you want to use for the background image.
  2. Edit the background-color property to the background and insert it in the correct section, as shown in the following code:
    body {
background: white;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align:center
}

    Here we are using an 80x80 pixel square image that is used throughout as a background. The image file we used is shown in the following screenshot:

    Time for action — Adding a background pattern
  3. It is best to download the image and save it to the image (img) folder in your theme directory.
    Time for action — Adding a background pattern
  4. Edit the CSS file and change the following line:
    background: blue url(../img/bg00012.gif);
  5. This particular section will look like the following snippet of code:
    body {
background: blue url (../img/bg00012.gif);
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align:center
background patternadding}
  6. When choosing the background color, you can use the eye dropper tool to match the background image color. In this way, you can get the closest match to your background image.
  7. You will need to save the file and upload it to the CSS folder in the theme folder of your site. You must always check what happens after you do this by browsing through your website and reloading the pages.

What just happened?

When you decide on using a background image for a web page, there should be an alternative means for the web page to remain similar in case the image does not appear correctly in a browser. Using a background color is useful in such situations.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.16.54.63