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 :)
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.
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
I'm trying to set as background an image located at /public/images/my-image.jpg
I've tried
<body background="public/images/my-image.jpg">
and
<body background="images/my-image.jpg">
and
<body background="my-image.jpg">
But I always get 404 (Not Found) on the Chrome console. Any idea why?
I also tried adding this:
<style>
body {
background-image: url("/public/images/my-image.jpg");
}
</style>
But nothing appears in the background of the page.
You need to have a record in the routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
Then you can access the files in the public folder with the twirl helper:
<body background="#routes.Assets.versioned("images/my-image.jpg")">
It would be compiled to
<body background="/assets/images/my-image.jpg")">
You can put it as static text as well.
If you want to change "assets" to "public" or whatever, just change it in the routes file:
GET /public/*file controllers.Assets.versioned(path="/public", file: Asset)
Then your assets would be accessible by the public path, like:
<body background="/public/images/my-image.jpg")">
Still, the #routes.Assets.versioned would be the same:
<body background="#routes.Assets.versioned("images/my-image.jpg")">
This is the reason why #routes.Assets.versioned is preferable way.
As I understand it, you've got a problems obtaining assets in playframework.
Follow the documentation for play framework for assets.
To obtain assets from public directory (if you haven't change the default routes or assets controller), you need to use path with assets/ instead of public/.
Or more preferable using reverse router. In play 2.5x in your case it would be:
<body background="#routes.Assets.versioned("images/my-image.jpg")">
using reverse routing or
<body background="assets/images/my-image.jpg">
with hard coded path.
I think it is not supported anymore in HTML5, try to use css like body {
background-image: url("gradient_bg.png");
}
font: https://www.w3schools.com/tags/att_body_background.asp
In an HTML file I have the following
<style type="text/css">
body {
color: #1e90ff;
background-image: url("abc.png");
}
</style>
The html file is in the same directory as abc.png
The color change is working
I am using the tornado web server to launch a flask app and i get the following warning in my terminal
WARNING:tornado.access:404 GET /abc.png (XX.XXX.XXX.XX) 0.61ms
My image is not displayed, I have tried everything that i found here and it was unsuccessful. Even changing the file permissions (chmod).
Thanks
I suppose this is because the static files are being served by Tornado. If this is the case then you'll have to mention the static_path in the tornado settings.
Something like this:
handlers = [
(r"/", BaseHandler),]
settings = dict(
template_path=os.path.join(PATH, "templates"),
static_path=os.path.join(PATH, "static"),)
app = tornado.web.Application(handlers, **settings)
Now, keep all your static files inside the static directory and all templates in the templates directory.
Also, your style tag will now look like
<style type="text/css">
body {
color: #1e90ff;
background-image: url("{{static_url('abc.png')}}");
}
</style>
because I am new to slidify, maybe doing a mistake
edited : slidify.css
.title-slide {
background-color: #b4f2f2;
background-image:url("C:/download/ibm-db2.png");
}
the color is changed as requested - but the image is not displayed
although the file is in correct location
Directory of C:\download
07/18/2014 08:13 PM 10,315 ibm-db2.png
thanks for all update
best regards, Guy Przytula
Local image works with a relative path from assets folder. For example:
bg:url(assets/img/picture.png)
assets folder is inside your slidify project
Your slidify project:
|
|--index.Rmd
|--index.html
|--assets
| |--img
| |-- picture.png
|
|--libraries
It does not matter where the picture is, but to keep an order you should follow Jorge's advice.
You need to go to this route: and find "slidify.css"
\test1\libraries\frameworks\io2012\css
Look and change this part:
.title-slide {
background-color: #FFFFFF; /* #EDE0CF; ; #CA9F9D*/
background-image:url(D:\\test1\\star-bg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
/* background-image:url(http://goo.gl/EpXln); */
}
As you see the path to my logo file has "\". This is the path I get when using: file.choose().
If you use RStudio probably you won't see the image loaded. You need to go to the folder where the index.html is and open it on any browser.