I am new to this.
I have a funny situation where my file paths for images show up fine for the images linked in my index.html file, but not for the background image that I have set in my css file.
Images for both files are located in the same place. Root directory< img folder< images are here.
My image code in the HTML looks like this:
<src="img/imgname.extension" alt="something" />
My image code for the background in the css looks like this:
background: url("img/imgname.extension")
Is this file path correct?
URLs for CSS files are relative to the URL of the CSS file, not the HTML document that loads the CSS file.
Presumably, your CSS file is at (root)/css/style.css or similar, so you could need to go up a level (../) to get to the root before going down into the img directory.
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.
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
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.
so evidently according to this Using relative URL in CSS file, what location is it relative to?, css that is loaded from the link tag references files in relation to the folder that the css file is in...
so here's my directory structure:
httpdocs/
css/
thecss.css
bg.png
so thecss.css contains the following entry
#guinea {background-image:url(bg.png)}
but the problem is...the image is not showing up even though it's in the exact same directory with the css....
on the other hand if I change it to this:
#guinea {background-image:url(http://localhost/css/bg.png)}
it would work!
using url(/css/bg.php) doesn't work either...
what am I doing wrong? why is my relative url include not working?
I would say it's best to separate your images and your styles.
So place your bg.png in an images folder and reference it as so...
#guinea {background-image:url(../images/bg.png)}