I'm building a simple landing page, the image file is found in the same folder with the html and css files. After applying the
the image failed to display. The image file shows up in the debuging tool
body { background-image: url ("../Landing page/3.jpg") ect...}
body { background-image: url ("..Landing page/3.jpg") ect...}
body { background: url ("../Landing page/3.jpg") ect...}
body { background: url ("../Landing page/3.jpg") ect...}
body { background-image: url ("..3.jpg") ect...}
body { background-image: url ("../3.jpg") ect...}
body { background: url ("3.jpg") ect...}
body { background: url ("../3.jpg") ect...}
I've changed the names of the files, documents as well. At this point I have no idea what else I could have missed
body {
width: 100%;
height: auto;
background: URL (" 3.jpg ");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: table;
}
The answer above (provided by Muhibbullah Ansary) works fine, however, consider adding a container and putting a class or ID on it instead of using the BODY tag.
As others have mentioned, double check your URL.
It would also help us if you stated what your desired outcome is so that we don't have to guess, based on the code you've provided. it's possible that even though the code gets corrected, it still doesn't accomplish what you really wanted. Just a thought.
It would be:
background-image: url('/your/path');
1) Check for errors and failed requests.
2) Might be the extension of the image is not jpg but jpeg. Check for the extension.
3) Check the correct path of the images.
4) Both are correct background-image: url('imgPath'); or background: url('imgPath');
Thanks
body{
background: url('https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: table;
}
Your image path is incorrect, correct this path.
Related
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;
}
Path for my HTML-file: C:\Users\Name\Documents\Coding\Battleship\index.html
Path for the picture: C:\Users\Name\Documents\Coding\Battleship\Water.jpg
I tried to add it as follows:
body {
background-image: url("file://C:\Users\Name\Documents\Coding\Battleship\Water.jpg") no-repeat center center;
background-size: cover;
}
However, it is not working. Does anyone know how to solve this issue?
You can't do like this
background-image: url("file://C:\Users\Name\Documents\Coding\Battleship\Water.jpg") no-repeat center center;
You can place the image is project root(or subfolder) and use as below
Assume your project folder is Battleship
If you place Water.jpg in root(as below)
Battleship
-index.html
-Water.jpg
then use this
body {
background-image: url("./Water.jpg") no-repeat center center;
background-size: cover;
}
If you place Water.jpg in subfolder (as below)
Battleship
-index.html
-images
-Water.jpg
then use this
body {
background-image: url("./images/Water.jpg") no-repeat center center;
background-size: cover;
}
Check this w3schools.com source
Please refer the below tested code.
The problem was you were using background-image which only accepts one parameter, you were supposed to use background which is a shorthand for writing all the background properties into one.
Refer: CSS background [last section]
You need to change the below CSS
body {
background: url("Water.jpg") no-repeat center center;
background-size: cover;
}
Code example:
html, body{
width:100%;
height:100%;
margin:0px;
}
body {
background: url("http://lorempixel.com/400/200/") no-repeat center center;
background-size: cover;
}
<html>
<body>
</body>
</html>
Not sure if this is too late to answer but I think the problem is very simple. You have done the right thing with the URL, here is the tricky bit: the link to your URL has a backward slash(there's no need for using CSS to correct this) ie:
Yours:
Path for my HTML-
file: C:\Users\Name\Documents\Coding\Battleship\index.html
Correct Answer: should have a forward slash
Path for my HTML-file:
C:/Users/Name/Documents/Coding/Battleship/index.html
just make a folder & put both files into it and link your image path simply.
I have custom Galauness template on blogger (http://nethoroskop.blogspot.com) but I would like to upload my own image...Can you tell me how? In html code there is NOT
body{ background
There a lot of other backgrounds (like post background,total-wrapper background, lightbox-container-image-data-box background,etc) but not body.background at all!
You need to find and edit this section to add your own background image:
body {
background: #ffffff;
background-image: url(http://i1273.photobucket.com/albums/y417/trynitezoo/winterpaper_zps5a2f39a3.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
margin: 0;
}
or you can override the background image. You only need to copy and paste the following code in the header tag section and replace the YOUR NEW IMAGE PATH to the image url you needed:
<style>
body {
background-image: url('http://YOUR NEW IMAGE PATH') !important;
}
</style>
If you want to change the background of the body to an image this would be the best way. Change the <body> to this:
<body background="image.jpg">
Tutorial from : http://www.w3schools.com/tags/att_body_background.asp