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
Related
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>
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'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;
}
This question already has answers here:
Why can't I do <img src="C:/localfile.jpg">?
(16 answers)
Closed 4 months ago.
I've got an HTML document hosted on a remote web server. I'm trying to have one of the elements on the web page use an image file from my local file system as its background image. No luck with Chrome, Safari or Firefox (haven't tried IE).
Here's an example of what I've tried so far.
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body { width: 100%; height: 100%; }
</style>
</head>
<body style="background: url('file:///Users/username/Desktop/background.png')">
</body>
</html>
If I inspect the body element using my browser's web inspection tool, and select "Open image in new tab" the image is there. So the browser is fully capable of getting at the image file using the given URL.
Is what I'm trying to pull off at all possible, or is this a security feature of the browser trying to block external domains from accessing the user's local resources?
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;
this should help
It seems you can provide just the local image name, assuming it is in the same folder...
It suffices like:
background-image: url("img1.png")
Jeff Bridgman is correct. All you need is
background: url('pic.jpg')
and this assumes that pic is in the same folder as your html.
Also, Roberto's answer works fine. Tested in Firefox, and IE. Thanks to
Raptor for adding formatting that displays full picture fit to screen,
and without scrollbars...
In a folder f, on the desktop is this html and a picture, pic.jpg, using
your userid. Make those substitutions in the below:
<html>
<head>
<style>
body {
background: url('file:///C:/Users/userid/desktop/f/pic.jpg') no-repeat center center fixed;
background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
-webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
-moz-background-size: cover; /* optional for Firefox 3.6 */
-o-background-size: cover; /* for Opera 9.5 */
margin: 0; /* to remove the default white margin of body */
padding: 0; /* to remove the default white margin of body */
overflow: hidden;
}
</style>
</head>
<body>
hello
</body>
</html>
You forgot the C: after the file:///
This works for me
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body { width: 100%; height: 100%; }
</style>
</head>
<body style="background: url('file:///C:/Users/Roby/Pictures/battlefield-3.jpg')">
</body>
</html>
FireFox does not allow to open a local file. But if you want to use this for testing a different image (which is what I just needed to do), you can simply save the whole page locally, and then insert the url(file:///somewhere/file.png) - which works for me.