2014-10-15 4 views
0

Я хочу добавить фоновое изображение с помощью css, но это не сработало.Browser показать мне пустую страницу.Добавление фонового изображения с помощью CSS

мой application.css

home-body { 
    background-image: url('/home.jpg') no-repeat center center fixed; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

} 

файл home.jpg находится в директории /public/home.jpg.

Как исправить?

+1

вместо 'фоновое изображение:' 'использовать только background'. –

+0

Как выглядит ваша структура каталогов? Вы имели в виду использовать .home-body как класс? – Winter

+2

не должен ли вы иметь домашнее тело как класс или идентификатор? .home-body {...} или # home-body {...} –

ответ

1

Используйте этот код. Используйте фоновое изображение вместо фонового изображения и убедитесь, что вы вставили правильный путь изображения в url().

html, body { 
margin: 0; 
padding: 0; 
height: 100%; 
width: 100%; 
} 
    .home-body { 
    background: url('/home.jpg') no-repeat center center fixed; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

} 
+0

Это не повлияет. Фон - это псевдоним для всех 5 свойств. background-color, background-image, background-position, background-repeat и background-attachment – Winter

+0

Это работает, когда я добавляю свойства ширины и высоты, но он выглядит плохо не весь экран, а со всех сторон белого кадра.why ? – 138weare

+0

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

1

Если вы используете внешний файл CSS ... обязательно привяжите файл изображения относительно файла CSS. Например

-ROOT -css -file.css -background.jpg -index.html

вам потребуется:

background("../background.jpg");

потому, что ".." принимает вас один каталог :)

1

это может быть вызвано 3 проблемы

1- home-body не является тегом html.so это должно быть id или имя класса tag.so вы должны использовать .home-body для имени класса и #home-body для идентификатора.

2- вы не учитывают фоновое изображение correctly.if вы хотите, чтобы убедиться, дайте URL как абсолютный путь к изображению как http://yoursiteUrl/public/image/image.png

3- файл CSS не загружен на вашей странице. убедитесь, что он загружен на ваш сайт правильно, если он загружен, тогда проблема первая или вторая часть, упомянутая здесь.

0

очень легко, как это ....

.play{ 
    background: url("media_element/play.png") center center no-repeat; 
    position : absolute; 
    display:block; 
    top:20%; 
    width:50px; 
    margin:0 auto; 
    left:0px; 
    right:0px; 
    z-index:100 
} 
Смежные вопросы