Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Sizing Page Backgrounds

Reply
Thread Tools

Sizing Page Backgrounds

 
 
PJB
Guest
Posts: n/a
 
      12-12-2005
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" <(E-Mail Removed)> wrote in message
news:439cb8dd$0$8168$(E-Mail Removed).. .
> 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



 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      12-12-2005
PJB wrote:

> Thanks you for all the suggestions.


Please don't top post.
http://allmyfaqs.net/faq.pl?How_to_post

> 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!


Umm ... http://dorward.me.uk/tmp/pjbird.jpeg

.... and, BTW, search engines are not impressed by keyword stuffing.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
 
 
 
Peterken
Guest
Posts: n/a
 
      12-12-2005

"Toby Inkster" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)5n.co.uk...
> Peterken wrote:
>
>> My idea : When using a "dynamically stretched image" use one for the
>> highest
>> expected screen resolution, the lower resolutions won't get worse then.

>
> They will get worse.
>
> e.g. 1600x1200 isn't an exact multiple of 1280x1024 -- they're even at
> different aspect ratios, so your 1600x1200 image will look crap. It will
> also be a huge download.
>
> --
> Toby A Inkster BSc (Hons) ARCS
> Contact Me ~ http://tobyinkster.co.uk/contact
>


as is 800*600 no exact multiple of 640*480
as is 1024*768 no exact multiple of 800*600 or 640*480
as is 1280*1024 no exact multiple of 1024*768 or 800*600 or 640*480

It *never* is, neither are the aspect ratios, so I still remain with using
the highest image fore not stretching beyond representativity.....
And it's not such a big file, a jpg of 1600*1200 may well be below 50k when
selecting a bit



 
Reply With Quote
 
Peterken
Guest
Posts: n/a
 
      12-12-2005

> "Jonathan N. Little" <(E-Mail Removed)> wrote in message
> news:439cb8dd$0$8168$(E-Mail Removed).. .
>> 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

>
>

"PJB" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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
>


Nice layout, text neatly over image, counter visible, all readable.
Nevertheless the image is also distorting when resizing width, just like the
scripts do, be it non-disturbing due to content.




 
Reply With Quote
 
Peterken
Guest
Posts: n/a
 
      12-12-2005


> "Jonathan N. Little" <(E-Mail Removed)> wrote in message
> news:439cb8dd$0$8168$(E-Mail Removed).. .
>> PJB wrote:
>>> Is there a way to define the size of a page's background image
>>> so it spans 100% of any screen?

>> <snip>
>>
>> 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

>
>

"PJB" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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
>
>



Nice trick, but what if PJB's pages' contents is alot larger then the
background image ?

In other words:
Is it possible using Jonathans CSS to have a "pseudo-fixed" background image
(and
resized in the way PJB wanted)
AND
having the body scroll over it, thus a simulation of retaining the image
ever in the viewport ?
(ok, I admit, maybe a bit of a silly question, but I'm rather new to CSS so
forgive me....)




 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-14-2005
PJB wrote:
> 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.
>

<snip>

(Whew finally got my news server back!) Your page has problems because
of some of your code, I answered this in the Mozilla NG.

Anyway, it is not working properly because you are messing up the CSS
with some HTML.

1) if you do not want the dragonfly to distort remove the HTML 'width'
and 'height' attributes on the image, let the CSS set the only the width
to 100% can the height will scale accordingly.
2) you might want to set your BODY background-color to something dark or
black so that with narrow windows the area not covered by your image
will be dark and your text readable.
3) dump all the old '<body link="#FF9900" vlink="#0099FF">' and use the
CSS for this....



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
PJB
Guest
Posts: n/a
 
      12-15-2005
"Jonathan N. Little" wrote in message
> PJB wrote:
>> 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!
>>

> <snip>
> Anyway, it is not working properly because you are messing up the CSS with
> some HTML.
>
> 1) if you do not want the dragonfly to distort remove the HTML 'width' and
> 'height' attributes on the image, let the CSS set the only the width to
> 100% can the height will scale accordingly.
> 2) you might want to set your BODY background-color to something dark or
> black so that with narrow windows the area not covered by your image will
> be dark and your text readable.
> 3) dump all the old '<body link="#FF9900" vlink="#0099FF">' and use the
> CSS for this....


Ok, bear with me... The CSS you suggested (Dec. 11) had two height settings
within the CSS. I deleted the first but I am not sure about the last line:
#content {height: 100%}
Can I delete this also?

The damsel fly image scales OK but it pixalates a bit on wider screens. This
I can live with. Otherwise, I have been trying different approaches on the
other pages -- re-sizing / rescaling / resampling the background image files
etc. Ideally, where I have lots of text I would like the background image to
remain fixed with all text scrolling in front. Pictures blending into the
background colour will work. Eventually,I'll have all pages using CSSs. I
just
have to learn that and PhotoShop!

PJB



 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-18-2005
PJB wrote:
<snip>
>
> Ok, bear with me... The CSS you suggested (Dec. 11) had two height settings
> within the CSS. I deleted the first but I am not sure about the last line:
> #content {height: 100%}
> Can I delete this also?

The purpose is to expand height of content div to match body element in
case you a wanted to position or size and child elements relative to the
page. if you have not such need then it could be deleted.
>
> The damsel fly image scales OK but it pixalates a bit on wider screens. This
> I can live with. Otherwise, I have been trying different approaches on the
> other pages -- re-sizing / rescaling / resampling the background image files
> etc. Ideally, where I have lots of text I would like the background image to
> remain fixed with all text scrolling in front. Pictures blending into the
> background colour will work. Eventually,I'll have all pages using CSSs. I
> just
> have to learn that and PhotoShop!


Some browsers a better than others but all are inferior to a image
resampled and optimized with image editor software. It will alway be a
compromise of file size/quality


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Backgrounds Lukasz Glaz ASP .Net 0 03-27-2006 01:51 PM
Problem with backgrounds &colors balado Firefox 1 02-28-2005 09:04 PM
Backgrounds too small in Outlook =?Utf-8?B?R2FtYmxl?= Microsoft Certification 0 04-04-2004 09:01 PM
Configuration setting to print backgrounds? Gwen Morse Firefox 2 02-03-2004 08:32 PM
Hijacking Hibernate and restore backgrounds Mark ASP .Net 0 09-29-2003 05:21 AM



Advertisments