If you have to use <img>
tags to produce the image, simply delete the height
declaration from your CSS; the image should maintain aspect ratio and resize appropriately if you just have width
specified. (Alternatively you could specify height
and delete width
as well, but specifying width
is the industry norm.
For a CSS background method, try this, instead:
.bg {
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-clip: border-box;
background-origin: padding-box;
-moz-background-size: cover;
background-size: cover;
}
It requires CSS3, but will work in somewhat-old browsers (-moz-background-size
is for FF3.6; FF4+ uses the default background-size
). This method uses the CSS background-image
property which is preferred to your method.
The reason for this is that the background image is not part of the meaningful content of your site page, but rather part of the styling (it's a background image, so it belongs in the background). Therefore, it should be handled using Cascading Style Sheets.