fl0rean
September 21, 2019, 5:17pm
#1
Hi, I am having trouble including the background image in the CSS file for the project “Dasmoto’s Arts & Crafts”.
Here is my code:
h1 {
background-image: url(‘01 Images\01 pattern.jpeg’);
width: 100%;
background-position: center;
background-size: 200%;
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
Can I use this relative path?
I already tried a direct path, “image url”, and changing the width, but it doesn’t display the image.
The other images which I included in the html file are working perfectly fine when I use the relative path.
Can somebody help?
1 Like
mormin
September 21, 2019, 5:43pm
#2
fl0rean
September 21, 2019, 5:55pm
#3
Thanks, this works for me.
However, I prefer using a relative path just like I use in the html file. Is this possible in the css file as well?
mormin
September 21, 2019, 6:02pm
#4
Hm, I found this at stack overflow:
“Partial URLs are interpreted relative to the source of the style sheet, not relative to the document”
So, try maybe to double check your path ‘images\pattern.jpeg’ relative to the .css file and not relative to the .html
edit: you might try ‘.\images\pattern.jpeg’, notice the dot
1 Like
mormin
September 21, 2019, 6:10pm
#5
Actually it’s the darn backslash… You should use slashes ‘/’ instead.
So that line should be something like:
background-image: url("./images/pattern.jpeg");
fl0rean
September 21, 2019, 6:16pm
#6
You are the man! Thanks a lot, this works for me:
background-image: url(“01 images/01 pattern.jpeg”);
no dot needed.
So in general I have to use slashes in css files when using urls? Or how can this be generalized for future projects?
2 Likes
mormin
September 21, 2019, 6:22pm
#7
I’m glad it worked. I guess it’s always slash, since url’s are always with slash, contrary to the windows command line for example.
1 Like
fl0rean
September 21, 2019, 6:32pm
#8
Ah okay. God to know. Thank you for your fast response.
Yeah, I had the same problem.
I found out that the relative path that I was using is didn’t account for where the CSS file is. So i had to go up two directories “…/…/” then set the path for the image. Like this:
“…/…/resources/images/Image1.jpeg”
After that it worked.
1 Like
smax88
August 17, 2020, 11:04am
#10
That is the solution that worked for me. Until this point I didn’t know how to go up in directories in a relative path.
For some reason mine worked with background-image: url("…/…/resource/pattern.jpeg");
Hi, I’m also having trouble with inserting a background image in using a relative path, and I feel I’ve tried every possible permutation! My best attempt code is:
.header {
text-align: center;
background-image: url("…/…/resources/images/image1.jpeg");
font-size: 100px;
font-weight: bold;
}
based on the comments above. For reference, my file structure is
Any help would be very much appreciated! Thanks
I was having the same problem and what solved my case was writing the complete image address:
header {
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url("/home/leandro/projects/Dasmoto’s_Arts_&_Crafts/resources/images/pattern.webp");
}
even if a top folder, like ‘/home/’, is removed the background image wouldn’t display anymore.