Ссылка на изображение SASS

Question

Я пытался установить фоновое изображение в мое приложение Rails с помощью SASS Однако, когда я пытаюсь:

.header { 
    display: table; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    background-image: image-url("sky.png") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Изображение не загружается, но когда я пытаюсь:

background-image: image-url("sky.png"); 

Изображение загружается частично. Кто-нибудь знает, почему это происходит? Как я могу это исправить?

EDIT

CSS Файл:

html, 
body { 
    height: 100%; 
    width: 100%; 
} 

.vert-text { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

.vert-text h1 { 
    padding: 0; 
    margin: 0; 
    font-size: 4.5em; 
    font-weight: 700; 
} 

/* Side Menu */ 

#sidebar-wrapper { 
    margin-right: -250px; 
    right: 0; 
    width: 250px; 
    background: #000; 
    position: fixed; 
    height: 100%; 
    overflow-y: auto; 
    z-index: 1000; 
    -webkit-transition: all 0.4s ease 0s; 
    -moz-transition: all 0.4s ease 0s; 
    -ms-transition: all 0.4s ease 0s; 
    -o-transition: all 0.4s ease 0s; 
    transition: all 0.4s ease 0s; 
} 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.sidebar-nav li { 
    line-height: 40px; 
    text-indent: 20px; 
} 

.sidebar-nav li a { 
    color: #999999; 
    display: block; 
    text-decoration: none; 
} 

.sidebar-nav li a:hover { 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
    text-decoration: none; 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 55px; 
    line-height: 55px; 
    font-size: 18px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

#menu-toggle { 
    top: 0; 
    right: 0; 
    position: fixed; 
    z-index: 1; 
} 

#sidebar-wrapper.active { 
    right: 250px; 
    width: 250px; 
    -webkit-transition: all 0.4s ease 0s; 
    -moz-transition: all 0.4s ease 0s; 
    -ms-transition: all 0.4s ease 0s; 
    -o-transition: all 0.4s ease 0s; 
    transition: all 0.4s ease 0s; 
} 

.toggle { 
    margin: 5px 5px 0 0; 
} 

/* Full Page Image Header Area */ 

.header { 
    display: table; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    background: image-url("sky.png") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

/* Intro */ 

.intro { 
    padding: 50px 0; 
} 

/* Services */ 

.services { 
    background: #7fbbda; 
    padding: 50px 0; 
    color: #ffffff; 
} 

.service-item { 
    margin-bottom: 15px; 
} 

i.service-icon { 
    border: 3px solid #ffffff; 
    border-radius: 50%; 
    display: inline-block; 
    font-size: 56px; 
    width: 140px; 
    height: 140px; 
    line-height: 136px; 
    vertical-align: middle; 
    text-align: center; 
} 

/* Callout */ 

.callout { 
    color: #ffffff; 
    display: table; 
    height: 400px; 
    width: 100%; 
    background: image-url("footimage.png") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

/* Portfolio */ 

.portfolio { 
    padding: 50px 0; 
} 

.portfolio-item { 
    margin-bottom: 25px; 
} 

.img-portfolio { 
    margin: 0 auto; 
} 


/* Call to Action */ 

.call-to-action { 
    color: #ffffff; 
    background: #0a5175; 
    padding: 50px 0; 
} 

.call-to-action .btn { 
    margin: 10px; 
} 

/* Map */ 

.map { 
    height: 500px; 
} 

/* Footer */ 

footer { 
    padding: 100px 0; 
} 

.top-scroll { 
    margin-top: 50px; 
} 

.top-scroll a { 
    text-decoration: none; 
    color: inherit; 
} 

i.scroll { 
    color: #333333; 
} 

i.scroll:hover { 
    color: #0a5175; 
} 
/* Responsive */ 

@media (max-width: 768px) { 

    .header { 
     background: image-url("sky.png") no-repeat center center fixed; 
    } 

    .callout { 
     background: image-url("footimage.png") no-repeat center center fixed; 
    } 

    .map { 
     height: 75%; 
    } 

} 

Answer 1

Так что я нашел вас был один и тот же вопрос, как мне и после нескольких часов и часов копать, я наконец понял, как исправить e 1/3 проблема с изображением. Я не разработчик, и это может быть совершенно неправильно, но в css, включенном в стильный портфолио, есть секционный вызов .text-vertical-center. Я не видел его в вашем .css в начальной публикации. Хорошо, чтобы изображение правильно отображалось. Я нашел, что вам нужно добавить

Это исправило проблему для меня. Я вижу, что это были месяцы с тех пор, как вы опубликовали это, но я действительно надеюсь, что это поможет вам или кому-то еще. Если это не правильный способ отображения изображения в .css, не стесняйтесь оставлять мне комментарии.

Answer 2

Вы можете управлять им, как это;

demo

CSS

html { 
    height:100%; 
    width:100%; 
} 

.header { 
    width: 100%; 
    height: 100%; 
    background-image:url("https://www.google.co.in/logos/doodles/2014/dian-fosseys-82nd-birthday-5702250374627328-hp.jpg"); 
    background-repeat:no-repeat; 
    background-position:center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position:fixed; 
} 

Answer 3

следующее css помогает

html,body{ 
width:100%; 
height:100%; 
} 


.header { 
    width: 100%; 
    height:100%; 
    position: relative; 
    background: url("desert.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}