Forums

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
    Posts
  • #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-image:url(../images/banner-shadow-only.png);
    background-repeat:none;
    background-position: center bottom;
    padding: 0px 0px 0px 0px;
    }

    HERE IS MY ACTUAL TEMPLATE CODE – NOT TOO CRAZY – THE CSS IS FURTHER DOWN.


    HERE IS THE CSS ON THE ID’S


    #shadow-slice {
    background-image:url(../images/dvsport-banner-shadow-only.png);
    background-repeat:none;
    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;
    }
    #93328
    davidlab.be
    Participant

    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 http://www.css3.info/preview/box-shadow/ on the #banner-container and drop the #shadow-slice all together.
    Cheers.

    #93335
    Billy
    Participant

    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).

    #93363

    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.

    ***UPDATE***
    This template does have a live demo online to view and see the the CSS.
    http://www.mojo-themes.com/item/empire-wordpress-theme-flexible-and-sophisticated/demo/
    That might make it a bit easier to see something live.


    @springlab

    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.
    9b928i.png
    http://tinypic.com/r/9b928i/5

    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.
    j75d28.png
    http://tinypic.com/r/j75d28/5

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

    #93464
    noahgelman
    Participant

    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.