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

HTML Code:

<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

Originally Posted by mdcloud

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

Originally Posted by mdcloud

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

Code:

<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

Thread: background image set as a percent?

Thread Tools

Search Thread

background image set as a percent?

Bookmarks

Bookmarks

Posting Permissions