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');
Related
I'm new to coding. Currently working on a digital resume. I'd like to add a background image in CSS without using a url. The image is located in my project file.
I have tried to load the image in chrome and I took the url from that to css, but it didn't load. Any help? Thanks
Maybe your CSS file is not in the same directory as your image, you may need to use relative path URL, here I'll show an example:
Example directory arrangement
If your CSS file is inside the css folder, and your image is inside the img folder,
then you need to write your URL in your CSS file this way:
background-image: url("../img/your-background.png");
I'd say it be easiest if you used CSS to add the background image to your HTMl element. You can either use inline styles or create a css class in a separate file that you import in your HTML file.
https://www.w3schools.com/cssref/pr_background-image.asp
An example for this would be:
HTML:
CSS:
Make sure you use the relative path to your image file. Otherwise it will not load.
Otherwise you could use the HTML image tag:
https://www.w3schools.com/tags/tag_img.asp
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.
[index.jsp][1]
style.css
[issue][3]
[directory structure][4]
While The file is present in css directory all works fine but when it is kept in images folder it doesn't display any images. Please help
I think it's issue related your URL line which you have added. If your CSS file & image in same CSS folder then please make sure your CSS as per below.
background:url('OGSLogo.png') no-repeat;
If you have added image file in images folder and CSS file in CSS folder then please make sure your CSS as per below.
background:url('../images/OGSLogo.png') no-repeat;
I need a background image on my website. I've set it on my .CSS file, which is in a sub-folder. The background image only works if I put the .CSS file on the main website's folder.
I have those folders:
_src (html files source)
_src/_img (where all the images are stored)
_src/_css (where I've put the style.css)
In the head section of my HTML file I use the href equals to _src/_css/style.css
**In the body section on my .CSS file I set the background-image the url _src/_img/red_lines_bg_texture.jpg.
If I move the .CSS file to the Website's root the background image works.
Strangely enough, everything else works on the .CSS file, except - again - the background image.
Any help would be really appreciated.
URLs in CSS are always relative to the .css file unless otherwise specified, for instance, with a beginning slash as in "/imgdir/img.jpg"
Your background image can be set with an absolute url like this
background-image: url('/_src/_img/red_lines_bg_texture.jpg');
with a beginning slash to specify that you are giving a path relative to the root, rather than relative to the .css file.
I've got the solution.
I have the following directory structure relative to the root:
/_src
/_src/_css
/_src/_img.
CSS files only acccess folders RELATIVE TO ITS OWN LOCATION, so in order to access files in _img folder we should use the relative path, like this:
background-image:url("../_img/red_lines_bg_texture.jpg");
It finally works.
Thanks to everyone who tried to help.
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