Gradient background fill in liquid layout

[Eric Lindsay]

How do you provide a consistent gradient fill as a background in a
liquid layout?

If I make a gradient fill image say 1000 pixels wide (and repeat it down
the page) to suit a typical computer display, then only a small portion
of the gradient will show if the viewpoint is a smaller PDA or phone
display.

On the other hand, if viewed full screen on a 1920 pixel wide display, I
would run out of gradient on one or both sides of the page. I could
repeat the two end colours of the gradient fill horizontally to fill out
the display, but then I don't have a consistent gradient.

More generally, how do you best make an image fill an available
container, whether this is the entire viewpoint, or just as a background
of a div? Do I just give the image a size of 100% of its container? I
was under the impression it was a really bad move to use anything except
pixels as the size of an image. However with lots of browsers now
resizing images anyhow, it seems less and less reasonable to restrict
all my images to their original pixel size.

--
http://www.ericlindsay.com

[Nik Coughlin]

"Eric Lindsay" <NO*************@ericlindsay.comwrote in message
news:NO***********************************@freenew s.iinet.net.au...

How do you provide a consistent gradient fill as a background in a
liquid layout?

Had a crack and came up with this:

http://nrkn.com/gradBg/

Has issues. Not very nice to use an <imgfor the backround but without
CSS3 is no other way. Not tested in IE 6 as I am too lazy to fire up
virtual machine, probably doesn't work due to position: fixed, you can look
up fixes for that. Works in FF, Safari, Opera, IE 7 (was surprised about IE
7!).

Possibly can be done better, or might be as close as you're going to get.

Gradients compress well with PNG, so having them very big on the axis that
they run is no problem. Mine is 4096px high.

You can probably get it to work as a container background rather than the
page background by playing with position absolute and relative but I don't
have time to look into it.

Cheers

[dorayme]

In article
<NO***********************************@freenews.ii net.net.au>,
Eric Lindsay <NO*************@ericlindsay.comwrote:

How do you provide a consistent gradient fill as a background in a
liquid layout?

If I make a gradient fill image say 1000 pixels wide (and repeat it down
the page) to suit a typical computer display, then only a small portion
of the gradient will show if the viewpoint is a smaller PDA or phone
display.

Which is why you need to carefully make a gradient to suit the
particular needs of the page. If, for example, you have set aside
a certain number of pixels for a left col in the html, and you
want everyone to see a nice colour there shading off to the right
to a more neutral bg colour (say the same as the body, perhaps
white), then it is easy, you just make a not all that wide one
and repeat it down. If you really want to have a gradation
showing from left to right on the very smallest to the very
biggest of screens, you make a *very* wide (but tiny height
pixeled) one.

There are many costs and benefits depending on exactly what you
want. There is no general answer to your question. Post a url of
something you roughly want in a realistic sort of page.

On the other hand, if viewed full screen on a 1920 pixel wide display, I
would run out of gradient on one or both sides of the page.

Which means you have made too small a bg pic. There is little
bandwidth cost in wide or tall if you have the *other* dim tiny
(like 1px)

I could
repeat the two end colours of the gradient fill horizontally to fill out
the display, but then I don't have a consistent gradient.

Best not to repeat gradients. Fraught with difficulties.

>
More generally, how do you best make an image fill an available
container, whether this is the entire viewpoint, or just as a background
of a div?

bg is a straightforward issue. As for <img src=""...in the
html, you can give the size in % of the container (body or less)
if you are prepared to steer your way through two big issues:

(1) If you make the pic bandwidth frindly, it will likely look
terrible blown up by a browser

(2) If you make a nice big pic that is of acceptable bandwidth
strain, it will look absolutely smashing at all sizes that are
smaller on a Mac and bloody awful on IE and not great on any
Windows machine. That is my experience so far.

Do I just give the image a size of 100% of its container? I
was under the impression it was a really bad move to use anything except
pixels as the size of an image.

It is not a really bad move for particular types of graphic or
particular types of pics. If you just do it willy nilly then this
is a very bad move. <g>

However with lots of browsers now
resizing images anyhow, it seems less and less reasonable to restrict
all my images to their original pixel size.

No, you don't want to follow anyone or anything in making bad
moves. That some browsers do it does not make it reasonable for
you to do it. The reasons for a browser doing it are not
necessarily applicable to an intelligent human.

--
dorayme

[dorayme]

In article <fi**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

"Eric Lindsay" <NO*************@ericlindsay.comwrote in message
news:NO***********************************@freenew s.iinet.net.au...

How do you provide a consistent gradient fill as a background in a
liquid layout?

Had a crack and came up with this:

