I have used the following code to add a background image to my PHP file.

body {
 background-image:url('background.png');
 background-color: #F0F8FF;
}

But I can see the color only changed not the image. Can someone help me to solve this? Does this due to the image resolutions? I exported the image from microsoft powerpoint. Do I need to consider that as well? Are there any method to find whether the issue with my code or my picture. I have pasted my whole code.

<?php   
 session_start();  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Library Management System</title>  
                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>   
      </head>  
      <body>  
           <br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">Management System</h3><br />  
                <br />  
                <br />  
                <br />  
                <br />  
                <br />  
                <?php  
                if(isset($_SESSION['username']))  
                {  
                 
   
               
                 ?>  
                <div align="center">  
                     <h1>Welcome to Dialog G-Tech Library</h1><br />
                     <div class="bar" align="center">
                     <a href="#" id="logout">Logout</a>
                      </div>  
                </div>  
   
                <?php      
                 
                }  
                else  
                {  
                ?>  
                 <div id="loginModal"  role="dialog">
      <div class="modal-dialog">
   <!-- Modal content-->
           <div class="modal-content">
                <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">Login</h4>
                </div>
                <div class="modal-body">
                     <label>Username</label>
                     <input type="text" name="username" id="username" class="form-control" />
                     <br />
                     <label>Password</label>
                     <input type="password" name="password" id="password" class="form-control" />
                     <br />
                     <button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>
                </div>
           </div>
      </div>
 </div> 
                <?php  
                }  
                ?>  
           </div>  
           <br />  
      </body>



  <style type="text/css">
   .bar {
  overflow: hidden;
  background-color: #87CEEB;
}

.bar a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.bar a:hover {
  background-color: #ddd;
  color: black;
}


body {
 background-image:url('background.png');
 background-color: #F0F8FF;
} 



   </style>
 </html>  
 <div id="loginModal" class="modal fade" role="dialog">  
      <div class="modal-dialog">  
   <!-- Modal content-->  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Login</h4>  
                </div>  
                <div class="modal-body">  
                     <label>Username</label>  
                     <input type="text" name="username" id="username" class="form-control" />  
                     <br />  
                     <label>Password</label>  
                     <input type="password" name="password" id="password" class="form-control" />  
                     <br />  
                     <button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>  
                </div>  
           </div>  
      </div>  
 </div>  
 

8

Sometimes the cache won’t realize that changes have been made to your website. A hard refresh is a way of clearing the browser’s cache for a specific page, to force it to load the most recent version of a page. Sometimes, when changes are made to the website, they don’t register immediately due to caching. A hard refresh will usually fix this, though completely completely clearing the cache is necessary.

Right Click on the refresh button and click on Empty Cache and Hard Reload and check its working or not

enter image description here

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.