You can set a background image for a web page by using CSS properties. The next file shows rules you can use:
File test.css
body {
background-color: #ffffff;
background-image: url(psy.jpg);
background-repeat: no-repeat;
}
h1 {
text-align: center;
font: 24px Arial, Helvetica,Geneva ,Verdana, sans-serif;
}
p {
text-align: center;
font: 14px Arial, Helvetica,Geneva ,Verdana, sans-serif;
line-height: 1;
}
The rules above add the image psy.jpg as a background to any page to which this style sheet is attached. You can use for example the next test file:
File test.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>How to set a background image for a web page with CSS </title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
<body>
<h1>Oppa is Gangnam style Gangnam style</h1>
<p>A girl who is warm and humanle during the day</p>
<p>A classy girl who know how to enjoy the freedom of a cup of coffee</p>
<p>A girl whose heart gets hotter when night comes</p>
<p>A girl with that kind of twist</p>
<p>I'm a guy</p>
<p>A guy who is as warm as you during the day</p>
<p>A guy who one-shots his coffee before it even cools down</p>
<p>A guy whose heart bursts when night comes</p>
<p>That kind of guy</p>
<p>Beautiful, loveable</p>
<p>Yes you, hey, yes you, hey</p>
<p>Beautiful, loveable</p>
<p>Yes you, hey, yes you, hey</p>
<p>Now let's go until the end</p>
<p>Oppa is Gangnam style, Gangnam style</p>
<p>Oppa is Gangnam style, Gangnam style</p>
<p>Oppa is Gangnam style</p>
<p>Eh- Sexy Lady, Oppa is Gangnam style</p>
<p>Eh- Sexy Lady oh oh oh oh</p>
</body>
</html>
The next picture shows the result:
Important notes:
Other values for background-repeat are:
– repeat This default value causes the image to tile across and down the page.
– repeat-x The image tiles across the page in a single row of images.
– repeat-y The image tiles down the page in a single row.