Scribd
Upload
10 views3 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views3 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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