Добавление фонового изображения в Rails 4

Как включить фоновое изображение в Rails 4? Я пытаюсь добавить его в div, который у меня есть в своем HTML. В настоящее время изображение находится в моем каталоге /assets/images.Добавление фонового изображения в Rails 4

HTML:

<header> 
    <div class="background_image"> 

    </div> 
</header>

CSS:

.background_image { 
    background: url(/assets/header-bg.jpg); 
}

С кодом я в настоящее время, нет изображений отображается

источник

2014-11-13 Liondancer

Не должен быть обратный путь к URL-адресу '/ assets/images/header-bg.jpg' – Bijan

@Bijan хорошо, я думаю, без рельсов 4 да, но я читаю вокруг, и мне кажется, что рельсы делают некоторую предварительную обработку, t требуется часть 'images' – Liondancer

. Посмотрите [Здесь] (http://stackoverflow.com/questions/15257555/how-to-reference-images-in-css-within-rails-4), затем – Bijan

Во-первых, вам необходимо добавить к вашему CSS файл SCSS расширение, подобный main.css.scss.

При том, что вы можете использовать asset helpers, как:

.background_image { 
    background: image-url('header-bg.jpg'); 
}

Как указано в документации, image-url("header-bg.jpg") становится "url(/assets/header-bg.jpg)".

Ваша разметка в настоящее время пуста (div.background_image), поэтому вам нужно добавить height к стилю, чтобы он работал.

<header> 
    <div class="background_image"> 
     <!-- no content --> 
     <!-- add some content or specify some height --> 
    </div> 
    </header>

Примечание: сделать всю эту работу, вы должны использовать sass-rails камень (it's default in rails 4).

источник

2014-11-13 22:51:18 Vucko

Видимо изображение появляется в браузере, но это невероятно мало (думаю, тонкая линия), поэтому оказалось, что он там не был. Однако добавление таких свойств, как 'height: 600px;', отображает изображение. Не уверен, что делать, чтобы правильно отображать это изображение, когда я растягиваю браузер. Мне нужен контент в моем CSS, чтобы масштабировать изображение с помощью браузера внутри поддержания статического размера. – Liondancer

Вы должны использовать процент ('%') вместо фиксированного значения ('px)'. – Vucko

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

background: url('header-b.jpg'); 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: 100%;

Кроме того, вы можете добавить еще несколько CSS для фона в зависимости от размера изображения и или пространство, так как:

background: url('header-b.jpg') no-repeat center center;

fixed Добавление в том, что зафиксирует изображение на месте, но может быть использован.

источник

2016-02-02 21:25:14

Добавление фонового изображения в Rails 4

ответ

Смежные вопросы