multiple backgrounds css dropshadow page frame

  • I have the following in my style sheet…

    body {
	font-size: 13px;
	font-family:Century Gothic, Helvetica, sans-serif;
	color: #333;
	text-align: center;
	margin:0px;
	padding: 25px;
}

#topshadow {
        height: 62px
        width:1030px;
        background-image: url(images/top-shadow.png);
}

#pageborders {
	width:1030px;
	min-height:100%;
	margin:auto;
        background:url(images/mid-shadow.png);
}

#bottomshadow {
        margin:0px;
	height:66px;
	width:1030px;
	background:url(images/bottom-shadow.png);
}

    I want to have these 3 “borders” around my page creating a drop-shadow effect. Since I can’t rely on -moz box in all browsers I need to use an image. I cannot figure out what I need to do differently in positioning them.

    See what I’m working on here:
    https://blog.vervelifeportraits.com

    I have the following structure:
    <body
    <?php body_class(); ?>>
    <div id=”topshadow”>
    </div>
    <div id=”pageborders”>
    <div id=”page”>
    <div id=”header”>
    <div id=”headerimg”>
    </div>
    </div>
    <div id=”slideshow”>
    </div>
    <ul id=”menu”>

    <div id=”header_bottom”>
    <div id=”header_bottom_left”>
    </div>
    <div id=”header_bottom_right”>
    </div>
    <div id=”twitter”>
    </div>
    <div id=”twitter-status”>
    </div>
    </div>
    <div id=”page_line”>
    </div>
    </div>

    Would I be better off using a div class instead?

    a la … https://www.alistapart.com/articles/cssdropshadows/

    I need help because what I am doing is not working. All of the images are showing up in the correct places but the mid-shadow image is overlapping the top-shadow and bottom-shadow images giving it a wonky look in the corners.

    If it weren’t for ie, I would just use code to create the drop shadow in the #pageborders div but it looks like crap in ie that way.

Viewing 1 replies (of 1 total)

  • What you might want to try, in order to simplify things a bit is the following.

    Use this css class wherever you want a drop shadow :

    .shadow {
	box-shadow: 5px 10px 25px #666;/*CSS3*/
	-khtml-moz-box-shadow: 5px 10px 25px #666;/*Konquerer*/
	-moz-box-shadow: 5px 10px 25px #666;/*Firefox*/
	-webkit-box-shadow: 5px 10px 25px #666;/*Safari*/
}

    Then, to make it work in ie, use this javascript code: https://css3pie.com/

    You’ll end up with something like this:

    .shadow {
	box-shadow: 5px 10px 25px #666;/*CSS3*/
	-khtml-moz-box-shadow: 5px 10px 25px #666;/*Konquerer*/
	-moz-box-shadow: 5px 10px 25px #666;/*Firefox*/
	-webkit-box-shadow: 5px 10px 25px #666;/*Safari*/
behavior: url(path/to/PIE.htc);
}
Viewing 1 replies (of 1 total)
  • The topic ‘multiple backgrounds css dropshadow page frame’ is closed to new replies.