http://nrkn.com/gradBg/

On my Safari, it was just lorem on bright green all over

Has issues. Not very nice to use an <imgfor the backround but without
CSS3 is no other way. Not tested in IE 6 as I am too lazy to fire up
virtual machine, probably doesn't work due to position: fixed, you can look
up fixes for that. Works in FF, Safari, Opera, IE 7 (was surprised about IE
7!).

Possibly can be done better, or might be as close as you're going to get.

O no, not even close to the truth surely Nick? He can get much
closer.

--
dorayme

[Nik Coughlin]

"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...

In article <fi**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

>"Eric Lindsay" <NO*************@ericlindsay.comwrote in message
news:NO***********************************@freene ws.iinet.net.au...

How do you provide a consistent gradient fill as a background in a
liquid layout?

Had a crack and came up with this:

http://nrkn.com/gradBg/

On my Safari, it was just lorem on bright green all over

My gradient was too subtle. Have replaced it with a more obvious one.

>Has issues. Not very nice to use an <imgfor the backround but without
CSS3 is no other way. Not tested in IE 6 as I am too lazy to fire up
virtual machine, probably doesn't work due to position: fixed, you can
look
up fixes for that. Works in FF, Safari, Opera, IE 7 (was surprised about
IE
7!).

Possibly can be done better, or might be as close as you're going to get.

O no, not even close to the truth surely Nick? He can get much
closer.

Yes, by following your suggestion of tailoring the gradient to suit the
page. That is how I usually do it :) But I thought it was an interesting
problem to have a go at. I don't think I would use this method, I don't
like the use of an img tag to fake a background.

[dorayme]

In article <fi**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...

In article <fi**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

"Eric Lindsay" <NO*************@ericlindsay.comwrote in message
news:NO***********************************@freenew s.iinet.net.au...
How do you provide a consistent gradient fill as a background in a
liquid layout?

Had a crack and came up with this:

http://nrkn.com/gradBg/

On my Safari, it was just lorem on bright green all over

My gradient was too subtle. Have replaced it with a more obvious one.

O ok now... (well, not quite ok, it is my least favourite colour
and looks horrible to me! But I know you are just technically
exampling here... <g>)

I think the truth is this, said it before, there is no general
answer to the op's question. I happen to think there should be a
sort of reason to have a gradient background, perhaps a slightly
functional one though I am not closed to an aesthetic argument.
For example, one might want to gently distinguish a menu on the
left but not so sharply with a clear defined colour from the rest
of the page. Here the solution invites itself with no fancy css
at all, just a carefully prepared bg img to suit. Even here, it
will not necessarily suit a left menu col that is em widthed. If
such a col is em widthed then a different solution is required
that grades a bg for just that one left division and grades into
a colour that is the general (preferably very light bg) to the
right. Then one needs to make a judgement that it better start
getting as light as it needs to be for smallest likely font. For
bigger user set fonts, the darker left will end earlier. There
simply have to be compromises.

Did I say before, everything depends on what is wanted?

(Hey Boji, are you yawning away now?)

Has issues. Not very nice to use an <imgfor the backround but without
CSS3 is no other way. Not tested in IE 6 as I am too lazy to fire up
virtual machine, probably doesn't work due to position: fixed, you can
look
up fixes for that. Works in FF, Safari, Opera, IE 7 (was surprised about
IE
7!).

Possibly can be done better, or might be as close as you're going to get.

O no, not even close to the truth surely Nick? He can get much
closer.

Yes, by following your suggestion of tailoring the gradient to suit the
page. That is how I usually do it :) But I thought it was an interesting
problem to have a go at. I don't think I would use this method, I don't
like the use of an img tag to fake a background.

Still, it is a nice stab. Later, I will have a go with a colour
and gradient I like better to put me in a more receptive mood for
your idea. There are issues surrounding fixed positions across
browsers I think...

--
dorayme

[Nik Coughlin]

"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...

In article <fi**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

>"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...

In article <fi**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

"Eric Lindsay" <NO*************@ericlindsay.comwrote in message
news:NO***********************************@freene ws.iinet.net.au...
How do you provide a consistent gradient fill as a background in a
liquid layout?

Had a crack and came up with this:

http://nrkn.com/gradBg/

On my Safari, it was just lorem on bright green all over

My gradient was too subtle. Have replaced it with a more obvious one.

O ok now... (well, not quite ok, it is my least favourite colour
and looks horrible to me! But I know you are just technically
exampling here... <g>)

Yep, personally, I don't like gradients that aren't subtle. I just don't
think that they look good. Not subtle = web 2.0 cliche. Subtle = sense of
depth added.

