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;
}
Related
In my HTML, I wrote
<link href ="project.css" rel ="stylesheet">
<style>
body, html {
height: 100%;
margin: 0;
}
</style>
<title>Page1</title>
</head>
<body>
<div class="bg"></div>
</body>
In my CSS, I wrote:
.bg {
/* The image used is edited from original World Table Tennis logo */
background-image: url("WTT.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
However, I'm not sure how to insert the image that I uploaded to my VS Code into my page, which is why I used CSS. Unfortunately, when I use Flask run, I get GET /project.css HTTP/1.0" 404.
I originally had my.bg on my HTML page, but I received GET /WTT.jpeg HTTP/1.1" 404. So I moved it to my CSS file. I haven't done the curse in a couple of months, so I'm a bit lost, especially when using images.
file structure
Befor
href ="project.css" rel ="stylesheet"
After
href="project.css" rel="stylesheet"
remove spaces on both sides and check
I have been creating a webpage teaching about Mars, and I wanted to see if I could make the background of an HTML5 page an image instead of a boring white colour. I do want this with a link, so teaching with a .jpg will not be useful. Here is some code I have tried:
<!DOCTYPE HTML>
<html>
<head>
<title>My Webpage</title>
<style>
body {
background: url(https://phys.org/news/2020-05-astrobiologists-mars-rover-life-detecting-equipment.html);
}
</style>
</head>
<body>
My text here...
</body>
</html>
I am not the most experienced programmer, as you can see from this, but any help (even if it is just a little) will be much appreciated. Thank you for your time and have a great rest of your day.
--
isharief
use the link to the jpg file in the src attribute instead of the html link, for this case,
<style>
body {
background: url(https://scx1.b-cdn.net/csz/news/800/2020/astrobiologi.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
overflow: hidden
}
</style>
This question already has answers here:
Adding external CSS in an HTML file
(5 answers)
Closed 2 years ago.
So I tried displaying an image by making a selector class with a background-image attribute then calling it using the <div> tag. The first time the selector class was between the <head> tags. Everything seems to work fine:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
.bg {
/* The image used */
background-image: url("images.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
But when I put the selector class inside a separate CSS file, it doesn’t seem to work. Here is the code for the HTML file:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Here’s for the CSS:
.bg {
/* The image used */
background-image: url("images.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
}
Could someone please kindly tell me what I did wrong? I thank you in advance!
Don't forget to import your separate css file on your html page :
<link rel="stylesheet" href="style.css">
And be careful for the right path.
Add a link tag inside of head in your HTML to connect your styles to the HTML.
<head>
<link rel="stylesheet" href="xxx.css">
</head>
Replace xxx.css with the path to your css file.
Check the Mozilla docs for details.
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'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;
}