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
Related
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 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
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>
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 have few web pages sitting in different directories and my goal is to have some sort of organized structure so that I can access to js or css files without hardcoding the path.
For instance, the directory structure is:
root --- js --- some.js
|
|--css --- some.css
|
|---pages ---- main.jsp
|
|---other----foo---- foo.jsp
|
|--bar --- bar.jsp
Then main.jsp and foo.jsp tries to reference some.js but has to have different path.
( main.jsp )
<script type="text/javascript" src="../js/some.js"></script>
( foo.jsp)
<script type="text/javascript" src="../../js/some.js"></script>
This is not ideal if I want to change the location of main.jsp or foo.jsp, I have to come back to each files and change the path manually.
I am thinking to have factory class that has full path for each files so that it would look something like:
<script type="text/javascript" src=<% Factory.getFullPath(some.js) %> ></script>
In this case, I can still move files freely and not have to come back to each file.
Can I get some opinion to my approach? Is there other way to solve this?
Use a context-relative path. It will make the path absolute to the domain root. You can obtain the context path by HttpServletRequest#getContextPath(). In JSP, the HttpServletRequest is available by ${pageContext.request}.
<script type="text/javascript" src="${pageContext.request.contextPath}/js/some.js"></script>
(the contextPath itself already starts with a /, so you don't need to prefix it yourself)
You can also set it using the HTML <base> tag so that every relative URL in the page becomes relative to it. This way you don't need to copy ${pageContext.request.contextPath} over all the place.
<base href="${pageContext.request.contextPath}"></base>
<script type="text/javascript" src="js/some.js"></script>
This has however one caveat: anchors, like <a href="#foo"> will also become relative to it. You need to take this into account as well if you go for this.
See also:
Is is recommended to use <base> tag in HTML?
mm i'm not really sure if a factory is the most appropriate way to do this, maybe it will work.. i remember that for that i used an interface where i implemented some constants including the JS and CSS folder path
public interface Configuration {
public static final String SERVER_URL = "http://localhost:8080/";
public static final String CSS_URL = SERVER_URL + "css/";
public static final String JS_URL = SERVER_URL + "js/";
}
and then i'd have to import this interface in the servlet and call it like this:
...src="<% Configuration.JS_URL %>some.js" />..
that way if you change your folders name or path. you'll only have to change the configuration