CSS Backgrounds

CSS Background

CSS background property is used to define the background of HTML elements.

CSS properties define background effects:

background-color
background-image
background-repeat
##background-attachment

background-color attribute defines the background color of the element.

The background color of the page is used in the body selector:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>我的 CSS web 页!</h1>
<p>你好世界！这是来自 W3CSchoolphp中文网的实例。</p>

</body>
</html>

Run Example»
Click the "Run Example" button to view the online example

In CSS, color values are usually defined in the following way:

##RGB - such as: "rgb(255,0,0)"
Color name - such as: "red"
In the following example, the h1, p, and div elements have different background colors:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1
{
	background-color:#6495ed;
}
p
{
	background-color:#e0ffff;
}
div
{
	background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color 实例!</h1>
<div>
改文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Background image

The background-image attribute describes the background image of the element.

By default, the background image is displayed tiled and repeated to cover the entire element entity.

Page background image setting example:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body 
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d689a8a95760.gif');
	background-color:#cccccc;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Run instance»

Click the "Run instance" button View online examples

Below is an example of a poor text and background image combination. Poor text readability:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
	body {background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7253c8e5996.jpg');}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>该文本不容易被阅读。</p>
</body>

</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Background image - Tile horizontally or vertically

By default, the background-image property will tile the page horizontally or vertically.

Some images will look very inconsistent if they are tiled horizontally and vertically, as shown below:

Example

源代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
    background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d765c3e7c347.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>

</html>

运行结果：
php工具

Run Example»

Click the "Run Example" button to view the online example

If the image is only tiled horizontally (repeat-x), the page The background will be better:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d765c3e7c347.png');
	background-repeat:repeat-x;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Background image - Set positioning and non-tiled

Let the background image not affect the layout of the text

If you don’t want the image to be tiled, you can use background- repeat attribute:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	background-repeat:no-repeat;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>

</html>

Run instance»

Click the "Run instance" button to view the online instance

In the above example, the background image and text are displayed at the same position. In order to make the page layout more reasonable and not affect the reading of the text, we can change the position of the image.

You can use the background-position property to change the position of the image in the background:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	background-repeat:no-repeat;
	background-position:right top;
	margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>

</html>

Run the example»

Click the "Run Instance" button to view the online instance

Background - abbreviated attribute

In the above example we can see that the background color of the page passed Lots of properties to control.

In order to simplify the code of these properties, we can combine these properties in the same property.

The abbreviation property of the background color is "background":

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	background-repeat:no-repeat;
	background-position:right top;
	margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>

</html>

Run Example»

Click the "Run Example" button to view the online example

When using the abbreviated attribute, The order of attribute values is: :

background-color
background-image
##background -repeat
background-attachment
background-position

You don’t need to use all the above attributes. You can use it according to the actual needs of the page.

This example uses the CSS introduced earlier. You can view the corresponding example: CSS Example

More Examples

How to set a fixed background image

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title>
<style>
body 
{
background-image:url('https://img.php.cn/upload/image/904/696/399/1546677458497154.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>

<body>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
</body>

</html>

Run Instance»Click the "Run Instance" button View online examples

This example demonstrates how to set a fixed background image. The image does not scroll with the rest of the page.

CSS Background Property

Property	Description
background	Abbreviation attribute, the function is to set the background attribute in a statement.
background-attachment	Whether the background image is fixed or scrolls with the rest of the page.
background-color	Set the background color of the element.
background-image	Set the image as the background.
background-position	Set the starting position of the background image.
background-repeat	Set whether and how the background image repeats.

← CSS creation

CSS text →

CSS Backgrounds

CSS Background

background-color attribute defines the background color of the element.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> body { background-color:#b0c4de; } </style> </head> <body> <h1>我的 CSS web 页!</h1> <p>你好世界！这是来自 W3CSchoolphp中文网的实例。</p> </body> </html>

Background image - Set positioning and non-tiled

Instance

Example

Background - abbreviated attribute

Example

CSS Background Property

php.cn