css background-size property


  Translation results：

background

UK[ˈbækgraʊnd] US[ˈbækˌɡraʊnd]

n. (painting, etc.) background; background color; background information; soundtrack

Plural: backgrounds

size

## English[saɪz] 美[saɪz]

n. Scale; size, size; glue, paste Paste; huge, large number

vt. Arrange by size; change the size of; apply glue, sizing; apply paint

adj. Third person singular of a certain size

: sizes Plural: sizes present participle: sizing past tense: sized past participle: sized

css background-size propertysyntax

How to use the background-size attribute?

The background-size attribute can set the size of the background image. Syntax: background-size: length|percentage|cover|contain; Set the image size through length value or percentage, or scale the image through cover and contain.

Function: Specifies the size of the background image.

Syntax: background-size: length|percentage|cover|contain;

Description: length Set the height and sum of the background image width. The first value sets the width and the second value sets the height. If only one value is set, the second value will be set to "auto". percentage sets the width and height of the background image as a percentage of the parent element. The first value sets the width and the second value sets the height. If only one value is set, the second value will be set to "auto". cover Expands the background image to be large enough so that the background image completely covers the background area. Some parts of the background image may not be displayed in the background anchor area. contain Expands the image to its maximum size so that its width and height fit entirely within the content area.

Note: IE9, Firefox 4, Opera, Chrome and Safari 5 support the background-size attribute.

css background-size propertyexample

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url('http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
background-size:100px 63px;
-moz-background-size:100px 63px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>

<body>
<p>上面是缩小的背景图片。</p>

<p>原始图片：<img src="http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" alt="Flowers"></p>

</body>
</html>

Run instance »

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

Popular Recommendations

Home

Videos

Q&A

submit