homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

Msg#: 4562282 posted 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:

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






WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4562282 posted 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"


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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved