Advanced Search

Return to Snippet

Revision: 63777
at June 6, 2013 05:05 by COBOLdinosaur
Initial Code 
#curtains {
                transition-property:background-position;
                transition-duration:2s;
                transition-timing-function:ease-out;
                border:1px solid blue;
                text-align:center;
                font-size:200%;
                font-weight:bold;
                color:black;
                width: 400px;
                height: 300px;
                margin:auto;
                background: url(../images/curtains-left.jpg) 0px 0px no-repeat, 
                url(../images/curtains-right.jpg) right top no-repeat, 
                url(../images/sunrise.jpg) left top repeat-x; 
            } 
#curtains:hover {
                            transition-property:background-position;
                            transition-duration:2s;
                            transition-timing-function:ease-out;
                            color:white;
                            background-position: -201px 0px, 450px 0px, left top;
                        }
Initial URL 
http://coboldinosaur.com/pages/CSS_Background_Images.html
Initial Description 
Each image is positioned, dimensioned, and repeated according to the comma separated values in the other background properties. The images in the list are layered front to back in the same order they are listed in the rule declaration. If a background color is specified it will be the bottom layer.
Initial Title 
Curtain Effect Using Multiple Background Images
Initial Tags 
images, background, CSS3, html5
Initial Language 
CSS