Scribd Logo
Importer

Bienvenue sur Scribd !

  • CSS Background Property: Definition and Usage

    Transféré par

    Aljon S. Templo
    34 vues5 pages
    zzzzzzzzzz

    Titre original

    11 HTML BackgroundImage

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    zzzzzzzzzz

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    34 vues5 pages

    CSS Background Property: Definition and Usage

    Transféré par

    Aljon S. Templo
    zzzzzzzzzz

    Droits d'auteur :

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

    CSS background Property

    Definition and Usage


    The background shorthand property sets all the background properties in one declaration.

    The properties that can be set, are: background-color, background-image, background-position, background-
    size, background-repeat, background-origin, background-clip, and background-attachment.

    Property Values
    Value Description

    background-color Specifies the background color to be used

    background-image Specifies ONE or MORE background images to be used

    background-position Specifies the position of the background images

    background-size Specifies the size of the background images

    background-repeat Specifies how to repeat the background images

    background-origin Specifies the positioning area of the background images

    background-clip Specifies the painting area of the background images


    background-attachment Specifies whether the background images are fixed or scrolls
    with the rest of the page

    initial Sets this property to its default value. Read about initial

    inherit Inherits this property from its parent element. Read


    about inherit

    CSS background-color Property


    Example
    Set the background-color of different elements:

    body {
    background-color: yellow;
    }

    h1 {
    background-color: #00ff00;
    }

    p {
    background-color: rgb(255,0,255);
    }

    CSS Syntax
    background-color: color|transparent|initial|inherit;
    CSS background-image Property
    Example
    Set a background-image for the <body> element:

    body {
    background-image: url("paper.gif");
    background-color: #cccccc;
    }

    CSS background-position Property

    Value Description

    left top If you only specify one keyword, the other value will be "center"
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom

    x% y% The first value is the horizontal position and the second value is the
    vertical. The top left corner is 0% 0%. The right bottom corner is
    100% 100%. If you only specify one value, the other value will be
    50%. . Default value is: 0% 0%
    xpos ypos The first value is the horizontal position and the second value is the
    vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or
    any other CSS units. If you only specify one value, the other value will
    be 50%. You can mix % and positions

    initial Sets this property to its default value. Read about initial

    inherit Inherits this property from its parent element. Read about inherit

    Example
    How to position a background-image:

    body {
    background-image: url('smiley.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    }

    CSS Syntax
    background-position: value;

    CSS3 background-size Property


    Specify the size of a background image:
    div {
    background: url(img_flwr.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
    }

    CSS background-attachment Property


    CSS Syntax
    background-attachment: scroll|fixed|local|initial|inherit;

    Property Values
    Value Description

    scroll The background scrolls along with the element. This is default

    fixed The background is fixed with regard to the viewport

    local The background scrolls along with the element's contents

    initial Sets this property to its default value. Read about initial

    inherit Inherits this property from its parent element. Read about inherit

    Vous aimerez peut-être aussi