Hi I am new to html i trying to add background image of body below code i tried
<!doctype html >
<html>
<head>
<title> learning html</title>
<style>
body{
background-image: url("C:\Users\vs\Downloads\html\VnoRpdq.gif");
}
</style>
</head>
<body>
<h1> This Home Page</h1>
<h2>ADDED BACKGROUND</h2>
</body>
</html>
path name and file name and extension of image is correct.
just change it to have file:/// protocol:
<html>
<head>
<title> learning html</title>
<style>
body{
background-image: url("file:///C:\Users\vs\Downloads\html\VnoRpdq.gif");
}
</style>
</head>
<body>
<h1> This Home Page</h1>
<h2>ADDED BACKGROUND</h2>
</body>
</html>
Related
Here is my information
.error{
color:rgb(20, 213, 220);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSS Basics</title>
</head>
<body>
<div>
<p class="error">abcdefghijklmnopqrstuvwxyz</p>
<p>12345678901234567890123456</p>
<p>doremifasolatidodotilasofa</p>
</div>
</body>
</html>
Add css in style tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSS Basics</title>
</head>
<body>
<div>
<p class="error">abcdefghijklmnopqrstuvwxyz</p>
<p>12345678901234567890123456</p>
<p>doremifasolatidodotilasofa</p>
</div>
</body>
</html>
<style>
.error{
color:rgb(20, 213, 220);
}
</style>
Oh my bad! I fixed it---I had just forgotten to put the styles.css file in the same folder as my .html file, haha '^_^ my bad
I'm trying to set black for one line. There are more web links on the line. But the link is still blue. Thanks for the help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2 style="color:black;">YouTube Google</h2>
</body>
</html>
Because there is a default style from <a> tag, which it hides the set style from <h2>. There are 2 ways (not only 2) to resolve the problem.
Way 1: by adding a <style> tag and put your styles inside it.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
<style>
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<h2>YouTube Google</h2>
</body>
</html>
Way 2 (not recommended because it looks not really tidy): add styles to each <a> tag.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2>
YouTube
Google
</h2>
</body>
</html>
Hope helped.
This is my html file
<!DOCTYPE html>
<html>
<head>
<title>CSS cheat sheet</title>
<link rel="stylesheet" type="text/css" href="csscheatsheet/style.css">
</head>
<body>
<h1> Hello World</h1>
</body>
</html>
This is my css file
h1 {
color: green;}
You can see what I am trying to achieve at 10:44 mark. Just changing the h1 by changing the color, but it is not working. I have the same file names as the guy in the Youtube video. (https://www.youtube.com/watch?v=yfoY53QXEnI)
this is my problem:
<!Demo html>
<html>
<head>
<img src="html\111.jpg" alt="can't be displayed" align="center">
</head>
<body>
</body>
and i just want to fit the picture onto the screen
If I understand your problem correctly, you want the image to cover the screen, then this is the simplest solution to your problem:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="html\111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</body>
But if your intention is actually to use the image as a background, I would strongly suggest adding it as a background image (with CSS) to the body element.
Edit:
With css:
html, body {
width: 100%;
height: 100%;
}
body {
background: url( html/111.jpg ) 100% 100%;
}
Also, don't forgot to link to your .css in your .html file.
<head>
<link rel="stylesheet" href="css/styles.css">
</head>
For inside a head tag......
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background: url(url of the image) !important; }
</style>
</head>
<body>
yourbody
</body>
</html
I think this is what you want!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<img src="html/111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</header>
</body>
In this snippet just replace src code with your link.
<!Demo html>
<html>
<head>
<style>
.img{
top:0px;
left:0px;
position:absolute;
height:100%;
width:100%;
}
</style>
</head>
<body>
<img src="http://wallpapersrang.com/wp-content/uploads/2015/12/wallpapers-for-3d-desktop-wallpapers-hd.jpg" alt="can't be displayed" align="center" class="img">
</body>
For some odd reason when I try styling this html page with a backround in css nothing appears.
Any Ideas on how to fix
-Thanks
<html>
<body>
<title>Test</title>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
<style>
body {background-color:#b0c4de;}
</style>
</body>
</html>
It should look something like this (notice I moved the style tag within the head tag):
<head>
<style>
body{
background-color:#color;
}
</style>
<head>
Why is your style tag in your <body> tag? It should be in the <head> tag:
<html>
<head>
<style type="text/css">body { background-color: red; }</style>
</head>
<body>
</body>
</html>
Or even better, put your css in a separate .css file.
First of all that's not how css works or how html works. You should put your style tags in html head section. And you should determine html element where you want to set background-color.
<html>
<head>
<style>
body {
background-color:#b0c4de;
}
</style>
</head>
<body>
<title>Test</title>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
</body>
</html>
Usually the syntax is like so:
<html>
<head>
<style>
body { background: #121212; }
</style>
</head>
</html>
With the style tag in the head tag.
You will want to move your <style> tag inside of your <head> tag.
Try this code:
CODE
<style>
body {
background-color:#b0c4de;
}
</style>
<body>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
</body>
SAMPLE
http://jsfiddle.net/Uy2Zb/