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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJpnxO7RMZlzYkgW1uH9_8v6NWa2OZzAG7g6Rimw7Vs72l5lJ3dIuUDQlCyEdGjKl3C8DMsWLHoP89sDKeIYzYIUCifxQxQM3rbe_XSkWda0Q86ZerwBIeFvm_womTudTghQG8yrNBZYrWjmP-oeurIeIjpyRJlZJ1JKa3pKnFKegrrRTw72e34G1/s16000/a1.png)
<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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh-uKPFUvErMVffHeX7uWH6MX_IJia995xRzN4n3VHIKHrkXa3QcplEAcY3YYDuPRps8x32s5k8oxfAuPA478iIumPfnl1vJ28Bt98e2stAcDZt71HaooVeH8kMEr4wp1MvNxwi15D-ABTH417CTFjg0BL20iHwvnHmAGsgTFClGqA6BTfbV8COiRZ/s16000/a2.png)
<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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGEplQFqGCh7neFPVv1XSdSk6TJByjstvFM1i2TvhsLeEhept7qQyi4AxX_zgwoSGaNxriZb-4-WHjUrLCMgD9TYeg-1kmxasny2GaDNEvuv9OmRQO6leRDohfjj_cyf2knXn8L56km8TqYcQHT7VqF2CtwI7T42QjrPwrHtRsOzXNZCNHduFRONw/s320/DownloadFile%20(1).png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXx5HPLkmMh95-MVbsqo78NRYf9rIaowi1oNKHI9LtGr4FGPV1rVNgsKE8nCRqT90lVRBt3TUeO-PcvBSkdabM4HRSiCSW_mMmJDlt1ossXRXVt7Ky-Uh1AelMlwb6r2i7C4E7Y0dTgOiR_ZNy4wyUxkgRqYzXjNdbjwm5aW9V2ljWkPbyJXlXTPJc/w302-h273/DownloadFile%20(2).png)
<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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnUXgCzISiBptoe98TKrOIRP4wfRtl4XLIYb1Z496FqixpuOoZhSgbvUCKjiCgJaqIOD7yIjn1XpFhVL-4jjzCo5LixLdwY_SvnNDV5nrh-mmBpxY67-vColkYhdZ2RqUGUmSu2tGxdRf9ZrQ5o7MnJd5XFj8mMFN6FvgdQGEbxNRIUkyGWLdHPnN9/s16000/a1.png)
<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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt0rY-03rqWHwcfWp5tnnmWbMDDGZNPjF9geq-T61D7ZJxH1MnKD7K5y_XJLcqrSh4aw6csqPx-r8x48zR0RwEWGsdRvo_6fWhCN2xI_zIeYdE1N6mT6si1HpcyBqFhlKf8xzbxcUtWzxmYlXTw1P549vcmaJ_64idmdu0h9ELuiOBqhVdQ05htW3f/s320/DownloadFile%20(4).png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs18k7K9QxXbQ_wegzi7Skgec5q_r0MTABkPIJhrReS3ZhLdkCaDV7DgxE5oQQVCBdoQe6urD8njbJlI4qLbQAGoXgfjr9D0OAJXNceLP2PpgHa8vF853u5FCuKR7ok1ziP3yt1PnBVzN4Uc_Tg3hmaHwPy5TGVMevBZhoNK-7EVfp_OOR-m7VAR4V/w248-h250/DownloadFile%20(3).png)
0 Nhận xét