I have made a HTML website connected with a CSS.
body{
background-image: url("imag.jpg");
}
When I run my code, why wouldn't the image show up? As my background image. I have tripled checked all the spelling and the file format of my image.
Does anyone know why the background image won't show up?
The problem is your image is not on the CSS folder. If that line of code is in your style.css file, then its reading from that folder,
if the picture is in another folder then you go for example:
background-image: url("../img/imag.jpg");
Is the image in the same directory as the file referencing it?
Is the image in a directory below?
Is the image in a directory above?
By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example:
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts
there (and so on...)
To move forward, just start with the first subdirectory and keep
moving forward
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.
I have a problem with relative file paths. I wrote this line:
<img src="\bootstrap\Rezepte\GrilledFruitKebab.jpg">
It's not showing the picture, so I wanted to ask if anyone of you can help me.
The whole file path is:
C:\Users\if160109\Downloads\bootstrap-20171222T093142Z-001\bootstrap\Rezepte
The file path of my HTML file:
C:\Users\if160109\Downloads\bootstrap-20171222T093142Z-001\bootstrap\startbootstrap-blog-post-gh-pages\index.html
(I'm working on Windows)
Thank you for reading
(Sry if I'm doing any mistakes, but this is the first questions I ever asked here)
Try, <img src="../../Rezepte/GrilledFruitKebab.jpg">
Remember,
Is the image in the same directory as the file referencing it?
Is the image in a directory below?
Is the image in a directory above?
By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example:
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts
there (and so on...)
To move forward, just start with the first subdirectory and keep
moving forward
Given your directory structure, the correct path would be
../Rezepte/GrilledFruitKebab.jpg
Because the Rezepte directory is a level above where your html lives.
Try change the \ to / and remove the first /
Because this symbol in the first position will take the picture in your root folder. Or look the permission of the image.
You can see more about this here:
Here is all you need to know about relative file paths:
Quick Reminder About File Path
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
or HTML File Paths
Here is the path I am working with - /public_html/websystems/websystems.css
The HTML file I am trying to link is in the public_html directory and named index.html
The CSS file I am trying to link is in the websystems directory and named websystems.css
The contents of the files are shown in the images below.
HTML file
CSS file
Why are none of the styles I've set in my CSS file applying to my HTML file?
Thanks for your help.
Try this,
websystems/websystems.css
Note that, (taken from Quick Reminder About File Paths)
Is the image in the same directory as the file referencing it?
Is the image in a directory below?
Is the image in a directory above?
By "below" and "above", I mean subdirectories and parent directories.
Relative file paths give us a way to travel in both directions. Take a
look at my primitive example:
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
Change the /websystems/websystems.css to just websystems/websystems.css and see if that works. That's a path relative to the current path of index.html.
I'm building a website on my computer's local server, with the plan to upload to my webhost with all the links and relative pathways intact. However, I've run into a problem with how to link to pages and images in directories higher up the hierarchy chain.
For example, let say my website is about food and all my logos and stylesheets are in the main .com directory. Then I add the subdirectory "fruit". Sure, I could keep all my Fruit images in the fruit directory, but how would I link back to my logo and stylesheet, and still have links that work when I upload everything to my webhost? When I would edit websites online, just plugging in the whole address was no problem (caused issues if I ever wanted to change the domain, but it would work), but building a website offline on my computer is causing some organizational issues.
Help?
You have to use ../ to go up on level in a directory
Go Link
If you want to go straight to the root directory. you have to start your URL with /
Go Link
PS: Be aware that relative path inside CSS file will consider the .css file as starting point.
body {
/* Look for image.jpg in the same directory as css file */
background-image: url('image.jpg');
}
div {
/* Look for image.jpg one directory up in the hierarchy */
background-image: url('../image.jpg');
}
You can access the root directory using two dots like this:
../ and then your desired directory like logos or something assuming you are working inside a subdirectory as you mentioned "fruit".
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.