1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: background image problems

Discussion in 'Web Design & Development' started by snorkytheweasel, Dec 30, 2010.

Thread Status:
Not open for further replies.
Advertisement
  1. snorkytheweasel

    snorkytheweasel Thread Starter

    Joined:
    May 3, 2006
    Messages:
    215
    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
     
  2. ehymel

    ehymel

    Joined:
    Aug 12, 2007
    Messages:
    696
    I worked on something similar recently... I don't think it can be done the way you are doing with simple css, but try the method posted here.
     
  3. lordsmurf

    lordsmurf

    Joined:
    Apr 23, 2009
    Messages:
    1,156
    Want to be even more disgusted? Now go view it on an iPad.
    Known mess.
     
  4. snorkytheweasel

    snorkytheweasel Thread Starter

    Joined:
    May 3, 2006
    Messages:
    215
    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.
     
  5. caraewilton

    caraewilton

    Joined:
    Nov 7, 2007
    Messages:
    1,352
    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.
     
  6. snorkytheweasel

    snorkytheweasel Thread Starter

    Joined:
    May 3, 2006
    Messages:
    215
    It works great! But it's much too simple. Can't you come up with something more complicated? :cool:

    thx
     
  7. snorkytheweasel

    snorkytheweasel Thread Starter

    Joined:
    May 3, 2006
    Messages:
    215
    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/
     
  8. caraewilton

    caraewilton

    Joined:
    Nov 7, 2007
    Messages:
    1,352
  9. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/971739

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice