I have this:
body {
background-image: url("Images/Background.jpg");
}
But the url it generates is incorrect no matter what variation I use.
When I run my website, the url is localhost/MYSITE as it's plonking it on a local IIS server (not iisexpress).
The image is stored in a folder called Images on the root of the application.
if I inspect the element this is what I get:
background-image: url("Images/Background.jpg");
gives
url("http://localhost/MYSITE/Styles/Images/Background.jpg")
I don't know where the Styles comes from.
background-image: url("/Images/Background.jpg");
gives
url("/Images/Background.jpg")
Which is wrong since it needs to be MYSITE/Images.
background-image: url("~/Images/Background.jpg");
gives
url("http://localhost/MYSITE/Styles/~/Images/Background.jpg")
Styles is the location of the LESS file so I guess that is sorta why?
background-image: url("~/../Images/Background.jpg");
gives
url("http://localhost/MYSITE/Styles/Images/Background.jpg")
What is going on?! Why does it keep doing these weird things?
When I deploy to live it will no longer be IP/MYSITE it will be mysite.mydomain.com so I have to get the relative pathing correct.
If you give url of image in css it path start right from the folder where your css is so if your css file is inside Styles folder and you give background-image url as
url("/Images/Background.jpg");
localhost/MYSITE/Styles/Images/Background.jpg
because your folder structure is like this
Root
Styles
Images
so if you want to point some image in the Images folder from your css file in Styles folder you should write like this
url("../Images/Background.jpg");
It means go to the parent folder that is Root and then Images and then Background.jpg
Related
I'm trying to use a jpeg that I have saved into a file as a background to a html file using its file path as the url. I have the following but it doesn't work. Any thoughts?
<style>
body {
background-image:url('C:\Users\...\background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ok, So giving relative path is very easy, only you need to understand the basic folder structure of your project, although I am not sure how you are keeping your files and folder structure so I will tell the ideal folder structure for front-end project (according to me), and will explain to you how you can use a relative path for assets,
let's keep the main HTML file in a folder named by your project, For example Peadar08 is the project name. so put an index.html file in your folder, and on the same level keep a folder for your assets, like this...
then in ASSETS folder create more folders for your respective assets(images, js, css etc), like this...
Now just see an example for images, and you can follow the same for other assets,
So you can use images in 2 ways,
As an IMAGE by img tag in your HTML, so keeping in mind the above stuture you can use images in your HTML like this.
<img src="assets/images/example.png" alt="altText"/>
So your image will render perfectly as assets and your HTML file is on the same level so just mention the path starting with the folder name.
now see another example if you need to use your image as a background image by CSS
so all you need to do is use of ../ to go one folder back, just because you are in css file and ../ this will take you one folder up, I.e in assets folder and then you can foloow the path. so in your CSS use this..
.ExampleClass {
background-image: url('../assets/images/example.png');
}
to move 2 folder up just use ../../ and so on.
Hope this will help you.
You don't need to specify location directly from the C:, but from the root directory in relation to where your index.html is.
You could just copy the link directly from where you found the image by right clicking the image in the browser and selecting 'Copy Image Address' and paste that in the image URL.
my file structure has 'my site' then 3 html pages, a CSS folder and an images folder. When using the background-image tag in CSS how do I access the images in the folder? i tried background-image: url(images/positive.png, but this did not work.]
Thanks
The background image is getting fetched from the CSS file.
Which means: If your CSS file is located in /Home/style.css and that your background is located at /Home/bg.png, you must specify the following:
background-image url("bg.png");
or:
background-image url("/Home/bg.png");
If the file is located at /bg.png and that your only a folder deep (for example, if your stylesheet is located at /Home/style.css), you can tell the stylesheet to climb up a folder, and then fetch the background, like so:
background-image url("../bg.png");
Hope this helps.
Give this is a try...
background-image: url("../images/your-image-name-here.png");
The "../" basically tells the code that it needs to come out of the CSS folder first, then go into the images folder. Without this step, it is looking for an images folder within the CSS folder.
Try this
background-image: url('../images/positive.png');
From what I can tell, everything is correct... I have an html file called index.html, and a css file that has the background image reference.
It works if I just load the page on a computer, but no matter what I try to put in the css as the background image for index.html, I can't get it to show anything.
I even tried just putting css in the actual index.html file.
<style type="text/css">
body {
background-image: url('/images/warning_small.png');
background-repeat:repeat;
}
</style>
Is there something I don't know about UIWebviews? Does it not like certain images or something?
There is simple trick to follow, it will definitely work. Follow the simple steps..
Create a folder in your project folder system.
Put all the html and resources files in the folder.
Remove unlinked entries from project.
Then add the folder by check the option shown in the image below
The above step should create a blue folder uncommon than other folder.
The blue folder is the trick, when you will run the app in your app folder you will be able to see an extra folder which you added at step 4. Now since all you resource files are in the folder the html file will look for the resources in the folder itself, and it should work.
You might need to tweak the path in the html, but this should work. It works for me always.
Cheers.
I've been attempting to link my external images in my css using background-image: Url('Background.png'); and also tried background-image: Url("Background.png"); but theyre both not working and not showing up on my webpage, however the html page is linking perfectly to my css. I am attempting to build a website locally.
Here is the current file path for my images:
Users/admin/Desktop/images
and the file path for my css:
Users/admin/Desktop/stylesheets
Assuming that by Users/admin/Desktop/stylesheets you mean /Users/admin/Desktop/stylesheets/something.css then Url("Background.png");* would reference /Users/admin/Desktop/stylesheets/Background.png.
You need to include the directory path too. ../images/Background.png.
* if it works at all. I don't know if url is case sensitive or not.
you need to do Url(../images/Background.png)
I have a folder called projects on my desktop and inside the folder I have a file called index.html and a folder called images containing all the images. When I try to call the background: url("images/shadow1.PNG") repeat-y; it doesnt seem to work for some reason, anyone have any ideas why ?
If I put the documents on my desktop the index and images folder and try running the background: url(shadow1.PNG) repeat-y; it works just fine.
Hope that made sense, any information and code examples on how to fix this would be great.
Thanks!
in css file change the background: url("images/shadow1.PNG") to background: url("../images/shadow1.PNG")
It has to return to the root folder (projects) using ../ and then enter the image folder to find the image.
Adding on Sotiris answer. The CSS 'locates' files starting from it's own location. This means you have to navigate to the image from the CSS' directory.
For example: your image reside in /trunk/images and the css in /files/css (I wouldn't suggest those folder names) you would have to go back 2 directories into the /trunk/images directory:
.something
{
background: url(../../trunk/images/image.png) 0 0 no-repeat;
}