homepage Welcome to WebmasterWorld Guest from 54.166.14.218
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
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
jnoel12



 
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:


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

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"

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