Как установить фоновое изображение в рельсах из css?

Ответ 1

В вашем CSS:

background-image: url(background.jpg);

или

background-image: url(/assets/background.jpg);

В environments/production.rb:

# Disable Rails static asset server (Apache or nginx will already do this)  
config.serve_static_assets = false

# Compress JavaScripts and CSS  
config.assets.compress = true

# Don't fallback to assets pipeline if a precompiled asset is missed  
config.assets.compile = false

# Generate digests for assets URLs  
config.assets.digest = true

Ответ 2

Для sass (scss) этот код работает со следующим путем изображения

приложение/активы/изображения /pictureTitle.png

body { 
  background-image: image-url('pictureTitle.png'); 
}

Вам также может понадобиться перезагрузить сервер rails.

Ответ 3

Если у вас есть изображение в вашем общедоступном каталоге, например public/bg.jpg

background-image: url('/bg.jpg')

Если у вас есть изображение в app/assets/images/bg.jpg

 background-image: url('/assets/bg.jpg')

Ответ 4

Если вы используете sass (scss), используйте функцию image-url:

body {
  background-image: image-url('texture.png'); // link to /assets/images/texture.png
}

Ответ 5

Я следил за приведенными выше предложениями (спасибо!) - на всякий случай, это не работает и для других: это решение сработало для меня:

.myClass {
   background: image-url('myPicture.png');
}

поэтому вместо "background-image" мне пришлось использовать "фон" в моем scss.

Ответ 6

Проблема может быть более глубоко укоренившейся, чем вы думаете. Скорее всего, это не проблема с Rails-активами, как многие полагают, но "недопонимание" между вашими элементами html. Вот почему:

• Прежде всего, обманите свой код, поместив обратное изображение в элемент body.

  body {
  background: url('pic-name.jpg') no-repeat center center;
  background-size: cover;}  /* For a full size background image */
  

• Затем проверьте консоль инструментов разработчика, чтобы убедиться, что изображение загружено правильно или оно не содержит 404.
• Если вы даете 404, тогда ваш синтаксис css неверен, попробуйте любые другие ответы на этот пост, пока вы больше не получите 404. Для меня приведенный выше пример работал:

• Как только вы поймете, что консоль больше не дает 404, подтвердите, что изображение действительно загружается с помощью этого:

  http://localhost:3000/assets/pic-name.jpg

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

• Это трюк; в этом элементе other, где вы хотите фоновое изображение, мое было header, вставить какой-то текст или некоторые строки, да, просто текст или что-то в этом роде! Мой был:

  <header>
     <%= render 'shared/navbar' %> # To have the nav backgrond as the image
     <div class="container">
        <div class="text-center">
          <h2><strong>Nairobi</strong></h2> <hr>
          <h2><strong>Is</strong></h2> <hr>
          <h2><strong>Just a Beula Land</strong></h2> <hr>
        </div>
    </div>
  

• И, увы, это сработало! Хотя это не показало полного изображения, просто верхняя часть. Но, по крайней мере, я знал, что это сработало.

• И если вы добавляете больше текста, изображение растягивается вниз (больше показано)

Надеюсь, это поможет кому-то. И вместе с этим я понял, что было не так просто разместить фоновое изображение для покрытия nav, а esp, если использовать bootstrap; как nav, так и ваш другой элемент должен быть children того же parent element, например, мой был header, как показано выше, и вам также придется отображать навигацию внутри вашего, скажем, t212 > и каждой другой странице, а не просто отрисовкой на application.html.erb

Обновление

Хорошо, это то, что я сделал, чтобы показать полное фоновое изображение без вставки текстов здесь и там. В моем application.scss, где у вас есть ваш css, я просто добавил свойство height, например

     body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;
height: 600px;}

N.B: Использование height: 100% не работает.

Ответ 7

Попробуйте код ниже, он определенно будет работать:

.background-style {
    background-image: url("../images/background.jpg");
}

Ответ 8

Хорошо, надеюсь, это поможет кому-то! Я был в похожей ситуации, которая недавно искала реализацию образа для темы. Это решение работало для меня в файле home_page_header.html.erb при условии, что у вас есть изображение, называемое blog_image.jpeg, в папке app/assets/images:

<!-- Page Header -->
<header class='masthead' style='background-image: url(assets/blog_image.jpeg)'>
  <div class='container'>
    <div class='row'>
      <div class='col-lg-8 col-md-10 mx-auto'>
        <div class='site-heading'>
          <h1>Omega</h1>
          <span class='subheading'>Sample text</span>
        </div>
      </div>
    </div>
  </div>
</header>

Ответ 9

Я боролся с этим целый день. Наконец, я начал работать как в разработке, так и в производстве, кодируя CSS в представлении, которое содержит фоновое изображение:

<head>
    <style>
        #tile {
            background: url(<%= asset_path 'background.jpg' %>);
            background-size: cover;
            }
    </style>        
</head>

Затем на самом листе я создал div с id = tile следующим образом:

<div id=tile>
  <div class=row>
  ...added more stuff
  </div>
</div>

Ruby 2.3.7 Rails 5.2.0

Ответ 10

Множество ответов на этот вопрос, решил, что я добавлю свое решение, которое касается исходного вопроса, так как они первоначально пытались использовать, среди прочего, помощника ERB:

перейдя по ссылке сверху от Kangkyu, я узнал, что можно добавить расширение .erb в мой файл .css. Что, безусловно, и сделал Кангкю.

application.css.erb

Это дает мне доступ к вспомогательным методам.

Вместо того, чтобы искать правильный путь к изображению, я использовал:

<%= asset_path "image_name.png" %>

поэтому моя пара CSS свойство/значение выглядит так:

background-image: url(<%= asset_path 'foo.jpg' %>);

Ответ 11

если у вас есть ваш образ в приложении/активах/изображениях, а его имя - "zi-fullscreen-bg.png", например то вы можете использовать

.hero-unit.fullscreen-image-bg {
  background-image: url('zi-fullscreen-bg.png');
}

по крайней мере, это сработало для меня!

Ответ 12

Кажется, что работают двойные кавычки.

Вот мой пример:

body {
  background-image: url("sunset");
}

И jpeg sunset находится в папке моих ресурсов.