фонового изображения для Div

Question

По какой-то причине изображения в фоновом режиме, не хочет появляться здесь код:

<style type='text/css'> 

    .image-background { 
     background: no-repeat center center; 
     box-sizing:border-box; 
     background-color: #cccccc !important; 
     background-image:url('~/images/icons/button.png') !important; 
     width: 420px !important; 
     height: 315px !important; 
    } 

</style> 

<div id="example" class="image-background"> 

    some text... 

</div> 

появляется цвет и текст, а не изображение. Я тройной проверяю, что это правильный путь изображения, так как единственный способ, которым я смог его показать, - это использовать напрямую: <img src="~/images/icons/button.png" /> Что я действительно хочу сделать, это иметь одно изображение в качестве фона и в верхней части этого другого изображения, но Мне нужно получить эту работу

Answer 1

Это ваша таблица стилей в отдельной папке, если вы должны использовать ../images, чтобы перейти к ней, это обычное явление.

Answer 2

Проблема должна быть в URL вы ввели ... Вы должны попробовать следующее в зависимости от папки изображения или таблицы стилей находится

.image-background { 
    background: no-repeat center center; 
    box-sizing:border-box; 
    background-color: #cccccc !important; 
    background-image:url('../images/icons/button.png') !important; 
    width: 420px !important; 
    height: 315px !important; 
} 

изменения background-image:url('~/images/icons/button.png') !important; в

background-image:url('../images/icons/button.png') !important; 

или вы можно попробовать один раз, например

background-image:url('./images/icons/button.png') !important; /*may not work. the double period is sure*/ 

Как вы можете видеть на моем снимке et, все в вашем коде выглядит отлично, за исключением URL-адреса. а не (~) символ try (..) или (.) символ.

 .image-background { 
 
     background: no-repeat center center; 
 
     box-sizing:border-box; 
 
     background-color: #cccccc !important; 
 
     background-image:url('http://animalspicwallpaper.com/wp-content/uploads/2013/11/Happy_Puppy_Wallpaper_ckrd.jpg') !important; 
 
     width: 420px !important; 
 
     height: 315px !important; 
 
    }

<div id="example" class="image-background"> 
 

 
    some text... 
 

 
</div>