Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Multiple Backgrounds with CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 235
    Comment on it

    Multiple Backgrounds:-
    We can use multiple background images in CSS background property using a comma-separated list of values. The the first value in the list represents the top layer, with subsequent layers rendered behind successively.

    Below is a demonstration:-

    HTML

    <!DOCTYPE html>
    <html>
        <head>
            <title>multi-image</title>
            <link rel="stylesheet" type="text/css" href="css/style.css">
        </head>
        <body>
            <div class="multiImage"></div>
        </body>
    </html>
    

    CSS

    .multiImage {

    background: url(../images/car.png),
                url(../images/road.png),
                url(../images/hut.png),
                url(../images/sun.png),
                url(../images/cloud.png);
    
    background-repeat: no-repeat,
                       no-repeat,
                       no-repeat,
                       no-repeat,
                       no-repeat;
    
    background-position:
                        297px 350px,
                        0px 40px,
                        173px 45px,
                        290px 0px,
                        10px 10px,
                        right top;
                        width: 400px; 
                        height: 440px;
                    }
    

    loading image

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: