Fond

background-size

Déformation de l'image de fond pour occuper l'espace indiqué.

CSS

	
	div {
		height: 100px;
		width: 200px;
		background-image: url(fond.png);
		-moz-background-size: 100% 100%;
		-webkit-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		background-size: 100% 100%;
		}

HTML

	
	<div>
		<p>Lorem ipsum</p>
	</div>

Compatibilité

Internet Explorer 8 ignore cette propriété

background-clip: border

Le fond démarre aux bords du bloc.

CSS

	
	div {
		height: 100px;
		width: 200px;
		padding: 30px;
		border: 5px dashed #8cc03b;
		background-image: url(fond.png);
		-moz-background-clip: border;
		-webkit-background-clip: border;
		background-clip: border-box;
		}

	p { margin: 0; }

HTML

	
	<div>
		<p>Lorem ipsum</p>
	</div>

Compatibilité

background-clip: padding

Le fond démarre aux bordures du bloc.

CSS

	
	div {
	height: 100px;
	width: 200px;
	padding: 30px;
	border: 5px dashed #8cc03b;
	background-image: url(fond.png);
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	background-clip: padding-box;
	}
	
	p { margin: 0; }

HTML

	
	<div>
		<p>Lorem ipsum</p>
	</div>

Compatibilité

Internet Explorer 8 ignore cette propriété

background-clip: content

Le fond démarre au premier bloc contenu.

CSS

	
	div {
		height: 100px;
		width: 200px;
		padding: 30px;
		border: 5px dashed #8cc03b;
		background-image: url(fond.png);
		-moz-background-clip: content;
		-webkit-background-clip: content;
		background-clip: content-box;
		}
	
	p { margin: 0; }

HTML

	
	<div>
		<p>Lorem ipsum</p>
	</div>

Compatibilité

background-image

Positionnement de deux fonds dans un même bloc.

CSS

	
	div {
	height: 100px;
	width: 200px;
	background-color: #8cc03b;
	background-image: url(fond.png), url(fond2.png);
	background-position: left top, 50% 50%;
	background-repeat: no-repeat, no-repeat;
    }

	p { margin: 0; }

HTML

	
	<div>
		<p>Lorem ipsum</p>
	</div>

Compatibilité

Internet Explorer 8 : erreur

Page de tests