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;
}
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>
Path for my HTML-file: C:\Users\Name\Documents\Coding\Battleship\index.html
Path for the picture: C:\Users\Name\Documents\Coding\Battleship\Water.jpg
I tried to add it as follows:
body {
background-image: url("file://C:\Users\Name\Documents\Coding\Battleship\Water.jpg") no-repeat center center;
background-size: cover;
}
However, it is not working. Does anyone know how to solve this issue?
You can't do like this
background-image: url("file://C:\Users\Name\Documents\Coding\Battleship\Water.jpg") no-repeat center center;
You can place the image is project root(or subfolder) and use as below
Assume your project folder is Battleship
If you place Water.jpg in root(as below)
Battleship
-index.html
-Water.jpg
then use this
body {
background-image: url("./Water.jpg") no-repeat center center;
background-size: cover;
}
If you place Water.jpg in subfolder (as below)
Battleship
-index.html
-images
-Water.jpg
then use this
body {
background-image: url("./images/Water.jpg") no-repeat center center;
background-size: cover;
}
Check this w3schools.com source
Please refer the below tested code.
The problem was you were using background-image which only accepts one parameter, you were supposed to use background which is a shorthand for writing all the background properties into one.
Refer: CSS background [last section]
You need to change the below CSS
body {
background: url("Water.jpg") no-repeat center center;
background-size: cover;
}
Code example:
html, body{
width:100%;
height:100%;
margin:0px;
}
body {
background: url("http://lorempixel.com/400/200/") no-repeat center center;
background-size: cover;
}
<html>
<body>
</body>
</html>
Not sure if this is too late to answer but I think the problem is very simple. You have done the right thing with the URL, here is the tricky bit: the link to your URL has a backward slash(there's no need for using CSS to correct this) ie:
Yours:
Path for my HTML-
file: C:\Users\Name\Documents\Coding\Battleship\index.html
Correct Answer: should have a forward slash
Path for my HTML-file:
C:/Users/Name/Documents/Coding/Battleship/index.html
just make a folder & put both files into it and link your image path simply.
I have custom Galauness template on blogger (http://nethoroskop.blogspot.com) but I would like to upload my own image...Can you tell me how? In html code there is NOT
body{ background
There a lot of other backgrounds (like post background,total-wrapper background, lightbox-container-image-data-box background,etc) but not body.background at all!
You need to find and edit this section to add your own background image:
body {
background: #ffffff;
background-image: url(http://i1273.photobucket.com/albums/y417/trynitezoo/winterpaper_zps5a2f39a3.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
margin: 0;
}
or you can override the background image. You only need to copy and paste the following code in the header tag section and replace the YOUR NEW IMAGE PATH to the image url you needed:
<style>
body {
background-image: url('http://YOUR NEW IMAGE PATH') !important;
}
</style>
If you want to change the background of the body to an image this would be the best way. Change the <body> to this:
<body background="image.jpg">
Tutorial from : http://www.w3schools.com/tags/att_body_background.asp