Horje
How to add HTML Background Cover with CSS

If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:


Full Example of HTML Background Cover with CSS

HTML Background Cover with CSS
index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://itupto.com/uploads/demo/2023-09-09-14-46-00-untitled.jpeg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
</head>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the body element.</p>

</body>
</html>

Output should be:

Full Example of HTML Background Cover with CSS





Related Articles
What is HTML Background Images HTML Background Images
How to create Background Image with HTML Style HTML Background Images
How to create Background Image with CSS Style HTML Background Images
How to add HTML Background Image on Full Page HTML Background Images
How to create HTML Background Repeat HTML Background Images
How to create HTML Background with no Repeat HTML Background Images
How to add HTML Background Cover with CSS HTML Background Images
How to create HTML Background Stretch HTML Background Images

Single Articles
Full Example of HTML Background Cover with CSSHTML Background Images

Read Full:
HTML Background Images
Category:
Web Tutorial
Sub Category:
HTML Background Images
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
52


Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_background7

Share on: