Demo : https://www.lenlop123.com/2020/09/16-background-color-background-image.html
<style type="text/css">
body {
background-color: #C0C0C0;
}
h1 {
background-color: rgb(135,206,235);
}
p {
background-color: LightGreen;
}
</style>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
background-image: url("http://www.sololearn.com/uploads/css_logo.png");
background-color: #e9e9e9;
}
p {
padding: 30px;
background-image: url("http://www.sololearn.com/images/tree.jpg");
color: white;
}
</style>
</head>
<body>
<p>This paragraph has a background image.</p>
</body>
</html>
<style type="text/css">
body {
background-image: url("http://www.sololearn.com/uploads/css_logo.png");
background-repeat: repeat-x;
}
</style>
<style type="text/css">
body {
background-image: url("http://www.sololearn.com/uploads/css_logo.png");
background-repeat: repeat-y;
}
</style>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
background-image: url("http://www.sololearn.com/uploads/css_logo.png");
background-repeat: repeat-x;
}
p {
background-image: url("http://www.sololearn.com/uploads/css_logo.png");
background-repeat: inherit;
margin-top: 200px;
padding: 50px;
}
</style>
</head>
<body>
<p>This paragraph has a background image.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
background-image: url("http://www.sololearn.com/uploads/css_logo.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
.div1 {
background-image: url("http://www.sololearn.com/uploads/css_logo.png");
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
<p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
<p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
<p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
<p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
<p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
<p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
<p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
</body>
</html>
0 Nhận xét