Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Multiple Backgrounds with CSS3

    @ashish.kumar
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 268
    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

    html css3
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: