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
What is the best way to get a 100% width on a
background image in a banner?
I believe in fluid sites that look good in all
resolutions, img tag works easy at 100% width, but even searching for hours on
google didn't help for css background sizing in %.
Anyone can help?
Thanks in advance.
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.
22 matches
Mail list logo
