Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

WDS29 - All About CSS Backgrounds

In the last article, we learned about various ways to express CSS colors and where we can use them. Now in this article, we are going to see another important thing in web page visuals and that is background.
Let's begin...

CSS Backgrounds

  • Background Color

    • Syntax: background-color: red;
    • Covered in the last article
    • Color can be mentioned in any valid format learned yesterday

  • Background Image

    • Syntax: background-image: url("sample.png");
    • By default, the image is repeated so it covers the entire element.

  • Background Repeat

    • Syntax: background-repeat: repeat-x or repeat-y or no-repeat
    • repeat-x: Repeat image horizontally to fill the screen
    • repeat-y: Repeat image vertically to fill the screen
    • no-repeat: Image does not repeat itself

  • Background Position

    • Syntax: background-position: value where value can be
      • right top
      • right bottom
      • left top
      • left bottom
    • This is useful if you do not want your image to disturb the text

  •  Background Attachments

    • Syntax: background-attachment: fixed;
    • The above syntax will fix the image at the specified position and it will not scroll with rest of page.

  • Background Shortcut

    • Syntax: background: background-color background-image background-repeat background-attachment background-position
    • This is used to write all the above properties in single line.
    • Order of the properties is important. If you do not want the certain property, just skip it but maintain the order.
That's all for today. In the next article, we are going to learn about CSS borders. We will study it in detail as we have not studied it in HTML in deep.
Till then #keepCoding.

This post first appeared on The Coding Express, please read the originial post: here

Share the post

WDS29 - All About CSS Backgrounds


Subscribe to The Coding Express

Get updates delivered right to your inbox!

Thank you for your subscription