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

[usuallyresourceful]

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.

Lorem ipsum ...

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.

/* Frontpage Slideshow: Setup Steps */

/* Please refer first to the online documentation here: http://www.joomlaworks.gr/content/view/74/41/ */



// 1. Enter the name of your slideshow

$slideshow = "sport";



// 2. Enter your site's URL (without trailing slash)

$siteURL = "http://localhost/sport"; // e.g. http://www.site.com or http://www.site.com/folder if your site is in a subfolder



// 3. Enter the absolute path of your site on the server (without trailing slash)

$sitePath = "/xampp/htdocs/sport"; // e.g. /home/user/public_html or /home/user/public_html/folder if your site is located in a subfolder



// Include the slideshow

include_once($sitePath."/fpss/fpss.php"); // DO NO EDIT THIS LINE



?>








if(!empty($words)){

?>




echo "“$words” ";

$citation = get_option("empire_quote_citation");

if(!empty($citation)) echo "- $citation";

?>

















'); ?>
















'); ?>
















'); ?>

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;

}

[davidlab.be]

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.

[Billy]

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

[usuallyresourceful]

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.

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.

http://tinypic.com/r/j75d28/5

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

[noahgelman]

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

[Author]

Posts