Я использую рельсы 3.2, и мне нужно установить фон для одной из страниц, и я пробовал много способов, и ничего не получилось, поэтому, чтобы найти хорошую помощь. Я пробовал
background: url(<%= asset_path 'background.jpg' %>)
background: url("public/background.jpg");
background-image:url('/assets/images/background.jpg')
и ничего не получилось. Пожалуйста, помогите мне.
В вашем 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
Для sass (scss) этот код работает со следующим путем изображения
приложение/активы/изображения /pictureTitle.png
body {
background-image: image-url('pictureTitle.png');
}
Вам также может понадобиться перезагрузить сервер rails.
Если у вас есть изображение в вашем общедоступном каталоге, например public/bg.jpg
background-image: url('/bg.jpg')
Если у вас есть изображение в app/assets/images/bg.jpg
background-image: url('/assets/bg.jpg')
Если вы используете sass (scss), используйте функцию image-url:
body {
background-image: image-url('texture.png'); // link to /assets/images/texture.png
}
Я следил за приведенными выше предложениями (спасибо!) - на всякий случай, это не работает и для других: это решение сработало для меня:
.myClass {
background: image-url('myPicture.png');
}
поэтому вместо "background-image" мне пришлось использовать "фон" в моем scss.
Проблема может быть более глубоко укоренившейся, чем вы думаете. Скорее всего, это не проблема с Rails-активами, как многие полагают, но "недопонимание" между вашими элементами html. Вот почему:
Прежде всего, обманите свой код, поместив обратное изображение в элемент body.
body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;} /* For a full size background image */
Как только вы поймете, что консоль больше не дает 404, подтвердите, что изображение действительно загружается с помощью этого:
http://localhost:3000/assets/pic-name.jpg
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% не работает.
Попробуйте код ниже, он определенно будет работать:
.background-style {
background-image: url("../images/background.jpg");
}
Хорошо, надеюсь, это поможет кому-то! Я был в похожей ситуации, которая недавно искала реализацию образа для темы. Это решение работало для меня в файле 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>
Я боролся с этим целый день. Наконец, я начал работать как в разработке, так и в производстве, кодируя 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
Множество ответов на этот вопрос, решил, что я добавлю свое решение, которое касается исходного вопроса, так как они первоначально пытались использовать, среди прочего, помощника ERB:
перейдя по ссылке сверху от Kangkyu, я узнал, что можно добавить расширение .erb в мой файл .css. Что, безусловно, и сделал Кангкю.
application.css.erb
Это дает мне доступ к вспомогательным методам.
Вместо того, чтобы искать правильный путь к изображению, я использовал:
<%= asset_path "image_name.png" %>
поэтому моя пара CSS свойство/значение выглядит так:
background-image: url(<%= asset_path 'foo.jpg' %>);
если у вас есть ваш образ в приложении/активах/изображениях, а его имя - "zi-fullscreen-bg.png", например то вы можете использовать
.hero-unit.fullscreen-image-bg {
background-image: url('zi-fullscreen-bg.png');
}
по крайней мере, это сработало для меня!
Кажется, что работают двойные кавычки.
Вот мой пример:
body {
background-image: url("sunset");
}
И jpeg sunset находится в папке моих ресурсов.