Menu
So I'm designing a web page that is incomplete atm, it's only missing 2 buttons so its fairly simple. Instead of messing around with Divs and css styling I decided to make the background in photoshop. I created the image in a resolution of 1920x1080, when I apply the image as the background it doesn't fit the browser window so the bottom right corner is missing. Is there any code I can add to fix this issue or is my best option just recreating the image at a smaller resolution and if so, what resolution should I build for?
Here is a link to page in case I didn't explain clearly enough: http://www.itss.brockport.edu/~rsiss1/cis442/BulletinBoard/BulletinBoard
Here is the code:
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>BulletinBoard</title>
<style>
body {background: url(BulletinBoardBg.jpg);
background-position: center no-repeat;}
</style>
</head>
<body>
</body>
</html>
921
Try the CSS property
background-size: cover;
There's also background-size: contain if you must have the entire image on screen and don't mind extra space around the edges.
Here's a reference for background-size on MDN.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
