PDA

View Full Version : Scalable background image with constrainend proportions.


mwstratton
April 27th, 2006, 11:01 PM
For my new portfolio I want to have a single-colored image that my site will "hover" over. Since it's a .gif and a single color I wanted to make the image as large as possible (in the 1600s range) so that people viewing it on a large browser window would see the image without nasty distortion.

The problem is I want the image, when viewed in an 8x6 window to be scaled down to fit that browser, and "dynamically" scale if the user adjusts the size of the browser on a large monitor to say "16x12 and still see the background image the same as it appeared in the smaller size just larger.

I was wondering if anyone knew a good tip or two with how to get this to work with CSS or JS.

Thanks!

Michael Wesley Stratton
CriTiCeRz
April 28th, 2006, 12:00 AM
Ok... Can you explain more understandable please. So you want an image of one color? It's going to cover the whole page? I'm lost here...
Ankou
April 28th, 2006, 12:05 AM
Yeah, I don't follow what you're looking for either. If it's a single color why even bother with an image? Why not just use a DIV with the background-color set to the color you want. If you want it to scale then use a percentage value for the width.
CriTiCeRz
April 28th, 2006, 12:23 AM
Ok I'm assuming you want a div... this would be the code:

CSS: (stylesheet, save this as "style.css")



#cover {
background-color: black;
width: 500px;
height: 500px;
}


HTML:



<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>

<div id="cover"> </div>
</body>
</html>



It's really simple... You can change the size of the div by chaning the CSS. Now if you want the background to be a plain color and make it resizable try this:

CSS:


body {
background-color: black;
}


That will make the background black... Hopefully this helps you if it doesn't just post what you need again because I did not understand very well.
Ankou
April 28th, 2006, 12:57 AM
pssst... CriTiCeRz, it needs to scale. ;) Instead of height and width set in pixels, use percentage. Or skip the height and width and just add a margin to the div and let it expand as needed.

Of course I guess we're both getting ahead of ourselves since we're not really sure exactly what mwstratton is looking for. :smirk:
mwstratton
April 28th, 2006, 01:24 AM
yeah, more specifically. I have a background image. I want to set the background image for either the page or a table. When you view the page at 8x6 resolution, you will see the full size of the image at about 50% of it's full size but you will still be seeing the entire image.

If the user resizes their browser the image will scale and grow larger without distorting from it's original aspect ratio. So basically the image will still essentially look the same, however it will scale larger without pixelating because the full resolution of the image is much larger than most users will ever view it at.

here's an example image (http://www.robotpaste.com/pictures/rp_layout2.gif) from my layouts.

Basically I want that orange background image to be very large, but when the page is viewed at 8x6 it fills the screen and the user sees the full screen. If the user changes their browser size or loads the page already at a larger size, the image won't look differently but scale itself to fit their browser.

Let me know if you need further explaination to visualize this.

Thanks for your help!

Michael Wesley Stratton
CriTiCeRz
April 28th, 2006, 05:03 PM
Well just so you know, when the image is stretched it's going to look bad.

CSS:


#style {
background-image: url('path/to/image');
width: 100%;
height: 100%;
}


HTML:


<div id="style"> </div>

OR:


<table id="style">
</table>


I hate using %, but if you want to...
mwstratton
April 28th, 2006, 06:24 PM
yea that was my point behind it not stretching outside of it's normal constrained proportions..

I know how to do this stuff.

Thanks for the help though!

Wes
CriTiCeRz
April 28th, 2006, 07:09 PM
If you know, why would you ask?
Thinker2501
April 28th, 2006, 07:09 PM
CriTiCeRz is correct. Even if you scale to proportion the image will still alias.
mwstratton
April 28th, 2006, 08:16 PM
yeah, but that's why I was saying the image's full 100% image size is 1600x1200

so if they're scaling larger than that.....

they're probably on an apple 30" cinema display <3

Wes