I have web application located at http://{some-domain}.com/SubFolder - so this address can be considered as root folder.
But when I am trying to set image URL in CSS
background-image: url( "img/logo.png" );
and access application http://{some-domain}.com/SubFolder then image address is interpreted as
http://{some-domain}.com/img/logo.png
instead of
http://{some-domain}.com/SubFolder/img/logo.png
The "SubFolder" part of path is skipped, so image could not be found. Are there any way to resolve this issue without using JS or server-side logic? I am unable to specify image URL as
background-image: url( "SubFolder/img/logo.png" );
because this "SubFolder" part is about to change and should not be hardcoded.
You can try this
background-image: url( "../img/logo.png" );
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 want to add an image inside my django homepage, but I always cannot get the correct location of the image file I want(yellow high light)
The picture below are the thing I type so far:
https://i.stack.imgur.com/ecyQu.png
also in the same file
{% load static %}
body {
background-image: url('{% static "/bitcoin.jpg" %}');
}
Do I need static whenever I want to insert image in Django2.0? also,
I see some people open separate static file and some ppl put image inside the templete. I am confused where I should put? How can put the background image inside the html??
thank you so your answering!!!!
update ** this is what I have so far
enter image description here
updat2 ** the only refer to admin file only,
enter image description here
You can use inline CSS just for that case. You already have a .wrapper element, so if you want to put a static served image you'd do something like this:
<div class="wrapper" style="background-image: url('{% static 'default_page/bitcoin.jpg' %}');">
Your content here
</div>
If you want to use in your CSS files, just use the absolute path according to your static configuration. If you serve your static files using /static (that means, the path /static/default_page/bitcoin.jpg is correct and shows you the desired image), you can just put into the CSS something like:
body {
background-image: url('/static/default_page/bitcoin.jpg');
}
Hope that works!
EDIT:
As Thomas said, you've placed the image in the wrong folder (inside templates instead of on your static files folder). Refer to this to configure your project the right way.
You've placed your bitcoin.jpg in the same folder as your templates. Django serves all static file, such as pictures, from the static directory. Only templates go in the template directory. Create a directory called static inside your hompage app, create a directory inside that called default_page, and place your background image there. Restart the dev server, and your image should appear.
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 this element in my index.cshtml page:
<section class="parallax parallax-2 padding-xxs" style="background-image: url('mySiteName/assets/images/shutterstoc/img1.jpg');">
<div>some content </div>
</section>
As you can see I have style attribute.
If I change style attribute to this:
style="background-image: url('~/assets/images/shutterstoc/img1.jpg');"
The background image is disappear and I get this error in web console:
Failed to load resource: the server responded with a status of 404 (Not Found) img1.jpg
**Update*
The path to the image is:
http://localhost/assets/images/shutterstoc/img1.jpg
As you can see the mySiteName is missing.
Update2:
I try this path:
<section class="parallax parallax-2 padding-xxs" style="background-image: url('./assets/images/img1.jpg')">
But still I get error above.
Why do I get error Failed to load resource and how to fix it?
The tilda sign ~ can be used in razor views to get the app root path. It will not work for css style sheet files.
When razor executes the view, if it finds the ~ , it will be converted to the app root base path.
Just use the path without the ~
background-image: url('./assets/images/shutterstoc/img1.jpg');
The image url is relative the stylesheet. So adjust the prefix . to ../ as needed depending on your location of the style sheet and the assets directory.
.someCssClass {
background-image: url('./assets/images/shutterstoc/img1.jpg');
}
Like i mentioned above, the image location is relative to the the location of the style sheet . If you hard code the style in the view/page, it will be relative to the page's url. So while the request yourSiteBaseUrl/ works , neither yourSiteBaseUrl/Home/ or yourSiteBaseUrl/Home/Index won't work, even though those 2 routes return the same action method and view/page. So i recommend not doing that.
Move the definition to the css file and use the correct relative path there tot he image location. It will then work for yourSiteBaseUrl/Home/Index and yourSiteBaseUrl/Home and yourSiteBaseUrl
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.