The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Having a hard time using a .png shadow image on a div Google has been helpful, but I’m struggling.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #35808

    Hi all,
    I have created a .png file that is about 50% transparent to be used as a shadow for my banner. I have done some google’ing a tried a few methods, but none have worked for me. The method I am currently using should work, but I need to tweek it somehow. I am using latest version of WordPress and PHP. BTW, get out your paypal emails because I’m buying beers for good answers! I appreciate all and any help.

    Here is a suggestion of the layout I received from Google.

    Theoretically, then I would use some code like below in an attached style sheet to display and shadow and its position.

    #shadow-slice {
    background-position: center bottom;
    padding: 0px 0px 0px 0px;



    #shadow-slice {
    background-position: center bottom;
    padding: 0px 0px 0px 0px;

    html body #banner-container {
    padding: 12px 0 9px 0;
    border-top: 1px solid white;
    border-bottom: 1px solid #d2d1d0;
    float: none;
    color: #3f3a35;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f5f5f1), color-stop(100%, #c7c6c1));
    background-image: -webkit-linear-gradient(#f5f5f1, #c7c6c1);
    background-image: -moz-linear-gradient(#f5f5f1, #c7c6c1);
    background-image: -o-linear-gradient(#f5f5f1, #c7c6c1);
    background-image: -ms-linear-gradient(#f5f5f1, #c7c6c1);
    background-image: linear-gradient(#f5f5f1, #c7c6c1);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#f5f5f1', endColorstr='#c7c6c1');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f1', endColorstr='#c7c6c1')";
    text-shadow: 0 1px 0 #f3f2f1;

    html body #banner-container #banner {
    float: none;
    width: 990px;
    margin: 0 auto;
    padding: 20px 30px 0 30px;
    text-align: left;
    *zoom: 1;

    do you have live code? sorry but the code you have displayed is truly a mess with mistakes everywhere. Not sure if that is how you actually have it written or there is translation errors from copy and pasting your code into this post. So because of that is more then likely why people are not responding. Help us in order to help you.
    With that said…why make a separate div for the background….why not apply the image to #banner-container. Or better yet use on the #banner-container and drop the #shadow-slice all together.


    All you need to do is give your banner a
    box-shadow: 1px 1px 5px;
    or whatever you want for the size of the shadow (vertical align, horizontal, blur factor) The problem is that if your banner isn’t rectangular, it’ll be displayed as such (all squares are rectangles).


    WOAH! Admin must have cleaned up my code! Yes, initially it was a mess. I had problems showing all the code, then I had to delete some carrots on div tags in order to get things to show up. By that time I have to leave to visit relatives. I will go through my post in edit mode and see how that code cleans up, and post that way in the future.

    Unfortuanately I do not have any code live. I am using XAMPP to create a test site before I replace the current website. But I can post anything you’d like to see.

    This template does have a live demo online to view and see the the CSS.
    That might make it a bit easier to see something live.


    I will try to apply the image to #banner-container directly. I thought that might cause some spacing issues if I included it with #banner-container from the Google’ing I had been doing. I do like the box-shadow property and have used it before, but I want to make a really cool shadow that I think can only be created through a graphic. I think it might help if I show you what I am trying to accomplish and maybe you might have some other thoughts.

    Here is a tinypic link to the .png graphic I would like to use as a shadow image below my banner.

    Here is a tinypic link to a .png graphic showing both the shadow image and how I would like to display it on the banner.

    I really appreciate your responses. In the mean time I will try your suggestions.


    All you need to do is wrap #hero-throbber in a div, give it an ID, and use css to give it bottom padding and a background of your shadow like this:

    //hero-throbber div content

    #shadow-slice {
    background-image:url(../images/dvsport-banner-shadow-only.png) bottom center no-repeat;
    padding: 0px 0px 30px;

    Adjust the padding as needed

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.