Add image below div via css?

Question

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?

can you give demo in jsfiddle.net

KarSho
– KarSho

2012-12-20 11:55:27 +00:00
Commented Dec 20, 2012 at 11:55 — KarSho
– KarSho, Commented Dec 20, 2012 at 11:55

Billy Moat · Accepted Answer · 2012-12-20 14:45:32Z

1

Two suggestions:

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.

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.

edited Dec 20, 2012 at 14:45

answered Dec 20, 2012 at 12:21

Billy Moat

21.1k7 gold badges47 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Billy Moat Over a year ago

@MyrkoThum - I've added some code into my answer above for you.

Billy Moat Over a year ago

Cool, glad to help, please upvote my answer and accept it when you're able to.

czioutas · Accepted Answer · 2012-12-20 11:54:24Z

1

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";

answered Dec 20, 2012 at 11:54

czioutas

1,0682 gold badges14 silver badges37 bronze badges

2 Comments

Myrko Thum Over a year ago

Thanks, but there was a small misunderstanding there: right now there is no image in the html code. I put it there temporarily but want to remove it eventually, adding a NEW image via CSS below the div. Is that doable?

czioutas Over a year ago

no CSS is "cascading style sheet" you cant add html elements. javascript or codebehind is the way to go if you want to add an element.

Collectives™ on Stack Overflow

Add image below div via css?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related