Tech Support Guy banner
  • Please post in our Community Feedback thread for help with the new forum software! If you are having trouble logging in, please Contact Us for assistance.
Status
Not open for further replies.
1 - 8 of 8 Posts

·
Registered
Joined
·
215 Posts
Discussion Starter · #1 ·
I created a lovely image to use as a background. It is a horizontal gradient (greens). In my webdev software it looks great. However, when I put it into the real world, I realize that what displays on the x-axis (horizontal) is limited to the actual width of the image. The y-axis (vertical) seems to expand and contract as the content and/or the browser size expands and contracts. I want the background image to expand and contract in synch with the expansion and contraction of the browser, as does the text.

I think the problem is either a conceptual one. i.e., it can't be done in CSS 2.1, or my css declaration is wrong.

Here's the relevant css:

Code:
body 
{
	background-image:url(gradient-green007.jpg);
	background-position: 100% 100%;
	font-family:verdana,helvetica,geneva,tahoma,arial,sans-serif;
	font-size:12pt;

}
You can see the page at http://whidbeysbest.com/test/test250180.shtml
 

·
Registered
Joined
·
215 Posts
Discussion Starter · #4 ·
Yeah ... it scrambled the text so it all looks like fake Latin. All of that turgid prose, que lastima.....

It's rather good on Safari on an iTouch.

I'm more worried IE 7 & 8 and FireFox.
 

·
Registered
Joined
·
1,352 Posts
This is the css I would use:

Code:
body{
    background: #99FF99 url(gradient-green007.jpg) repeat-y;
  }
I would then cut that image to 1px high.
 

·
Registered
Joined
·
215 Posts
Discussion Starter · #6 ·
It works great! But it's much too simple. Can't you come up with something more complicated? :cool:

thx
 

·
Registered
Joined
·
215 Posts
Discussion Starter · #7 ·
I'm going to study that. In the meantime, caraewilton offered a solution that gets me unstuck. I'll let you know how your suggestion works out.

Thank you/
 
1 - 8 of 8 Posts
Status
Not open for further replies.
Top