Code icon

CSS - BACKGROUND

Links


    // BACKGROUND
    background: transparent url(../img/clouds.jpg) no-repeat center center / cover;
    background:
        url(sweettexture.jpg)    /* image */
        top center / 200px 200px /* position / size */
        no-repeat                /* repeat */
        fixed                    /* attachment */
        padding-box              /* origin */
        content-box              /* clip */
        red;                     /* color */


    // BACKGROUND
    background-image: url("img_tree.png"); //there must be a content in the element - tip: outline element div
    background: url(sweettexture.jpg), url(texture2.jpg) black; //Multiple backgrounds, the other properties separated by comma example: 
    background-position: 20px 20px, 100px -10px;
    background-position: right top; center center; left top; //important for where the image grows when resizing
    background-position: right top; center center; 100px 5px; 100% 50px; only 10px, will set height
    background-position: top -20px right 20px;
    background-size: 300px 100px; auto; cover; contain;
    background-repeat: no-repeat; repeat-x; repeat-y; repeat;
    background-attachment: fixed / scroll; // specifies whether the background image should scroll or be fixed
    background-clip: padding-box; border-box; //Specify how far the background should extend within an element:
    background-origin: border-box;
    background-color: lightblue; opacity: 0.3;