I have created folder structure as www/xyz/images and other folder www/xyz/css. I am importing the css file and css file as following code. My background image is not displayed when I am importing css file.
index.php
//
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/mainpage.css" type="text/css">
</head>
<body>
<h1></h1>
</body>
</html>
mainpage.css
//
body {
background-image: url("images/foodspot4.jpg");
background-repeat: no-repeat;
background-size:cover;
}
The images path have to be relative to the directory of the CSS file. By calling images/foodspot4.jpg you are asking the stylesheet to look for the file in the directory www/xyz/css/images, which does not exist.
Therefore, you should use relative paths: it should be as follow...
body {
background-image: url("../images/foodspot4.jpg");
background-repeat: no-repeat;
background-size:cover;
}
../ will instruct the CSS to look for the /images/ folder in the parent directory. Here's a quick article explaining how relative file path works.
Related
I want to code a simple website just with HTML and CSS . I did it with notepad on my PC.
When I added a background photo to my #header element, it isn't working. I've tried to replace the name and used from online editors.
I can't find my error.
I have a folder with style.css and index.html and a folder for the photos on my website.
* {
margin: 0;
padding: 0;
}
#header {
height: 100vW;
background-image: url(images/Al-Hakawati.jpg);
background-position: center;
background-size: cover;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chehel Behesht</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
</section>
</body>
</html>
Your problem is the css file format. If you look at the image you showed, your css file format is TextDocument. Ideally, the css file format should be CSS-Document.
And this confirms the error you are getting:
Failed to load resource: net::ERR_FILE_NOT_FOUND style.css:1
To fix this error, open your style.css stylesheet in a notepad. Next, select File - Save As... And finally, specify the file extension .css. Like this picture.
I'm new to HTML and CSS, I'm trying to add Full Screen Background Image in CSS, but my code doesn't work. I've tried many tutorials as well. Here it's my code.
HTML file
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">
<h1>Welcome to my First CSS page.</h1>
</body>
</html>
and CSS file
body{
background-image: url(""C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg"");
background-size: cover;
background-attachment: fixed;
}
The problem with your double-quotes in the URL you should remove them. Also, you can use a relative path to get your image from your project path.
Here a working example, you made one mistake & one bad practice:
- You used double """" for your background URL
- The CSS link is recommended to be in the head. You can put it in the body but place it add the end.
body{
background-image: url("C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg");
background-size: cover;
background-attachment: fixed;
/* DEMO, remove */ background-image: url("https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg");
/* DEMO, remove */ color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<!-- comment out -->
<!--<link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">-->
</head>
<body>
<h1>Welcome to my First CSS page.</h1>
</body>
</html>
style="background-image: url('img_shirjeel.jpg'); height: 100%; background-position: center; background-repeat: no-repeat;background-size: cover;"
try this in that tag or body where you want the image.
and do google first.
You need to move your css file to the main folder (the same as the html file).
And create a div(container were background has to come) that contains your h1.
And you shouldn't use the full url you can just use foldername/imagname.jpg.
So this is how it should look.
Folder.
-html.html
-practice.css
-imagefolder
--image.jpg
If you have this you can change the css link to :
<link rel="stylesheet" type="text/css" href="practice.css">
And then in body tag you creat a div with a class:
<div class="body">
<h1>Welcome to my First CSS page.</h1>
</div>
If you have this you can give the body div a background image with in css:
.body{
background-image: url(image/landscape.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 500px;
}
When using the background-image url() to set a full cover background image I have encountered what seems like a glitch that I can't figure out. When I have the index.html file, the main.css file and the image file on my desktop the image shows up fine in the browser. However, when I move the .jpg to an imgs folder and the .css file enter image description hereto the css folder the image won't appear in the browser.
The code is exactly copied from W3, so I'm thinking it must be a problem with my folder structure, but I can't see it. I've never seen this issue before. Thanks in advance!
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div class="bg"></div>
</body>
</html>
body,
html {
height: 100%;
}
.bg {
background-image: url("/imgs/ocean.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Use this syntax instead: Because ./ refers to the current folder, ../ refers to the parent directory and that one should be used.
background-image: url("../imgs/ocean.jpg");
Using / at the start of the path will use the root directory which in this case is C:
Use this instead:
background-image: url("../imgs/ocean.jpg");
try using
background-image: url("../imgs/ocean.jpg");
While the other answers here are correct, they don't do a very good job at explaining 'why'.
background-image: url("../imgs/ocean.jpg"); should work for you.
Heres why:
In directory paths, two dots at the start of the path ../ means go up a level relative to the current working directory (i.e. if used in your index.html file, the search will start from wherever that is). You can go up multiple levels, i.e. ../../../ to go up three levels. A single dot ./ at the start of the path means follow the path, starting from here.
A single slash / at the start of the path will use the root directory which on Windows is usually your C: drive, or on Linux/Unix/Mac is the very start of the file tree.
Used the below code in main.css file, it is working:
body,
html {
height: 100%;
}
.bg {
**background-image:** url("../imgs/ocean.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
use pixel in height and width and check the path of background-image
.bg {
background-image: url("imgs/ocean.jpg");
width:100%;
height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I'm a veteran to CSS and HTML, but never before have I seen this problem. I have the background image, CSS, and HTML files placed properly. I believe I have all the code right too since I checked it against a site I already made, but my image will not appear for anything.
CSS
body {
background-image: url(am-stage.png);
background-repeat: no-repeat;
background-color: black;
background-size: 100% 100%;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> AM </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
</body>
</html>
EDIT: Chrome is giving an error saying that the CSS file can't be found. Not sure why though. The CSS is in the same directory as the HTML and the image.
I figured it out, Sublime wasn't saving the CSS as a CSS file. I told it to save as a CSS, but it wasn't adding the extension this time for some reason. I just chose CSS and manually put in the .css at the end and now it's working.
I've looked for the answer on everyone of questions that are similar to this question but nothing seems to work. Basically I created a test document to test the background image feature as it wasn't working on my main site.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" text="type/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
This is a test.
</body>
</html>
CSS:
body {
background-image: url(image.jpg) no-repeat;
}
Nothing shows apart from "This is a test." I have checked to see if the image is in the same place as the styles.css sheet, and it is. Can anyone help me please?
You can't combine background-repeat in background-image.
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
Use background background instead of background-image if you are using no-repeat etc.
body {
background: url(image.jpg) no-repeat;
}
According to W3 http://www.w3schools.com/cssref/pr_background-image.asp background-image property can be attached to the body tag.
The only reason you don't see it is no-repeat in the wrong place - it is the property of background itself, not a background image.
So here is the code you should use case you actually do not want to see image repeating:
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
your image url is important to give it:
I hope solved with this.
1- in own folder: "./image.jpg"
2- in out folder: "../image.jpg"
3- or root relative path(eg asp.net): "~/pictures/image.jpg"
4- or relative path: "../pictures/image.jpg"
body
{
background-image: url(./image.jpg);
background-repeat: no-repeat;
}