HTML | Responsive Full Page Image Using CSS - GeeksforGeeks

Trang chủ » Html Image Fill Page » HTML | Responsive Full Page Image Using CSS - GeeksforGeeks

Có thể bạn quan tâm

Responsive Web design (RWD), is a design strategy developed to cope with the amazing popularity of mobile devices for viewing the Web. Responsive images are an important component of responsive Web design (RWD), Responsive web design is a new approach to website design that ensures users have a good viewing experience no matter what type of device they’re using. Building separate sites for every type of device simply wouldn’t be sustainable. Instead, we can use the concept of responsive design, which calls for building flexible and fluid layouts that adapt to almost any screen. 

  • Bootstrap
  • Foundation
  • Pure
  • Skeleton
  • Semantic UI

Approach

  • First, we will use the H1 tag and add an image in the background.
  • Our main goal is to keep the image centered vertically and horizontally to do this we will style the image by adding the CSS background property.
  • After styling the image, if the user resizes the screen the image will shrink according to the device size.

Example: In the below example, we will have implemented the above approach.

HTML <!-- index.html file --> <!DOCTYPE html> <html> <head> <title>Responsive Background Example</title> </head> <body> <div class="container"> <div class="image"></div> <div class="content"> <h1>Hi GFG</h1> </div> </div> </body> </html> CSS /* Style.css File */ body{ /* Image Location */ background-image:url( "../img/Fall-Nature-Background-Pictures.jpg"); /* Background image is centered vertically and horizontally at all times */ background-position:centercenter; background-repeat:no-repeat; background-attachment:fixed; background-size:cover; background-color:#464646; /* Font Colour */ color:white; }

OUTPUTThe output shows the background image in different viewports and resizes its size according to the device size.

https://media.geeksforgeeks.org/wp-content/uploads/20240730234830/ResponsiveFullImageGIF.mp4

EXPLANATION:

To make the background image responsive using CSS we have used the CSS background properties. Each of them is explained below.

  • background-size: cover;
    • This property tells the browser to scale the background image proportionally so that its width and height are equal to, or greater than, the width/height of the element. 
  • background-position: center center; 
    • The above sets the scaling axis at the center of the viewport. 
  • background-attachment: fixed; 
    • The background is fixed with regard to the viewport.
Comment More info Next Article Creating A Range Slider in HTML using JavaScript

A

AyushSaxena Follow Improve Article Tags :
  • HTML
  • Web Technologies
  • HTML and XML
  • HTML-Misc
  • Web technologies
  • Web technologies-HTML and XML
+2 More

Từ khóa » Html Image Fill Page