CODEWITHSUNDEEP
css
Shedlor
Shedlor

Reputation: 85

Keep Div Parent Background Image when using Div:hover

So at the moment, I've got a div behind a link, I've set the div background to be a specific image, and I'd like the same image to appear when hovering over that div but a shadow appears around the inside of the box, I have both images with me, but I can't seem to find a way to keep the "Home" background image the same as the "Home:hover" background image but with the shadow box too, I'd like to do this without having to individually place the shadow onto the background image in photoshop.. any thoughts?

Here's the CSS: 

  #Home {
     z-index: 4;
     position: absolute;
     top: 0px;
     left: 707px;
     width: 95px;
     height: 64px;
     margin: 0;
     background: url(../images/button%20texture%20b.jpg) center;
     border-style: solid;
     border-width: 1px;
     border-color: #7F7F7F;
 }

 #Home:hover {
     width:95px;
     background: url(../images/button%20overlay%20b.png) ;
     background-size: cover;
 }

.

     #Home:hover {
     width: 95px;
     background: url(../images/button%20overlay%20b.png) center, url(../images/button%20texture%20b.jpg) ;
     background-size: cover;
 }

Thanks!

Upvotes: 1

Views: 30

Answers (1)

display-name-is-missing
display-name-is-missing

Reputation: 4399

I would recommend using this code:

#Home:hover { background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left; }

As you can read here, you can actually assign multiple background images to an element. The first image stated will be on top, the second below the first image and so on.

Upvotes: 1

Related Questions