»
Tech Talk
»
User Friendly Graphics
»
Backgrounds....
| User Friendly Graphics |
|
Backgrounds.... |
|
Elizabeth
Moderator
Member Ascendant
since 1999-06-07
Posts 6871Minnesota |
Another dumb question here... How do I get my background to fit the whole screen? |
||
| © Copyright 2001 Elizabeth A. Larson - All Rights Reserved | |||
|
Ron
Administrator
Member Rara Avis
since 1999-05-19
Posts 8669Michigan, US |
I suspect you're asking the wrong question, Elizabeth. You can't make a background NOT fit the whole screen, even if you try. By definition, that's what a background does, automatically tiling itself if necessary. Ergo, I suspect the question is really "How do I use an image as a background?" And the answer is, it has to be defined in your BODY tag. This is what you'll find at the main site if you do a View Source on just about any page: < body text="#000080" link="#000080" vlink="#808080" background="imgs/bg.jpg" > |
||
|
Elizabeth
Moderator
Member Ascendant
since 1999-06-07
Posts 6871Minnesota |
Thanks Ron! I'll try that then.  |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
Well, kinda yeah, kinda no. I'd like to add a modifier to what Ron said. There is no cross-browser compliant way to make the background not repeat. There is, however, a way to do it in current versions of Internet Explorers. It is mostly a point of curiosity, rather than one that is practical to use, since it is one of those features that degrades rather poorly in Netscape. It involves the use of css - or style sheets. BODY { background-image: url(back.jpg); background-repeat: no-repeat; } Point of interest only.  C |
||
|
WhtDove Member Rara Avis
since 1999-07-22
Posts 9245Illinois |
One more, you also have the option of using an editing software, and making the image into a background. |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
Becca - I think I get what you're saying - but not positive... could you elucidate please? C |
||
|
WhtDove Member Rara Avis
since 1999-07-22
Posts 9245Illinois |
Chris, what I mean is if you have like Paint Shop Pro or something, you can make the graphic into a background. That way, it should automatically tile. Right? I mean if it's a normal sized graphic, it would be hard to make it tile correctly on a background, without it actually being made into a background? |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
Kinda yeah and kinda no again. No matter what graphic you use and no matter what size it is, it will repeat (with the exception I noted in the above reply) It will repeat that is... as long as there's open space for it to do so in. When you include a background image in your 'body' tag: , you are telling the browser to place that image - starting top to bottom, left to right - to fill the browser. Example: If you have your browser maximized and the available space is 800x600, then your browser will spread the background image over 800 pixels left-to-right and 600 pixels top-to-bottom. If the background image is only 400 pixels wide by 300 pixels high, then it will repeat twice on each axis to fill the space, giving you a total of four images, tiled.  Needless to say, without some care in choosing the background image and size, this kind of effect can become quite messy and/or confusing, rendering the page unattractive and difficult to read! YIKES! So how can we do it in a manner that doesn't end up unattractive or confusing? With a little care... Let's look at Ron's example (assuming I haven't already bored you to death).  If you go to the main site of Passions: http://netpoets.com/ you can see the background in effect. First, you find the beginning of the image (blue), a small gray gradient, the area holding the content ('white space'), gradient again, and finally more blue which ends at the scrollbar on the right side of your browser. Looks beautiful, doesn't it? BUT, if you change your resolution... say to 1280x1024 (not that many people use such a high resolution, this is merely to show a point...) and have a large enough monitor (17" in my case)... maximize your browser, and... what's that? Off to the right? Hmm - you'd think the blue would just continue forever...  Off to the far right, near the scroll bar, you can see that the image has repeated itself. If you could stretch your browser/resolution far enough, you could see it repeated forever and ever and ever. This is an extreme example to show the point. In reality, this example is one of the clever usages. Most people won't have their resolution set that high, and even so - it looks good repeated. Best thing, is that the image is less than 1k. http://netpoets.com/imgs/bg.jpg What it does, is take advantage of the top-to-bottom tiling to form a clean background. Cool, huh? I stole that idea myself for the upcoming change to Countless Horizons: http://www.countlesshorizons.com/newdesign/ But don't tell anyone about it - it's still top secret.  Graphic Formats All graphics can be backgrounds. At least all the web-recognized formats. I only know of three, though there may be more. It is definitely safe to use the first two (GIF & JPEG), and I'm iffy on the last (PNG) personally, because there are still some older browsers that don't recognize the format. GIF - Graphics Interchange Format: A bit-mapped graphics file format used by the World Wide Web, CompuServe, and many BBS's. GIF supports color and various resolutions. It also includes data compression, making it especially effective for scanned photos. JPEG (more commonly referred to as JPG) - Joint Photographic Experts Group: A lossy compression technique for color images. Although it can reduce files sizes to about 5% of their normal size, some detail is lost in the compression. PNG - Portable Network Graphics: A new bit-mapped graphics format similar to GIF. PNG was approved as a standard by the World Wide Web consortium to replace GIF because GIF uses a patented data compression algorithm called LZW. In contrast, PNG is completely patent- and license-free. The most recent versions of Netscape Navigator and Microsoft Internet Explorer now support PNG. (extension definitions taken from webopedia: http://webopedia.internet.com/ ) Peace, C |
||
|
WhtDove Member Rara Avis
since 1999-07-22
Posts 9245Illinois |
That was kind of my point Chris, that if you made that 'photo' into a background, then you should get a smooth background, and not one that tiled itself, especially in the wrong dimensions. Know what I mean? Thanks for all info dude!  |
||
|
|
⇧ top of page ⇧ |
|
| All times are ET (US). All dates are in Year-Month-Day format. | ||
