473,722 Members | 2,397 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Gradient background fill in liquid layout

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
Nov 26 '07 #1
9 8142

"Eric Lindsay" <NO************ *@ericlindsay.c omwrote in message
news:NO******** *************** ************@fr eenews.iinet.ne t.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

Nov 26 '07 #2
In article
<NO************ *************** ********@freene ws.iinet.net.au >,
Eric Lindsay <NO************ *@ericlindsay.c omwrote:
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
Nov 26 '07 #3
In article <fi**********@a ioe.org>,
"Nik Coughlin" <nr******@gmail .comwrote:
"Eric Lindsay" <NO************ *@ericlindsay.c omwrote in message
news:NO******** *************** ************@fr eenews.iinet.ne t.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
Nov 26 '07 #4
"dorayme" <do************ @optusnet.com.a uwrote in message
news:do******** *************** ***********@new s-vip.optusnet.co m.au...
In article <fi**********@a ioe.org>,
"Nik Coughlin" <nr******@gmail .comwrote:
>"Eric Lindsay" <NO************ *@ericlindsay.c omwrote in message
news:NO******* *************** *************@f reenews.iinet.n et.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.

Nov 26 '07 #5
In article <fi**********@a ioe.org>,
"Nik Coughlin" <nr******@gmail .comwrote:
"dorayme" <do************ @optusnet.com.a uwrote in message
news:do******** *************** ***********@new s-vip.optusnet.co m.au...
In article <fi**********@a ioe.org>,
"Nik Coughlin" <nr******@gmail .comwrote:
"Eric Lindsay" <NO************ *@ericlindsay.c omwrote in message
news:NO******** *************** ************@fr eenews.iinet.ne t.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
Nov 26 '07 #6
"dorayme" <do************ @optusnet.com.a uwrote in message
news:do******** *************** ***********@new s-vip.optusnet.co m.au...
In article <fi**********@a ioe.org>,
"Nik Coughlin" <nr******@gmail .comwrote:
>"dorayme" <do************ @optusnet.com.a uwrote in message
news:do******* *************** ************@ne ws-vip.optusnet.co m.au...
In article <fi**********@a ioe.org>,
"Nik Coughlin" <nr******@gmail .comwrote:

"Eric Lindsay" <NO************ *@ericlindsay.c omwrote in message
news:NO******* *************** *************@f reenews.iinet.n et.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 :)

Nov 26 '07 #7
In article <fi**********@a ioe.org>,
"Nik Coughlin" <nr******@gmail .comwrote:
"dorayme" <do************ @optusnet.com.a uwrote in message
news:do******** *************** ***********@new s-vip.optusnet.co m.au...
In article <fi**********@a ioe.org>,
"Nik Coughlin" <nr******@gmail .comwrote:
"dorayme" <do************ @optusnet.com.a uwrote in message
news:do******** *************** ***********@new s-vip.optusnet.co m.au...
In article <fi**********@a ioe.org>,
"Nik Coughlin" <nr******@gmail .comwrote:

"Eric Lindsay" <NO************ *@ericlindsay.c omwrote in message
news:NO******** *************** ************@fr eenews.iinet.ne t.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
Nov 26 '07 #8
"dorayme" <do************ @optusnet.com.a uwrote in message
news:do******** *************** ***********@new s-vip.optusnet.co m.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.

Nov 27 '07 #9
In article <fi**********@a ioe.org>, "Nik Coughlin" <nr******@gmail .com>
wrote:
"Eric Lindsay" <NO************ *@ericlindsay.c omwrote in message
news:NO******** *************** ************@fr eenews.iinet.ne t.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
Nov 28 '07 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
2433
by: Woody Splawn | last post by:
I have a webform where I would like to have the background color for the webform be a gradient in blue. How do I do this? What is the easiest way? What is the way most used by other developers? Do you draw it with code or attach a .gif file as a background or what? Does one way or the other have an effect on speed? Thank You
5
4486
by: Dotnet Wanderer | last post by:
Hello Friends, Its time for me to show how cool UI can be in .NET. This is a call for help on how to create those beautiful looking gradient tool bars like this site: http://msdn.microsoft.com/newsgroups/default.aspx?dg=microsoft.public.dotnet.framework.aspnet I would appreciate any directions on how can I find information on these.
0
4444
by: Don | last post by:
I'm making a custom control that has a multiline textbox on it. I want to make the textbox have a gradient background. On my custom control's Paint event I call a routine that draws a gradient on the textbox's background, but the gradient starts appearing at the bottom of the textbox after the last line of text. It's almost as if VB draws the gradient on the entire textbox, then blanks out the part of the textbox that actually displays...
2
2358
by: Adam Maltby | last post by:
Hi does anyone know how to fill a rectangle with an ellipse style fill (ie so it gives a spotlight effect on a rectange?) I know how to create rectangles, ellipses etc and I can fill the rect with an oversized ellipse, but given how far over the edge of the view it has to go, it loses the defining edges on the colours..... I need the fill to go out as far as the outer ellipse colour, and then the rest of the visible form take that colour.......
0
1042
by: Dan Baumbach | last post by:
I'm working on a toolbar for IE. I have everything working well but I'm unable to get the toolbar to have the same gradient background under XP that other toolbars on IE have. To start with, I don't see any documentation to get the colors for the gradient on IE. Is there one? My toolbar has the TBSTYLE_TRANSPARENT but it uses the defined background color brush of the parent window as its background rather that really being truely...
2
1873
by: skylargivens | last post by:
I've created an application for Windows XP but I'm having trouble getting the right "look". I'd like my application to look somewhat like the Windows Vista sidebar: http://www.winsupersite.com/showcase/winvista_rc1_gallery_01.asp Notice how there is a black to transparent gradient on the right side of the screen. Does anyone know any way acheive this effect using Visual Studio 2005?
1
1660
by: madladuk | last post by:
Hi all. Does anyone have any example of how to do a gradient background whilst moving over graphics and text like the Microsoft web site. On the MS site when you select an area a window popup and as you hover over the sections it fill in a nice gradient background, any assistance? Thanks
6
6167
by: moondaddy | last post by:
I want to fill the entire background of a page with a gradient. As a test, I first filled with a solid color like this: <body style="background-color: #ccffff;" > and the entire page was this color. next I replaced that with a gradient style like this: <body style="filter:
5
3447
by: Bob Altman | last post by:
Hi all, Here's another rank beginner question. What is the standard way to fill a client-side table cell with a horizontal gradient background? TIA - Bob
0
8739
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9384
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9088
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8052
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6681
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5995
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4502
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4762
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3207
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.