CSS Background Image

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Background Image

Changing the size (NOT SHAPE) of the background image to fit window

jnoel12

7:08 am on Apr 7, 2013 (gmt 0)

I'm trying to get the background image to fit the browser window no matter the size of the window. I just want the backgrounds size to change and not its shape. I'm new to html and css so I don't really know what I'm doing.

This is what I have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>background-size</title>

<style type="text/css">
html,body {
height: 100%;
margin: 0;
background-image: url(IMAGES/background.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
}

</style>

</head>
<body>

</body>
</html>

lucy24

9:17 am on Apr 7, 2013 (gmt 0)

Are you willing to dump all users with MSIE <= 8? The CSS3 background-size property isn't supported before MSIE 9. Even in real browsers it's pretty recent: Safari 5 or Opera 10.5, for example.

I just want the backgrounds size to change and not its shape.

You can either fill the window or you can keep the same shape, but you can't do both. Assuming for the sake of discussion that you don't plan to force the user's window to a fixed shape-- an idea too horrible to contemplate. You may need to study the difference between "cover" and "contain"

http://www.w3.org/TR/css3-background/#the-background-size

to answer the primary question: If the viewport isn't the same shape as your background image, do you want to leave part of the screen image-less, or lose part of the image? (If it helps, think of watching a wide-screen movie on a regular TV. You can either letterbox it-- making part of the screen black-- or chop off the sides of the picture.)

If both values are set to 100% -- or to anything other than "auto" -- you will be changing the shape of your background.