I've been trying to add a background image to my rails app but no matter what I try I cant get it to work, this is basic stuff and I don't know what's going wrong. I had it working yesterday but my computer crashed and I hadn't saved my view file after adding the background image.
I've tried:
<body background="bg.png">
as well as:
background-image: url(/assets/bg.png);
and even:
body {
background: url(bg.png);
}
but nothing will work, what am I doing wrong?
To serve the image from asset-pipeline do the following:
body {
background: image-url(bg.png);
}
To use it inline under .erb files:
<div style="background-image: url('<%= asset_path('some_image.jpg') %>') ">
What you are trying to do would work if the image was placed under public folder.
Similar questions: How to set a background image in rails from css?
If the image is in public directory then
background-image: url('/bg.jpg')
If image in app/assets/images/bg.jpg
background-image: url('/assets/bg.jpg')
Also, set the below mentioned setting in developement.rb(or other environment on which you are running the code)
config.serve_static_assets = false
config.assets.compress = true
config.assets.compile = false
Related
In my django project I try to add background image to html template. But it does not work my code is like this
background-image: url("/img/bg.jpg");
error
GET http://127.0.0.1:8000/img/bg.jpg 404 (Not Found)
Please help me to fix this
I try it different ways...
Project Structure
Try this:
background-image: url("./img/bg.jpg");
Also can you post an image showing structure of your project?
replace your bakground- image with this code
background-image: url("{% static "/img/bg.jpg" %}");
after that add this in your setting file
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'templates').replace('\\','/'), ] follow this answer in stackoverflow [stackoverflow link][1] hope it works.
Right, so I'm trying to add a background image to my website. However, The image just won't appear. The path is correct but it just comes up blank when I load the page. Do you have to do something special to the path in Laravel for it to work? I am also using a master blade file which all other views extend, I'm not sure if this affects it.
Here is my CSS:
html {
background: url("/storage/background/background_1.jpg");
}
You are not able to find the image because /storage is not accessible from the server. How to fix it is to make a symlink via the artisan command:
php artisan storage:link
Or you could ofcourse store your image in public/img/yourimage.png and call it like this:
html {
background-image: url("/img/yourimage.png");
}
Here is the working code:
style=" background:url('<?php echo "/yourFolderOfImage/$item->item_img1" ?> ')"
try adding the style of the background image on the head section of the page. works for me.
I am trying to change the background for my play.erb page but I'm struggling to get the image (that is held locally) to show. The page works when using a placeholder image provided online. The error message I am getting is this.
127.0.0.1 - - [06/Mar/2018:21:55:49 +0000] "GET /images/map.jpg HTTP/1.1" 404 515 0.0137
As I understand the 404 reflects the fact that the image can't be found.
I have looked at other SO responses and have tried moving the jpg into the same directory, adding and removing quotation marks and adding the 'public' and 'image' directories, all to no avail.
Can anyone see where I am going wrong? I have added the code and my directory structure below.
Thanks for your time.
#play.erb
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/public/images/map.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
File structure
Root Directory
lib (dir)
lib(dir)
my_app.rb, views(dir)
views (dir)
index.erb, play.erb, public(dir)
public(dir)
images(dir)
images(dir)
map.jpg
As per http://sinatrarb.com/intro.html there were two key issues with my file structure and code.
1.) Static files are served from the ./public directory.
I adjusted my file structure to this:
Root Directory
lib (dir), public(dir)
lib(dir)
my_app.rb, views(dir)
views(dir)
index.erb, play.erb, public(dir)
Public(dir) still holds the images(dir) and images(dir) still holds map.jpg.
2.) Note that the public directory name is not included in the URL.
I also adjusted the URL to this:
background-image: url("/images/map.jpg");
This solved the problem.
EDIT: Sorry, I didn't see the Sinatra tag on you post... I will leave this only for information, but sorry there I can't help you...
Only for rails:
The problem on your code is that asset-pipeline create a fingerprint after the file name to inform the browser when you update somenthing, you can't have access of folders inside the public folder (You can confirm trying to access the path on the browser: localhost/images/somenthing.*), only the root of it...
You can use the AssetsHelper for do the job for you!
<style>
...
.bg {
/* The image used */
background-image: url(<%= image_path('map.jpg');
...
</style>
If you try to do this on a *.css or *.scss file, rails will give you a error.
The solution for this case is:
*.css - *.scss
.bg {
/* The image used */
background-image: url(asset_path('map.jpg'));
Hope this answers your question :)
I have a div tag in my rails application (new.html.erb):
<div style="background: url(images/background.jpg) no-repeat;">
</div>
The image is not appearing and I get a ActionController routing error No route matches [GET] "/locations/images/background.jpg"
The problem is that Rails is adding locations/ to the file path which is wrong since my image is correctly located in app/assets/images/background.jpg.
Even if I include the absolute path of the file I'll get locations added to the beginning of it.
Here are my routes (not sure if that helps but it won't hurt!):
locations GET /locations(.:format) locations#index
POST /locations(.:format) locations#create
new_location GET /locations/new(.:format) locations#new
edit_location GET /locations/:id/edit(.:format) locations#edit
location GET /locations/:id(.:format) locations#show
PATCH /locations/:id(.:format) locations#update
PUT /locations/:id(.:format) locations#update
DELETE /locations/:id(.:format) locations#destroy
You need to generate the url using the image_path helper inside your view:
<div style="background-image: url('<%= image_path('background.jpg') %>'); background-repeat: no-repeat">
</div>
The helper is important, because in production your assets could be fingerprinted or hosted remotely (e.g. on a CDN). The helper will always generate the correct url.
Edit:
To reference a background image in a css file, you have two choices. Using base rails, you can add .erb to the end of your css filename and use code substitution as above.
stylesheet.css.erb:
.myclass {
background-image: url(<%= asset_path 'background.png' %>);
}
Alternatively, if you are using the sass-rails gem, you can use image-url or asset-url helpers:
stylesheet.scss:
.myclass {
background-image: image-url('background.png'); // or asset-url('background.png');
}
See the Asset Pipeline Guide for more information.
I am trying to give one of my views a background image. I have found info for rails three on how to do this, but it does not seem to work for me. Here is the link to the info I used: http://makandracards.com/makandra/2977-declare-different-css-background-images-for-different-locales
Here is my welcome.css.scss:
.container {
background-image: url(images/image.jpg)
}
here is welcome/home.html.erb:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>"
lang="<%= I18n.locale || 'en'%>">
<body class="container">
</body>
</html>
Firstly, you won't need to determine a class for the body tag - just call body in your CSS (and override for the specific page you want the background image on)
Secondly, you need to use asset_path helpers:
#app/assets/stylesheets/application.css.sass
body
background:
image: asset-url("image.jpg")
This is the "correct" way to call this, as if you use .erb or any other other methods with the asset pipeline, you run the risk of losing your functionality when you precompile the assets for production
The trick is to use the rails asset preprocessors to allow the use of dynamic paths for your assets. The paths will be used depending on whether you're using your assets dynamically, or statically (in production)
Considering you have image.jpg in your /assets/images folder, the above code should work for you. The SCSS version would be:
#app/assets/stylesheets/application.css.scss
body
{
background: {
image: asset-url("image.jpg");
}
}
--
Update
You can call the welcome css like this:
#app/views/layouts/application.html.erb
...
<head>
<%= stylesheet_link_tag "welcome" if controller_name == "welcome" %>
</head>
CSS File name
welcome.css.scss -> welcome.css.scss.erb
Content
background-image: url("<%=image_path('image.jpg')%>");
I know this question was over a year ago, but none of the answers helped me so I figured out something more unorthodox in terms of managing the background image.
<% if action_name === "homepage" %>
<body class="body-change">
<% else %>
<body>
<% end %>
And then in the css.scss you could have something like:
.body-change {
background: red;
}
So I'm giving the body a certain class if a condition is met. So if I am on the homepage, the body's class will be something else and then I can add detail to that class in my CSS/SCSS. I hope this helps someone because it worked for me. You can also make the if statement more specific by also specifying a controller_name if you have multiple actions with the same name.
Please update your css file as
.container{
background-image: url("/assets/tooltip.png")
}