The following code is a test and it attempts to repeat a 2.8mb .png file. The file sample.png is in the same folder as index.html.
I dont know why, but it does not show the background picture.
<html>
<head>
<title>Hello</title>
<style type="text/css">
body { background-image: url(“sample.png”); }
</style>
</head>
<body>
Hello
</body>
</html>
Use single quotes not double quotes. background-image: url('sample.png');
Related
I just started to implement a website. I have no host yet. First I would like to try some things locally on my own laptop.
I would like to use external css.
A simple version of the index file to show the problem looks like:
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
The test.css looks like this:
<style>
h1 {
color: red;
}
</style>
The problem is that the html file does not find the css file (the header will be black instead of red) although they are located in the same directory. I tried some variants but it did not help.
If I add the same css code inline, then it works.
This should be very easy, but I fail to see why the html file does not find the external file.
I tried this on firefox and IE.
Hope somebody could help me.
you missed open html tag
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
remove style from your css file
h1 {
color: red;
}
I have troubles using a local image as my background in HTML. Anyone who maybe can give me an tip on what at l should try to change in order to make the code work.
<!DOCTYPE html>
<html>
<head>
<title>Test</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/skole/Onedrive/NTNU/Annet/Test/bakgrunn.jpeg');">
</body>
<body>
<h1>Test</h1>
</body>
<html>
The path to image should lead from Your .html file. So, the question is where is Your .html file situated, for example, if it is in folder TEST, path should be: url('./bakgrunn.jpeg') or just url('bakgrunn.jpeg');
So I'm basically wondering if the code I wrote is supposed to just pop up a page with "This web page uses an external style sheet", in blue font. I've been trying for hours to get my CSS to link to my HTML code and finally I did but all it was, was blue font. P.S I'm supposed to turn this in tonight so need to be sure!
What it looks like
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" href="color.css">
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
css:
body { backround-color: #0000FF;
color: #FFFFFF;
}
No it is not. It suppose to show with White Color font with a light background.
This is some other css or browser plugin's impact.
You can try on the fiddle first to verify what it can look like at a clean state.
https://jsfiddle.net/
First of all you have wrongly typed background-color.
The code you provided is giving you the Blue background with white text.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Fiddle</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="txtPopup">
<p>This web page uses an external style sheet</p>
</div>
</body>
</html>
CSS Code
body {
color: #FFFFFF;
background-color: #0000FF
}
This is probably a really simple problem that I'm guessing has a very obvious but stupid solution but I am not seeing it. I am trying to get an image to become a tiled background and for some reason the image is not appearing nor am I getting errors. I have checked permissions and set all files and folders to 777. Can someone point out the problem for me thanks.
My CSS file:
body {
background-image: url("images/main_background.png");
}
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<div id="main_container">
</div>
</body>
</html>
Your image is in images folder and css is in css folder.
images/main_background.png means that images folder is inside the css folder, but it is not.
write this:
body {
background-image: url("../images/main_background.png");
}
OR
body {
background-image: url("/images/main_background.png");
}
All I want to do is embed an image from my computer into this webpage. The image file is Avery.jpg, and it is on C:. Could my path be wrong, or am I doing something else completely wrong?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color:#CCFFFF;
<!--Baby Blue???-->
}
p {
color:#800080;
font:100px Verdana, sans-serif;
}
</style>
<title>birthday.html</title>
</head>
<Body>
<img src="Avery.jpg" alt="avery" />
<p>Happy Birthday!</p>
</Body>
</html>
it will appear normally if you put the image in the same root folder of your web page.
Put the HTML file and the image file in same location and try. It will work for you.