Использование фотографии в качестве фона моего сайта

#css #ruby-on-rails

Вопрос:

У меня есть случайное изображение лося, лежащего вокруг, поэтому я хотел использовать его в качестве фона моего сайта ruby on rails. Я немного порылся в Интернете, и вот что я получил.

 html { 
  background-image: url(images/moose.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Вышеуказанное не работает, мой фон по-прежнему белый. Что я делаю не так?
Изображение лося находится в app/assets/images/moose.jpg

Я пытался использовать html body { } в отличие от html и background в отличие от background-image

Ответ №1:

 <html> 

<body style="background-image: url(output.png);">
Hello this is a text line.</body>
</html>

Я предполагаю, что ваше изображение находится в том же каталоге, что и ваша html-страница. В противном случае укажите относительный путь к изображению, например C:/images/output.png

1. Ваш браузер обновлен? и, пожалуйста, укажите расположение ваших папок и файлов в формате html и jpg.

2. Да, и мой Chrome, и Firefox обновлены. Это проект rails, поэтому весь мой html (html.erb) находится в разделе app / asset / views. Мои фотографии находятся в app / assets / images

Ответ №2:

Вы не можете использовать html, вы должны использовать body. Это должно быть:

 body {
    background:url('images/moose.jpg') no-repeat center center fixed;
}

Откройте chrome inspector и посмотрите, какие стили фонового изображения загружаются.

1. интересно, я послушал вас и проверил страницу. Похоже, что свойство background-image, в котором вся строка была зачеркнута, с желтым восклицательным знаком рядом с ним. При наведении курсора мыши на него отображается недопустимое значение свойства

2. @user3277633 извините, все свойства, перечисленные после URL, не являются допустимыми свойствами для background-url атрибута (есть только url), но они есть, когда вы делаете только background: то, что принимает все возможные свойства для фона

Ответ №3:

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

 background-image:url('images/moose.jpg') no-repeat center center fixed;

Вот что говорит определение URL в w3schools. http://www.w3schools.com/cssref/pr_background-image.asp