Hi I have a system developed with PHP and CSS.
I wish to have background images that will cover the full screen of each page. However with my existing setup the image covers the other content on screen. I have tried this with my homepage initially. I created an img tag (Learning) in my php file on line 19 as shown.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome - <?php echo $userRow['username']; ?></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="left">
<label>NHSCT E-Learning Portal</label>
</div>
<div id="right">
<div id="content">
Welcome <?php echo $userRow['forename']; ?> <a href="logout.php?logout">Sign Out</a>
</div>
</div>
</div>
<img src="images/Learning.jpg" id= "Learning" alt="">
<br>
<p align="center"><img src="title.jpeg" width="400"height="100" alt="title.jpeg">
<br>
<center>
<h1> Select an E-Learning Module<h1>
<br>
<table align="center" height="200" width="40%" border="0">
<tr>
<td><button name="Surface" onclick="window.location.href='SurfaceExecute.php'">Surface Pro Basic Skills</button></td>
</tr>
<td><button name="eNISAT" onclick="window.location.href='eNISATExecute.php'">eNISAT Tutorials</button></td>
</tr>
<td><button name="Email" onclick="window.location.href='EmailExecute.php'">Email Tutorials</button></td>
</tr>
<td><button name="Policies" onclick="window.location.href='Policyview.php'">Policies and Procedures</button></td>
</tr>
</table>
</body>
</html>
I then added the following CSS to my style.css file
/* css for home page */
#Learning {
position: fixed;
top: -20;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
My question is, how do I display this image in the background with existing screen content on top? Or is there a way to make the background image opaque so that the other content can be seen through it and clicked?
UPDATE Solution found from the answer provided. Removed img tag from php file and updated CSS to the following
html {
background: url(images/Learning.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You would use the background-image property in CSS. If you are doing that for the whole page, you might as well use it on the body element :
body {
background-image : ........;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments