Scribd Logo
Importer

Bienvenue sur Scribd !

  • CSS Background

    Transféré par

    raghuraman36
    515 vues11 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PPTX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PPTX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    515 vues11 pages

    CSS Background

    Transféré par

    raghuraman36

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PPTX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 11

    CSS Backgrounds

    The CSS background properties are used to


    define the background effects for elements.
    CSS background properties:
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
    CSS background-color
    The background-color property specifies the
    background color of an element.
    Example: Output:
    <style>
    body {
    background-color: lightblue;
    }
    </style>
    <h1>Hello World!</h1>
    <p>This page has a light blue background color!</p>
    CSS background-color
    Example: Output:
    h1 {
      background-color: green;
    }

    div {
      background-color: lightblue;
    }

    p {
      background-color: yellow;
    }
    <h1>CSS background-color example!</h1>
    <div>
    This is a text inside a div element.
    <p>This paragraph has its own background color.</p>
    We are still in the div element.
    </div>
    CSS background-image
    • The background-image property specifies an image to
    use as the background of an element.
    • By default, the image is repeated so it covers the
    entire element.
    Example: Output:
    <style>
    body {
    background-image: url("paper.gif");
    }
    </style>
    <h1>Hello World!</h1>
    <p>This page has an image as the background!</p>
    CSS background-repeat
    • By default, the background-image property repeats an image both
    horizontally and vertically.
    • Some images should be repeated only horizontally or vertically, or
    they will look strange, like this:
    Example:
    <style>
    body {
    background-image: url("gradient_bg.png"); Output:
    }
    </style>
    </head>
    <body>

    <h1>Hello World!</h1>
    <p>Strange background image...</p>
    CSS background-repeat: no-repeat
    Example:
    <style>
    body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    }
    </style>
    <h1>Hello World!</h1>
    <p>W3Schools background image example.</p>
    <p>The background image is only showing once,
    but it is disturbing the reader!</p>
    CSS background-position
    Example:
    <style>
    body {
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
      background-position: right top;
    margin-right: 200px;
    } </style>
    <h1>Hello World!</h1>
    <p>W3Schools background no-repeat, set position example.</p>
    <p>Now the background image is only shown once, and
    positioned away from the text.</p>
    <p>In this example we have also added a margin on the right
    side, so the background image will never disturb the text.</p>
    CSS background-attachment
    Example:
    <style>
    body {
      background-image: url("img_tree.png");
      background-repeat: no-repeat;
      background-position: right top;
      background-attachment: fixed;
    } </style>

    background-attachment: fixed;
    CSS background - Shorthand property
    • It is also possible to specify all the background properties in one
    single property. This is called a shorthand property.
    • The shorthand property for background is background.

    Example:
    body {
      background: #ffffff url("img_tree.png") no-repeat right top;
    }

    When using the shorthand property the order of the property values is:
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
    CSS Multiple Backgrounds
    • CSS allows you to add multiple background images for an element,
    through the background-image property.
    • The following example has two background images, the first image
    is a flower (aligned to the bottom and right) and the second image
    is a paper background (aligned to the top-left corner):
    Example:
    <style>
    #example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
    }
    </style>
    CSS Multiple Backgrounds
    Example:
    <style>
    #example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif)
    left top repeat;
    padding: 15px;
    }
    </style>
    <div id="example1">
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>

    Vous aimerez peut-être aussi