|
|
Posted by PJB on 11/19/29 11:34
Thanks you for all the suggestions.
I successfully applied Jonathan's suggestion to my Index page
(see www.pjbird.com). The picture re-sizes nicely at different resolutions
and aspect ratios and does not loose quality. Thanks for that!
Inevitably, page elements will appear in different locations depending on
the resolution and aspect ratio. This is to be expected and I will have to
play around a bit.
PJB
"Jonathan N. Little" <lws4art@centralva.net> wrote in message
news:439cb8dd$0$8168$cb0e7fc6@news.centralva.net...
> PJB wrote:
>> Is there a way to define the size of a page's background image
>> so it spans 100% of any screen? Depending upon the computer
>> and screen resolution, my background images do not always fill
>> the screen. My default design resolution has been 800 X 600 but
>> on a wide-screen laptop at a higher resolution, this looks like a
>> design error (see www.pjbird.com). Currently, I set my text formatting
>> to span only 800 pixels but would like the background image to fill
>> the page.
>>
>> Should I reformat my images to a larger dimension?
>> Is there an HTML command to set the image width to span 100% of
>> the screen (like a table option)?
>> Should I use a layer tag or other option?
>>
>> My use and knowledge of HTML is limited so any insights would help.
>> Note the following tag (I am not using CSS but have during various design
>> phases):
>>
>> <body text="#ff9900" link="#FF9900" vlink="#0099FF" Style=
>> "margin-top:20px; margin-left:20px;
>> background-image:url('Damsel_fly.JPG');
>> background-repeat: no-repeat">
>
> Another way to fake it with CSS, here assuming background image very dark
>
> <style type="text/css">
> HTML, BODY {
> width: 100% height: 100%; color: white; background-color: black; }
> /* bg image only specify width so it will not distort when scaling */ #bg,
> #content { position: absolute; width: 100%; }
> #content {height: 100% }
> </style>
>
>
> <body>
> <img id="bg" src="YourBackgroundImage.jpg" alt="">
> <div id="content">
> <p>Put your page content here...</p>
> </div>
> </body>
>
>
> --
> Take care,
>
> Jonathan
> -------------------
> LITTLE WORKS STUDIO
> http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|