{background-image} Question

[Greg Heilers]

Hello everyone...

If one has a <div> that is completely filled with a
background-image; how does one style it so that the
image *continues* to fill the <div> top-to-bottom,
left-to-right; if the viewer adjusts the font-size
on his browser? I have everything sized in em's,
so that the actual <div> "box" resizes along with the
text, but the background-image will not resize if the
text is "zoomed". I can not find anything pertaining
to something along the lines of "background-image-size";
or similar. Are there certain attributes for background-
position that can ensure this?

Thanks

--

Greg Heilers
Registered Linux user #328317 - SlackWare 10.1 (2.6.10)
.....

As far as anyone knows we're a nice, normal family.

-- Homer Simpson
There's No Disgrace Like Home

[Eric Lindsay]

In article <E6**************@newsread2.news.pas.earthlink.net >,
Greg Heilers <gN************@earthNOSPAMlink.net> wrote:

If one has a <div> that is completely filled with a
background-image; how does one style it so that the
image *continues* to fill the <div> top-to-bottom,
left-to-right; if the viewer adjusts the font-size
on his browser? I have everything sized in em's,
so that the actual <div> "box" resizes along with the
text, but the background-image will not resize if the
text is "zoomed". I can not find anything pertaining
to something along the lines of "background-image-size";
or similar. Are there certain attributes for background-
position that can ensure this?

I was looking at putting a background image on some links styled as
buttons, which seems a similar problem. In Opera the image is zoomed,
but in Safari only the text is zoomed, as you point out. I read
something about using * {zoom: 1.0;} as a way to get IE to zoom like
Opera, but that seems to be proprietary and the CSS validator doesn't
like it. However I haven't got IE so I don't even know if it works.

--
http://www.ericlindsay.com

[Greg Heilers]

Eric Lindsay wrote:

In article <E6**************@newsread2.news.pas.earthlink.net >,
Greg Heilers <gN************@earthNOSPAMlink.net> wrote:

If one has a <div> that is completely filled with a
background-image; how does one style it so that the
image *continues* to fill the <div> top-to-bottom,
left-to-right; if the viewer adjusts the font-size
on his browser? I have everything sized in em's,
so that the actual <div> "box" resizes along with the
text, but the background-image will not resize if the
text is "zoomed". I can not find anything pertaining
to something along the lines of "background-image-size";
or similar. Are there certain attributes for background-
position that can ensure this?

I was looking at putting a background image on some links styled as
buttons, which seems a similar problem. In Opera the image is zoomed,
but in Safari only the text is zoomed, as you point out. I read
something about using * {zoom: 1.0;} as a way to get IE to zoom like
Opera, but that seems to be proprietary and the CSS validator doesn't
like it. However I haven't got IE so I don't even know if it works.

Well...I removed the {background-image} attributes from the style section;
and used <img src="whatever.jpg" height=100% width=100%> within the actual
<div>, before overlaying it with the text. This *will* properly zoom
in Mozilla, Firefox, and Konqueror. Like you, though, I am currently in a
Microsoft-Free environment, and can not test it in IE.

--

Greg Heilers
Registered Linux user #328317 - SlackWare 10.1 (2.6.10)
.....

As far as anyone knows we're a nice, normal family.

-- Homer Simpson
There's No Disgrace Like Home

[Spartanicus]

Greg Heilers <gN************@earthNOSPAMlink.net> wrote:

If one has a <div> that is completely filled with a
background-image; how does one style it so that the
image *continues* to fill the <div> top-to-bottom,
left-to-right; if the viewer adjusts the font-size
on his browser?
Background images by default repeat to "fill" their container, in CSS2.x
you cannot stretch them (background image stretching is part of the CSS3
proposals, but afaik not yet implemented by any browser).

Not many images look good when stretched, not helped by the fact that
browsers use fast but crude algorithms to do this.
I have everything sized in em's,
so that the actual <div> "box" resizes along with the
text

If the box with the background image contains text then it should be
sized using a relative unit, if you don't then your precious design will
often fall apart with varying user font settings.

If the box doesn't contain any text then there are no problems with
sizing it using the px unit.

Coding the image in the HTML with a 100% width and height creates it's
own problems if the box also contains text. You'd have to take the text
out of the flow to get it to display over the image, this will result in
overflow problems if the text wraps or if the viewport width isn't
sufficient.

The 100% width and height of an image coded in the HTML should be
specified in the CSS, or else the image will blow up to fill the
viewport when the user has CSS disabled of if it doesn't load for some
reason.

--
Spartanicus