background image expansion in a css file.

D

Dave Kelly

I read here: http://www.w3.org/TR/css3-background/
and took this under 'background-size'

Here are some examples. The first example stretches the background image
independently in both directions to completely cover the content area:

div {
background-image: url(plasma.png);
background-size: 100%;
background-origin: content}

to mean that the image would not tile and only show once taking up
the whole container, both vertically and horizontally.

Look here for my problem. http://www.texasflyfishers.org/newindex.htm

Those columns will be different length at different times. Is there a
better way to set the length to the conditions?

Running the css code thru the W3C css validate and I get 4 errors:
URI : http://texasflyfishers.org/newtff3col.css
69 #navigation Property background-size doesn't exist : 100%
70 #navigation Property background-origin doesn't exist : content
102 #rightcol Property background-size doesn't exist : 100%
103 #rightcol Property background-origin doesn't exist : content
 
B

Bergamot

Dave said:
I read here: http://www.w3.org/TR/css3-background/
and took this under 'background-size'

Browser support for CSS3 is very limited. I don't know that any support
background-size yet.
Running the css code thru the W3C css validate and I get 4 errors:
URI : http://texasflyfishers.org/newtff3col.css
69 #navigation Property background-size doesn't exist : 100%

I think the validator defaults to checking against CSS 2.1, which of
course doesn't have these CSS3 properties.
 
J

John Hosking

Bergamot said:
Browser support for CSS3 is very limited. I don't know that any support
background-size yet.


I think the validator defaults to checking against CSS 2.1, which of
course doesn't have these CSS3 properties.

But one can specify CSS3, which for the OP's page yields
"Congratulations! No Error Found." (There is one warning.) So the
validator's happy, all you need to do now is get visitors to view your
page through the validator. ;-)

Personally, I still can't get to http://www.texasflyfishers.org/ or
http://texasflyfishers.org/ from where I am, so I can't comment/help
further.
 
D

dorayme

Dave Kelly said:
I read here: http://www.w3.org/TR/css3-background/
and took this under 'background-size'

Here are some examples. The first example stretches the background image
independently in both directions to completely cover the content area:

div {
background-image: url(plasma.png);
background-size: 100%;
background-origin: content}

to mean that the image would not tile and only show once taking up
the whole container, both vertically and horizontally.

Look here for my problem. http://www.texasflyfishers.org/newindex.htm

Those columns will be different length at different times. Is there a
better way to set the length to the conditions?

Running the css code thru the W3C css validate and I get 4 errors:
URI : http://texasflyfishers.org/newtff3col.css
69 #navigation Property background-size doesn't exist : 100%
70 #navigation Property background-origin doesn't exist : content
102 #rightcol Property background-size doesn't exist : 100%
103 #rightcol Property background-origin doesn't exist : content

This site is struggling badly with many problems, you are
tightrope walking and you really ought to consider two options at
this point. One, if you are really set on the look of this three
col as you have it but with the problems about background gone,
use a table and be done. Two, redesign things so you are not
requiring the things that are giving you problems, no point in
mentioning alternatives here unless you are open to them?

From an aesthetic point of view, it would be no big loss to be
rid of those repeating backgrounds for the side cols as they are
not exactly harmonious with the bg for the header (which is a
fair enough one I guess), it looks sort of like "someone has
decided to put in a background of a similar hue to above...". It
is "acceptable" perhaps, but not first rate. The pictorial
connection between the header and these col bgs is not natural or
good in any real sense. I am saying, in effect, you should not be
too wedded to them.
 
J

Jukka K. Korpela

Scripsit Bergamot:
Browser support for CSS3 is very limited.

Besides, there is no CSS3, except as a hype buzzword for a mixed collection
of more or less sketchy drafts, most of which have remained at working draft
level for years.

I wonder how people regularly miss the disclaimers:
"This is a draft document and may be updated, replaced or obsoleted by other
documents at any time. It is inappropriate to cite this document as other
than work in progress."
 
B

Ben C

I read here: http://www.w3.org/TR/css3-background/
and took this under 'background-size'

Here are some examples. The first example stretches the background image
independently in both directions to completely cover the content area:

div {
background-image: url(plasma.png);
background-size: 100%;
background-origin: content}

to mean that the image would not tile and only show once taking up
the whole container, both vertically and horizontally.
Look here for my problem. http://www.texasflyfishers.org/newindex.htm

Those columns will be different length at different times. Is there a
better way to set the length to the conditions?

Running the css code thru the W3C css validate and I get 4 errors:
URI : http://texasflyfishers.org/newtff3col.css
69 #navigation Property background-size doesn't exist : 100%
70 #navigation Property background-origin doesn't exist : content
102 #rightcol Property background-size doesn't exist : 100%
103 #rightcol Property background-origin doesn't exist : content

The problem is that background-size is CSS 3 and the W3C css validator
is working against (probably) 2.1, as are most people's browsers.

There's no background-size in CSS 2.1 and no way to stretch background
images. You have to use an <img> if you want to stretch it.
 
B

Ben C

On 2007-09-10 said:
Besides, there is no CSS3, except as a hype buzzword for a mixed collection
of more or less sketchy drafts, most of which have remained at working draft
level for years.

I wonder how people regularly miss the disclaimers:
"This is a draft document and may be updated, replaced or obsoleted by other
documents at any time. It is inappropriate to cite this document as other
than work in progress."

You get that disclaimer on the CSS 2.1 draft specification too, but CSS
2.1 is widely almost implemented and almost understood by designers.

So the disclaimer doesn't tell people much of what they want to know for
practical purposes-- i.e. will something work.
 
J

John Hosking

Ben said:
You get that disclaimer on the CSS 2.1 draft specification too, but CSS
2.1 is widely almost implemented and almost understood by designers.

This makes a great slogan for the effort to standardize Web styling:

"The version before last: Now widely almost implemented and almost
understood by designers!"

The W3C should use this more in their marketing/evangelism efforts.

:p
 
J

Jukka K. Korpela

Scripsit John Hosking:
This makes a great slogan for the effort to standardize Web styling:

"The version before last: Now widely almost implemented and almost
understood by designers!"

And implementors could use similar style in advertizing the implementations:
"Almost strictly standard, with a lot of useful extensions especially for
you!"
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top