I happen to think there should be a
sort of reason to have a gradient background, perhaps a slightly
functional one though I am not closed to an aesthetic argument.

I use subtle gradients (as in, subtle enough that most people wouldn't even
notice that there is a gradient) to add a sense of depth to otherwise flat
colours. Just generally looks better, even if people only notice it
subconsciously, just like having drop shadows adds depth, and I prefer those
subtle too :)

[dorayme]

In article <fi**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...

In article <fi**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...
In article <fi**********@aioe.org>,
"Nik Coughlin" <nr******@gmail.comwrote:

"Eric Lindsay" <NO*************@ericlindsay.comwrote in message
news:NO***********************************@freenew s.iinet.net.au...
How do you provide a consistent gradient fill as a background in a
liquid layout?

Had a crack and came up with this:

http://nrkn.com/gradBg/

On my Safari, it was just lorem on bright green all over

My gradient was too subtle. Have replaced it with a more obvious one.

O ok now... (well, not quite ok, it is my least favourite colour
and looks horrible to me! But I know you are just technically
exampling here... <g>)

Yep, personally, I don't like gradients that aren't subtle. I just don't
think that they look good. Not subtle = web 2.0 cliche. Subtle = sense of
depth added.

I happen to think there should be a
sort of reason to have a gradient background, perhaps a slightly
functional one though I am not closed to an aesthetic argument.

I use subtle gradients (as in, subtle enough that most people wouldn't even
notice that there is a gradient) to add a sense of depth to otherwise flat
colours. Just generally looks better, even if people only notice it
subconsciously, just like having drop shadows adds depth, and I prefer those
subtle too :)

Fair enough.

(btw, I forgot to mention, given your doctype in your url
offering, the img in the html cannot be loose in body)

--
dorayme

[Nik Coughlin]

"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...

"Nik Coughlin" <nr******@gmail.comwrote:
http://nrkn.com/gradBg/

(btw, I forgot to mention, given your doctype in your url
offering, the img in the html cannot be loose in body)

Oops! Of course it can't. Good spotting.

[Eric Lindsay]

In article <fi**********@aioe.org>, "Nik Coughlin" <nr******@gmail.com>
wrote:

"Eric Lindsay" <NO*************@ericlindsay.comwrote in message
news:NO***********************************@freenew s.iinet.net.au...

How do you provide a consistent gradient fill as a background in a
liquid layout?

Had a crack and came up with this:

http://nrkn.com/gradBg/

Has issues. Not very nice to use an <imgfor the backround but without
CSS3 is no other way. Not tested in IE 6 as I am too lazy to fire up
virtual machine, probably doesn't work due to position: fixed, you can look
up fixes for that. Works in FF, Safari, Opera, IE 7 (was surprised about IE
7!).

Possibly can be done better, or might be as close as you're going to get.

Many thanks for that Nik. Looks like a very creditable and handy
starting point for me indeed.

IE7 has often done better than I expected. I don't have a Windows
computer, so that (and IE6) are always the last browsers I try to get
working.

Since Dorayme mentions matching gradient to situation, and you both have
doubts about their merit, I guess I had better give some background
information.

I asked the question because of a site I did a year or so ago as a
favour for my neighbour. This is a real small town, and there aren't
really many resources for someone who doesn't know much about the web. I
grabbed him some good domain names, and tried to get good search engine
position (except he wouldn't let me have as much text as I wanted - very
hard to get more than a word or two from him). I liked the idea of
trying to do it liquid, so I convinced him it was needed, although there
are some obvious issues I'd like a chance to revisit.
http://www.architectqueensland.com/

This weekend the neighbour invited me to a (reasonably liquid also)
party at a local restaurant
http://www.architectqueensland.com/c...estaurant.html launching
a new business name. A second person got accepted by RAIA as an
architect, so it is no longer a single architect's practice.

New signs for the office, new stationary, new business cards, all in a
rush. However the local artist who did the new business card background
graphic (in PDF) didn't (and won't) provide source (looks like it was
done in CorelDRAW 10). I thought the background was a gradient fill, but
checking today with DigitalColor Meter shows it a more complex pattern,
and also dithered (although that could be a PDF artifact).

Looking at the signage (at the restaurant, at night, while drinking), it
seemed to me they had been unable to match the business card background
for the signs (and probably stationary also), and had simply used a
fixed colour fill. If a fixed colour, when I do the site redesign, I
will just match their fixed colour. However the gradient style fill on
the business card annoys me. I would really like to jazz up the web site
with it, if I can manage it. Besides, trying something you haven't done
before is fun.

--
http://www.ericlindsay.com