Hi,
If the webpage will only be viewed in a
modern browser, i.e. Chrome, IE9/10, Firefox 4+ etc. then you can use the cover attribute. I would also recommend for a full page background using html rather than body.
The code would look like this:
Code:
html {
background-image: url(chromium2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have also set the no-repeat, center and fixed attributes in one line which saves code. They do the same things as if they were assigned separately, but these are easier to type. :)
That code would be either put in an inline/internal style sheet (between <style></style> tags in the document head), or as an external style sheet reference using the code
Code:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
That would also go in the header, and you would change stylesheet.css to whatever you call your external style sheet. Be sure to save the stylesheet in the same folder as the main HTML page.
I have typed up an example page using an example background image I found on
CSS-Tricks. So image copyright goes to them. :)
Enjoy this code, ask anything you wish. Note the image automatically scales to the browser window size.
HTML:
<!DOCTYPE html> <!--HTML Doctype-->
<html>
<head>
<meta charset="UTF-8"> <!--Not really important here, don't worry about this-->
<title>Background image example</title> <!--Page title-->
<!--Internal stylesheet, this is what sets the background-->
<style>
html {
background: url(http://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg) no-repeat center center fixed; // Change the URL to the location of your image, as you did before.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body><!--Empty page body since you don't really need anything in here-->
</body>
</html>
Hope this helps,
Stephen