homepage Welcome to WebmasterWorld Guest from 54.227.141.230
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

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




msg:4562284
 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




msg:4562309
 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.

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved