Scribd
Upload
5 views

CSS Backgrounds

The document discusses CSS backgrounds and properties like background-image, background-color, border-radius, and more. It demonstrates using images, colors, gradients and other properties to style element backgrounds and borders.

Uploaded by

figoa1223
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

CSS Backgrounds

The document discusses CSS backgrounds and properties like background-image, background-color, border-radius, and more. It demonstrates using images, colors, gradients and other properties to style element backgrounds and borders.

Uploaded by

figoa1223
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS backgrounds

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
margin: 10px;
width: 400px;
height: 300px;
}
.d1{
background-image: url("img/background.jpg");
border-radius: 20px;
}
.d2{
background-color: #5a2;
color: #fff;
border-radius: 20px;
}
.d3{
background-color: #5a2;
color: #fff;
/*border-radius: 20px 30px 40px 50px;*/
/*border-radius: 80px 20px 10px;*/
border-radius:20px 120px;
}
.imgBorder{
border:20px solid transparent;
border-image: url("img/background.jpg") 20 round;
background-color: #824;

}
/*#multipleBackground{
background-image: url("img/background.jpg"),url("img/fleurs.jpg");
background-position: left top,right bottom;
background-repeat: no-repeat, repeat ;
background-size: 100px 80px,100px 50px;
}
#multipleBackground{
background:url("img/background.jpg") left top no-
repeat,url("img/fleurs.jpg") right bottom repeat;
}*/
/*#multipleBackground{
background-image: url("img/background.jpg");
background-repeat: no-repeat;
background-size: 100px 80px;
border: 2px solid;
}*/
#multipleBackground{
background-image: url("img/fleurs.jpg"),url("img/background.jpg");
background-repeat:no-repeat, repeat;
background-position: bottom right,top left;
background-size: 200px 100px,200px 200px;
border: 2px solid;
}
.covered{
border: 2px solid;
background:url("img/back.jfif");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
h1{
color: #00f;
border: 2px solid currentColor;
background-color: currentColor;
}
.sousTitre{
font-size: 20px;
}
.sousTitre h2{
font-size: inherit;/*font-size:20px;*/
}
.grad{
border:1px solid currentColor;
/*background-image: linear-gradient(red,#ff0);*/
background-image: linear-gradient(to right,red,#ff0);
}
</style>
</head>
<body>

<h1>Un titre</h1>
<div class="grad">

</div>
<div class="sousTitre">
<h2>Un sous titre</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

</div>
<div class="covered">

</div>
<div id="multipleBackground">

</div>
<div class="imgBorder">

</div>
<div class="d1">

</div>
<div class="d2">

</div>
<div class="d3">

</div>
</body>
</html>

You might also like