Syntax error Achieve Responsiveness for background image with CSS

Achieve Responsiveness for background image with CSS

You can try to run the following code to achieve responsiveness for background image with CSS −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content="width = device-width, initial-scale = 1.0">
      <style>
         div {
            width: 100%;
            height: 300px;
            border: 2px dashed blue;
            background-image: url('https://www.tutorialspoint.com/python/images/python-data-science.jpg');
            background-repeat: no-repeat;
            background-size: contain;
         }
      </style>
   </head>
   <body>
      <p>To check the effect, you need to resize the browser.</p>
      <div></div>
   </body>
</html>
Updated on: 2020-07-04T06:10:57+05:30

201 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements