I am giving background image to hr tag like this.
<hr style="height:6px;background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;border: 0;margin:0px!important">
Now i have saved the image locally. How can i set the path of my image in the above url.
My folder structure is
In app folder i have css, images, ts.
Inside ts i have html page and the above code.
inside images i have "hr-11.png".I specified path like this.
background: url('../images/hr-11.png').
But its not taking that path and no image is there. How can i correctly give the url path.
This will help you & inside example.html:
<hr style="background:url('../images/hr-11.png') repeat-x top left; border: 0"></hr>
also check with: background-image: url('../images/hr-11.png');
App
|-images
|-css
|-ts
|-example.html
There is a mistake in the path. The correct path should be like: background: url(images/hr-11.png) repeat-x 0 0
There are rules for url routing:
./images will go one level up. which means, if you are in css folder and you have a container folder of content for example, the path will search one level up meaning, content/images.
App
|-content
|-images
|-example.png
|-css
|-example.css
../images will go two levels up, if you are in css folder and you have a container folder of content for example, the path will search two levels up meaning, main_project/images.
App
|-images
|-example.png
|-content
|-css
|-example.css
~/images will search the entire folder for the given file,
for example from MVC:
~/Scripts/angular.js
/ Or non at all - Will search the current main folder:
Html/Index.html
App
|-Html
|-Index.Html
Related
My file is setup like this:
main folder
index.html
css
image(folder)
and I've tried
background-image: url("../images/vegies.jpg") no-repeat;
("images/vegies.jpg") no-repeat;
('../images/vegies.jpg') no-repeat;
please, can anyone help me ?
If your files are like:
Food/
index.html
style.css
images/veggies.jpg
If you are inside style.css and you want to reach the pic, the path is ./images/veggies.jpg
If you type ../ your path goes one folder outside, if you start with ./ you start from the same folder you are.
I'm trying to use a photo (
that I copied the path from) to make my background image. I added an image earlier using the same method to copy the location and it's showing up.background-image:
it's turning blue in the parenthesis.
I'm brand new and have no idea what to do. Any help would be greatly appreciated!
#body{
background-image: url(/Users/samanthagaiser/Basic_portfolio/assets/images/dot-grid.png);
}
when I "follow the link" in cs code it clicks over to the next window where I have the image saved.
Copy and paste image, .CSS file and .html file in one folder. Or if You have just .html file copy image to same folder as .html then change:
body{
background-image: url('./dot-grid.png');
}
Path to image have to be relative to file where You load it.
Bellow examples:
No 1.
CSS: /resources/css/styles.css
Image: /resources/images/image.jpg
CSS in styles.css:
div { background-image: url('../images/image.jpg');
No 2.
CSS: /resources/css/styles.css
Image: /resources/css/image.jpg
CSS in styles.css:
div { background-image: url('./image.jpg');
./ = look for image in same folder where .css file is.
../ = look for image below folder where .css file is.
../../ = loog for image two folders below .css file is.
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
I have a component and the name of parent folder (not a dircet parent) and i want to access a file that is located under that parent folder.
If that parent folder is the direct parent of the component i would do the following to access the wanted file:
background-image: url('../images/bg.png');
But how can i get that file If i dont know how many levels up the parent folder
something like is positioned in reference to my compnent.
It should be something like the following:
background-image: url('**/images/bg.png');