scalable image

Discussion in 'CSS' started by tintumon, Apr 10, 2010.

0
  1. #1
    Hi everyone,

    I wanted to put an image into either the body or html elements and have it span the width of the viewport and also to scale up or down as the browser window is resized. I know that people have different computer resolutions so I thought that if I make the image as large as I can then set it to 100% width then it would be ok.

    I'm using a large 20inch screen monitor with a resolution of 1680 x 1050. If I make the image size 1680 pixels in width would the following css work:

    body {
    background: url(../imgs/scaleable_image.png) no-repeat;
    }

    ...I guess I would have to set the width of the image to 100% but where would I do this?

    Will the method I mentioned produce a decent image even when scaled down or is there a better way to go?

    Appreciate any advice.
     
    tintumon, Apr 10, 2010 IP
  2. JREAM

    JREAM Member

    Messages:
    160
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    30
    #2
    JREAM, Apr 10, 2010 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Doesn't require any javascript - christmas on a cracker another example of someone throwing javascript at something when it's not necessary... hah, when at the bottom it points at Stu's non-javascript version, which is akin to my approach to the problem.

    You DO however have to apply the image using an img tag, since it's the only element that can resize an image.

    
<body>
	<div id="stretchBackground">
		<!-- outer div is for STRICT validation -->
		<img src="stretchbackground.jpg" alt="" />
	</div>

	<div id="scrollWrapper">
		PAge Content here
	</div>

</body>
    Code (markup):
    and the CSS:
    
html, body {
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative; /* Opera bugfix */
}

#stretchBackground {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

#stretchBackground img {
	display:block;
	width:100%;
	height:100%; /* optional */
}

#scrollWrapper {
	position:relative; /* makes it depth sort over #stretchBackground */
	width:100%;
	height:100%;
	overflow:auto;
}
    Code (markup):
    As a side effect, anything absolute positioned outside #scrollWrapper will function as if it was position:fixed; in all browsers... The only 'flaw' is that the right edge of the image will be put UNDER the scrollbar (if any).
     
    deathshadow, Apr 11, 2010 IP