Images in CSS

Add shadow to images:

<html>
    <head>
        <style type="text/css">
        .image1
        {
            border: 1px solid #ccc;
            margin: 5px 10px 5px 0px;
            padding: 5px;
            box-shadow: 2px 2px 3px rgba(30,30,30, 0.3); -moz-box-shadow: 2px 2px 3px rgba(30,30,30, 0.3); -webkit-box-shadow: 2px 2px 3px rgba(30,30,30, 0.3);
        }
 
        .image2
        {
            border: 1px solid #ccc;
            margin: 2% 4%; 
            padding: 10px;
            box-shadow: 2px 2px 3px rgba(30,30,30, 0.3); -moz-box-shadow: 2px 2px 3px rgba(30,30,30, 0.3); -webkit-box-shadow: 2px 2px 3px rgba(30,30,30, 0.3);
        }
        </style>
    </head>
 
    <body>
        <img class="image1" src="image1.jpg" width="300" />
        <br />
        <img class="image2" src="image2.jpg" width="300" />
    </body>
</html>

Create a rollover effect using a single image:

Create an image containing multiple states. For example if a single image is of 25px height, the entire image should be 50px high.
Create the following styles:

a {
    display: block;
    width: 200px;
    height: 25px;
    background-image: url(/images/button.gif);
    background-position: 0px 0px
}
 
a:hover {
    display: block;
    width: 200px;
    height: 25px;
    background-image: url(/images/button.gif);
    background-position: 0px 25px
}

Place an image at the top of the page. It may serve as a banner:

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            .top {
                background-image:url(image.png);
                background-position: top;
                background-repeat: no-repeat;
 
                position: relative;
                margin: auto; padding: 0;
                min-height: 90px;    
            }
        </style>
    </head>
    <body>
        <!-- Page top -->
        <div id="top">
            <div class="top">
            </div>
        </div>
    </body>
</html>

Wisenheimer Brainstorm Wiki

User Tools

Site Tools

Images in CSS

Page Tools