Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Background Image

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

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

New User

5+ Year Member

joined:Apr 7, 2013
posts: 1
votes: 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:

<html lang="en">

<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">


<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%;



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

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 598

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"


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.