Embedded Files
CSS background-image
CSS background-image
The background-image attribute specifies an image to be used as an element's backdrop.
The picture is repeated by default to cover the full element.
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>This is a paper</h1>
<p>Nothing intresting here!</p>
</body>
</html>
CSS
body {
background-image: url("https://images.pexels.com/photos/10526880/pexels-photo-10526880.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
}
You can make it interesting!
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Desert</h1>
<p>This background is very hot!</p>
</body>
</html>
CSS
body {
background-image: url("https://www.thoughtco.com/thmb/-6gRPt_V27QKCO5uhVsm1hQyDFI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/wave-pattern-desert-landscape--oman-886145780-5c45542046e0fb00012ebabf.jpg");
}
And even better!
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>HOT</h1>
<h2>COLD</h2>
</body>
</html>
CSS
h1 {
background-image: url("https://vanguard-fire.com/wp-content/uploads/2021/06/raquel-raclette-MYjFOiVWWT8-unsplash-1080x675.jpg");
}
h2 {
background-image: url("https://akm-img-a-in.tosshub.com/indiatoday/images/story/202303/melting_antarctic_sea_ice-sixteen_nine.jpg?VersionId=yALp5a0JyeWQJUl44njOAWtzW0rKExiS&size=690:388");
}
Page updated
Google Sites
Report abuse