I am trying to get a background image to show properly when my site is live. It only works when in the development environment. Once uploaded, it defaults to background color. I have checked several times to ensure the proper file name is being used and all other aspects work as required. The following is the code in my main.css file.
body {
background-color: #f2f2f2;
font-family: "Lato";
font-weight: 300;
font-size: 16px;
color: #555;
padding-top: 150px;
background-image: url(../img/IMG_0234.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
When I use Devtools on Google Chrome I get the following response :
Failed to load resource: the server responded with a status of 404 (Not Found) http://josejrvazquez.com/assets/img/IMG_0234.jpg
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
The file can be found at
http://josejrvazquez.com/assets/img/IMG_0234.JPG
You need capital .JPG
background-image: url(../img/IMG_0234.JPG);
You live environment is case sensitive. Most *nix systems that run websites are case sensitive in file and folder names. Windows file structure is not case sensitive. This leads to a lot of confusion similar to yours.
Try
background-image: url(../img/IMG_0234.JPG);
Related
I am using html and css to create a website for my school project.
I was writing my script by using vscode and everything was fine on the live-server page.
Live Server
However, when I ran the actual .html file through my browser, it appeared differently from my live-server page.
.html file
I think some wrong with {background-image: url("/images/banner.jpeg");} this tag but I'm not sure. Please help!
<div class="banner"></div>
.banner {
background-image: url("/images/banner.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
padding: 200px 1px;
min-height: 20%;
}
Use a relative and not absolute file path: background-image: url("images/banner.jpeg");
More info: Discrepancy between VS Code live server output and opening the index.html file by itself
I am creating a react app when I want a particular section to have a background image that I have in my images folder which is inside the public folder. Accessing those images seems to be working except for when I try to access them from App.css
Error: Failed to compile.
./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Error: Can't resolve '/images/img-2.jpg' in 'C:\Users\shlok\OneDrive\Desktop\React\react-website-1\src'
App.css
.services {
background-image: url('/images/img-2.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
font-size: 100px;
}
.products {
background-image: url('/images/img-1.jpg');
background-position: center;
background-size: fill;
background-repeat: no-repeat;
color: #fff;
font-size: 100px;
}
.sign-up {
background-image: url('/images/img-8.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
font-size: 100px;
}
The url should look like:
background-image: url('../public/images/img-2.jpg');
You need to get out of your src folder and get into your public folder and then look into the images there.
If the above approach doesn't work, it would be because of the following reason:
In React, it is sort of a compulsion to place the images inside the src folder. Otherwise they are not readily accessible from any code inside the components folder.
Try creating a new folder in your src directory and then shifting the images. Or else you can directly take the whole images folder and cut-paste inside your src folder.
Hey did you try giving the path from the public folder. As per your folder structure your images folder reside in public folder. Can you try giving the path like 'public/images/img-1.jpg'
background-image: url(`${process.env.PUBLIC_URL}/images/image1.jpg`);
I created my portfolio on Gitlab Pages. My style.CSS work partially. background-image: url(..) doesn't display in navigator. However, everything else seems to be working.
My content is in public/img/.png
I tried :
url(/img/.png);
url(public/img/.png);
url(/public/img/.png);
You can check my code here : https://medjaherirany.gitlab.io/resume/
Edit: I went into your code on the inspector, use background-image: url("../img/portrait0.png"); and it works. I will include a screenshot. This is used to go backwards in the directory.
I hope this helps.
As I can see in your CSS file you have used
figure {
background: url(/img/portrait0.png);
background-repeat: no-repeat;
background-position: 80% 111px;
height: 727px;
background-size: 690px;
background-color: #f2f2f2;
}
Change it to
figure {
background: url("img/portrait0.png");
background-repeat: no-repeat;
background-position: 80% 111px;
height: 727px;
background-size: 690px;
background-color: #f2f2f2;
}
Here actually your CSS says to look for img directory in the parent directory of "https://medjaherirany.gitlab.io/"
But your code is in https://medjaherirany.gitlab.io/resume That's why the browser was searching for "https://medjaherirany.gitlab.io/img/portrait0.png"
But actually it is in "https://medjaherirany.gitlab.io/resume/img/portrait0.png"
Here I changed the URL of background image and I got the image working.
Hope this helped you. Feel free to ask any further doubts.
Happy Coding
I created a page on GitHub, however the background I coded through CSS will not appear on my page. The CSS code is shown below.
header {
background-image: url("resources/img/antelope.JPG");
background-size: cover;
background-position: center;
height: 100vh;
}
My github repo is: https://github.com/person/person.github.io
The CSS file is stored here:
https://github.com/person/person.github.io/blob/master/resources/css/style.css
Any help to why my background will not appear will be greatly appreciated.
Your image is not inside the resources folder.... it is at the same level as the index.html page - your URL should be url("antelope.JPG");
UPDATE
Looking at your changes, the URL should be as below now:
If you do not do anything, the URL should be: resources/img/antelope.jpg
if you package resources into the root folder then: ./img/antelope.jpg
but, the final URL will depend on how you build your page and beware that the server might be case-sensitive.
Make sure you indicate the correct filename (including case-sensitive extension)
Something along the lines of
header {
background-image: url(./img/antelope.jpg); /* may need to be adjusted depending on how you build your page */
background-size: cover;
background-position: center;
height: 100vh;
}
<header>
<nav>
Some navigation here
</nav>
</header>
To use one from the root directory (https://github.com/anhthyngo/anhthyngo.github.io) use next CSS:
header {
background-image: url('../../antelope.JPG');
background-size: cover;
background-position: center;
height: 100vh;
}
to use from img directory use next CSS:
header {
background-image: url(../img/antelope.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
One (Agency) website uses "header-bg.jpg" successfully, while my new project with Agency does not show the image.
Can I replace "agency.css" with "creative.css", and rename it back to "agency.css" for my application? Obviously, the code for header is not the problem, and that lies somewhere else.
I am sure that is what I am looking for, but need some help.
The code I am using for header-bg.jpg is the "standard" first "header" block found in agency.css for both sites.
header {
text-align: center;
color: #fff;
background-attachment: scroll;
background-image: url(../assets/header-bg.jpg);
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
While this works fine in another site I have in production using bootstrap, it is not working for the one I am trying to build now using the same template.
Working site: http://2100solutions.com
Not working header-bg.jpg: https://agile-tor-17392.herokuapp.com/
Thanks,
Bill
That image doesn't exist - it goes to a 404: https://agile-tor-17392.herokuapp.com/img/header-bg.jpg
Upload it and it will work :)