HTML: Adding a background picture

This entry is part 21 of 34 in the series HTML

To use a background image file, use a style=’background-image: url(image)’ attribute in the opening <body> tag.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML colors</title>
</head>
<body style='background-image: url(https://codecrawl.com/code/images/sky.jpg)'>

<h4>I have a backgound picture</h4>

</body>
</html>

By default, the backgound image is repeated both horizontally and vertically to fill the window.

You can force it not to repeat by adding the background-repeat: no-repeat attribute.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML colors</title>
</head>
<body style='background-image: url(https://codecrawl.com/code/images/sky.jpg); background-repeat: no-repeat'>

<h4>I have a backgound picture</h4>

</body>
</html>

 

Series Navigation<< HTML: Background color
HTML: Creating hyperlink to a webpage >>