Log in

View Full Version : background image set as a percent?


mdcloud
04-30-2007, 05:06 PM
i have a background that looks like a piece of parchment paper. i want it to take up 90% of the screen regardless of resolution. is there a way to assign a percent to it in the body part of the css file?


also i have several images on the site. to make them stay the same relative size regardless of resolution is a percentage width the best way to size them up?

thanks
boogyman
04-30-2007, 05:13 PM
<head>
<style type="text/css">
<!--
body {
background: #000000; /*Background of the page behind the image*/
margin: 0 auto;
width: 90&#37;;
text-align: center;
}
div#container {
background: url("host.com/parchment.jpg") no-repeat center;
z-index: 5; /* Brings this to the top of view */
}
// -->
</style>
</head>
<body>
<div id="container">
your page
</div>
</body>
nwalton
04-30-2007, 05:43 PM
also i have several images on the site. to make them stay the same relative size regardless of resolution is a percentage width the best way to size them up?

That seems like a really difficult thing to calculate and to maintain over your whole site unless you have some sort of script inserting the relative values of your images' widths and heights. But even then you'll have images showing up with really low quality, when they're resized.

You can make things tile vertically or horizontally to give the illusion of them being resized, but I'd recommend against sizing all of your images relative to the browser window.
boogyman
04-30-2007, 05:52 PM
also i have several images on the site. to make them stay the same relative size regardless of resolution is a percentage width the best way to size them up?


you could place min-value's and max-value's on each of them, which would resize them automatically to fit a certain criteria, however as walton said you really shouldn't force a height and width on an image because u need to maintain correct proportions or it will look even worse than if it were to be a different size from the rest



<style type="text/css">
<!--
selector img {
min-width: 00px;
max-width: 00px;
}
// -->
</script>

where selector is the tag name of the outter tag wrapping the image tag ...eg <div id="bg_img"><image src .... /> the selector for that would be bg_img
321yangyang
06-30-2007, 01:55 AM
Another question similar to the poster problem.
I have a background image which I managed to use the slice tool to slice into a few images, and it helps me to put them into a table which would show the full image in html coding. However, the dimesions of the picture is set into pixels and don't really fit nicely into the browser window, is there a way for me to set in the images be to proportional to / a percentage of the browser window, so I get a full-window image all the time? Thanks