Short answer: you can't. And, given general browser capabilities when it
comes to scaling/resampling of images, a site that uses a resized
background indiscriminately can't possibly look good at all resolutions.
Probably best to make an image that fades off to whatever colour your
Can you give an example of what you mean?
From: Bruce [mailto:[EMAIL PROTECTED]
Sent: Monday, 1 August 2005 8:12 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] background images fluid
What is the best
Bitmap grpahic is not intended to be rescaled/stretched. You can tile
it, or combine it (like on mozillazine), but no stretching, please...
--
Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com
**
The discussion list for
Jan Brasna wrote:
Bitmap grpahic is not intended to be rescaled/stretched. You can tile
it, or combine it (like on mozillazine), but no stretching, please...
That's right. What I'd probably do (not having seen your banner) is -
if the image doesn't stretch forever and isn't suitable to be
Hi Bruce, Try http://www.edgedesigns.com.au/resourcedw.htm. Not sure
just how relevant this is, but it's a Dreamweaver extension (free)
which you may be able to adapt to use in a div? (Not checked!)
Bob
Bruce wrote:
What is the best way to get a 100% width on a background image in a
Andreas Boehmer wrote:
Can you give an example of what you mean?
A header or banner at the top. I can put an image in there:
div id=banner
img src=anything.jpg width=100% height=120px alt=mynicebanner /
/div
It will size according to the resolution. Stretch and shrink.
But I cannot make it do
Subject: Re: [WSG] background images fluid
Andreas Boehmer wrote:
Can you give an example of what you mean?
A header or banner at the top. I can put an image in there:
div id=banner
img src=anything.jpg width=100% height=120px alt=mynicebanner / /div
It will size according to the resolution
Bruce schrieb:
It will size according to the resolution. Stretch and shrink.
Not stretching, not static, though:
http://www.satzansatz.de/cssd/wide.html
Ingo
--
http://www.satzansatz.de/css.html
**
The discussion list for
Vicki Berry wrote:
if the image doesn't stretch forever
[***I can't get it to stretch at all, thats the problem***]
and isn't suitable to be repeated
- to have a fluid section of the banner with a background image set
to repeat in the CSS, and with the un-repeatable image on one side,
Ingo Chao wrote:
Bruce schrieb:
It will size according to the resolution. Stretch and shrink.
Not stretching, not static, though:
http://www.satzansatz.de/cssd/wide.html
Ingo
That's it!! Thank you Ingo
Awesome
Bruce Prochnau
BKDesign Solutions - just got a solution.
Hi Bruce,
I had a quick look at your current header and see what you are trying to do.
At the end of the day I think you need to just be a bit more clever with
your image. I *borrowed* your current image and did a very crude editing job
to it so it will look good at the avg resolution, but
I guess I cannot communicate what I mean.
I have an image on my own website of a sunset.
I put it in the banner div as an image and set the width to 100%.
I am perfectly happy with it, it looks good and stretches to fit all
resolutions. There is nothing wrong with it at all.
At 1024 it fills the
Bruce schrieb:
That's it!!
Bruce, I didn't expect that this attempt works for you. You need a very
big image, resulting in 25k.
---
You can choose a focus of the picture, which determines the
percentage-value for the background-position. This makes the image look
fixed (here: x=30%),
Another alternative would be to produce the image for a largish
resolution (e.g. 1024), set max-width to 1024 and set width to 100%. I
believe readability begins to decrease above 1280 - surely there's some
research on maximum widths and readability somewhere.
- Chris
www.semioticpixels.com
Bruce schrieb:
I guess I cannot communicate what I mean.
... I was wondering if an image would stretch as a background image in the
stylesheet as a background. That's all.
Ingo did a demo as a background image of a h1 tag. I thought that would
work.
Using the EXACT same code that he used, in
Bruce,
I guess I cannot communicate what I mean.
I have an image on my own website of a sunset.
I put it in the banner div as an image and set the width to 100%.
I am perfectly happy with it, it looks good and stretches to fit all
resolutions. There is nothing wrong with it at all.
At 1024
Bruce wrote:
I guess I cannot communicate what I mean.
I was wondering if an image would stretch as a background image in the
stylesheet as a background. That's all.
Short answer: No, you cannot, with CSS and HTML as it is today, resize a
background image.
The only properties
Thank you to all who responded.
I see that it is a problem with CSS at present. Partial solution seems to be
making the image wide (I had it at 720px or thereabouts)
I made the image itself 1026w, and 11k, now it sscales nicely, and for
larger res the fade or framed with another image seems the
Result:
http://peoriaaz.nexcess.net/index.php
Anyways, that's what all the fuss was about.
Site was just started this morning. Done in Expression Engine. Redoing
everything yet.
Thanks again
Bruce Prochnau
BKDesign Solutions
**
The
Hi Bruce
Instead of stretching an image, try the sliding doors approach. This may
seem odd in a photograph, but could work in situations where the image has a
repeatable section. #wrap gets the left corner with generic content.
#innerwrap gets the right side with the juicy part of the image.
Bruce wrote:
Looks like a perfect solution. At least as perfect as can be had.
Thanks to all who ansered. Funny how it can be easily done as an image IN
the banner , but not in staylesheet.
wait 'til css3 and you can use an svg image in the background, that will
do exactly what you want.
21 matches
Mail list logo