Horje

Full Example of HTML Background Stretch

Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.
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: 100% 100%;
}
</style>
</head>
<body>

<h2>Background Stretch</h2>

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

</body>
</html>

Output should be:

Full Example of HTML Background Stretch



Single Articles
Full Example of HTML Background StretchHTML Background Images


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

Type:
Html
Category:
Web Tutorial
Sub Category:
HTML Background Images
Uploaded by:
Admin