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.
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;
}
I tried all possible answers but nothing works. When I put this code
I have a gray screen only. The picture is in the same folder which I use for code. I use notepad. I am a beginner.
I've tried all your answers but nothing works only gray screen. The image works when I put just src=(image.png) but not working if I want a background with URL(image.png)
You'll need to add the body tag, like so:
<html>
<head>
<title> Piotr#Ewa World </title>
<style>
body {
background: url("IMG_20180505_204226.png");
background-size: contain; /* Or "cover" */
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
I am following a tutorial in a book and it says to use CSS to set different background colors for the html and body elements. The body is capped at a max-width of 1020px, so the html background color will show on either side if the window is wide enough. Here is the CSS code for the background colors, the layout CSS is in a separate file:
html{
background-color: rgb(235, 177, 131);
background-color: hsl(27, 72%, 72%);
}
body{
color: rgb(91, 91, 91);
background-color: ivory;
}
I have tested this in Chrome, Safari, and Firefox and all three ignore the html style rule. However, when I specify the background color inline, such as:
<html style="background-color: hsl(27, 72%, 72%);">
Then it works. Does anyone know what might be going on here?
** EDIT **
Here is the beginning of the HTML file, you can see that I am linking the stylesheets in the head element:
<!doctype html>
<html style="background-color: hsl(27, 72%, 72%);">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="triathlon, running, swimming, cycling" />
<title>Tri and Succeed Sports</title>
<link href="tss_layout.css" rel="stylesheet" />
<link href="tss_styles.css" rel="stylesheet" />
</head>
** UPDATE **
Found the problem. I was missing the semi-colon at the end of the #charset directive before the html style rule. This caused the browser to ignore it. Works fine now.
You could try creating a class like
.html {
background-color: red;
}
and then
<html class="html">
</html>
Also, here is a fiddle of your code, and pictures in Chrome, Firefox, and IE
Chrome:
Firefox:
IE (trashy browser on win7):
EDIT: I shrunk the body 4 times so I could show it works.
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;
}