upload photo for a html project - html

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.

Related

background-image: url() works when all files on desktop but not with files in their folders

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;
}

Background Image Only Showing White Background CSS

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.

CSS3: Background URL issues

Background img for a div is not displaying. Using FireFox dev tool and it says the image could not be loaded. But if I link to the image using an img tag it works fine. I would rather display the image in css using the background property. For my file structure I have an img, css and js folder nested inside my project folder. Is there something wrong with the path since i'm in a css folder trying to link to a file in another folder?
#charset "utf-8";
/* CSS Document */
.container {
}
.hero {
background: url('img/15827396293_fc1e0f749d_o%20(2).jpg') 0 0 no-repeat;
text-align: center;
background-size: cover;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style1.css" />
</head>
<body>
<div class="container">
<div class="hero">
<h1> This is a test</h1>
</div>
</div>
</body>
</html>
If you are in your css folder, it is looking for css/img/file.jpg. If you wan't to keep with relative paths, you will need to change your image path to ../img/file.jpg. I would recommend the use of absolute paths, but that is up to you. With an absolute path, you don't have to worry about if you accidentally forgot your ellipses.
Try ".." to move up a document tree
.hero {
background: url('../img/15827396293_fc1e0f749d_o%20(2).jpg') 0 0 no-repeat;
text-align: center;
background-size: cover;
}

Access images and css files in WAMP

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.

Stylesheet linking not working

I am unable to link my CSS stylesheets:
Hierarchy:
index.html:
// index.html
<!DOCTYPE html>
<html>
<head>
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="blue">Hello</p>
</body>
</html>
index.css:
// index.css
.blue {
font:blue;
font-size: 20px;
}
The "font" property isn't correct.
Try to replace this :
.blue {
font:blue;
font-size: 20px;
}
By this :
.blue {
color:blue;
font-size: 20px;
}
The css path seems correct, you can check on the network tab of your browser console, if you get a HTTP 200 the file is loaded, if 404 it's not found.
Try the w3 css validator: http://jigsaw.w3.org/css-validator/
I had a similar problem and it said there was a Chinese character in the css file but the file looked fine in notepad and elsewhere. Using BabelPad http://www.babelstone.co.uk/Software/BabelPad.html I found the encoding of that file was UTF16LE. I changed the encoding to UTF8 and it worked fine.