Держите Div Parent Background Image при использовании Div: hover

Question

Итак, на данный момент у меня есть div по ссылке, я установил, чтобы div был конкретным изображением, и мне бы хотелось, чтобы тот же образ появляются при зависании над этим div, но вокруг ящика появляется тень, у меня есть оба изображения со мной, но я не могу найти способ сохранить фоновое изображение «Главная» так же, как «Главная: зависание» «Фоновое изображение, но с теневым ящиком тоже, я бы хотел сделать это без необходимости отдельно помещать тень на фоновое изображение в фотошопе .. любые мысли?

Вот 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; 
} 

Спасибо!

Answer 1

Я бы рекомендовал использовать этот код:

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

Как вы можете прочитать here, вы можете назначить несколько фоновых изображений для элемента. Первое изображенное изображение будет сверху, второе - под первым изображением и так далее.