CODEWITHSUNDEEP
cssimagehtml
Myrko Thum
Myrko Thum

Reputation: 3

Add image below div via css?

I planed to add an image below a div. It would be below a navigation bar (div), adding some nice shadow effect (img). Looks like this:

<div>...</div>
<img>

So far it is just in the html code, but I want to keep the html code since it's a theme that gets updated frequently. So I want to alter only the CSS.

Is there a way to do that without altering HTML code, just using CSS?

Upvotes: 0

Views: 624

Answers (2)

Billy Moat
Billy Moat

Reputation: 21050

Two suggestions:

  1. Add the shadow image as a 1px x Xpx repeating background image to the bottom of your nav DIV. So it would sit within the nav DIV. Simply add some padding to the bottom of the NAV DIV to accomodate it e.g.

nav { padding-bottom:6px; background:url(images/nav-bg.png) repeat-x 0 bottom; }

(The above code would presume you have a background image which is 6px in height and probably 1px wide (but that's up to you) and the path would obviously have to be adjusted to be where your actual image was located.

  1. Instead of adding an IMAGE under the NAV DIV add another DIV and once again add a 1px x Xpx shadow image to that DIV through the CSS.

Upvotes: 1

czioutas
czioutas

Reputation: 1068

you cant change the source of an image element through css... you could create the shadow using CSS tho:

    -webkit-box-shadow: 0 8px 6px -6px black;
   -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;

or you could change the image through javascript or from the codehind

javascript: $(element).src = "path to new image";

Upvotes: 1

Related Questions