SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Apr 2000
    Location
    Winchester, Hampshire, England
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You can just put the background image in at the top of the page by doing this...

    <style>body { background-image: "gfx/image.gif"; background-position: bottom right; background-attachment: fixed; background-repeat: no-repeat;}</style>

    This stops it repeating so you can just set the rest of the background as black.

    There is a way of just having it repeating horizontally or vertically but I can't remember how to do it.

    If anyone else knows please post it here.

    Cheers!

    Peter

  2. #2
    SitePoint Member
    Join Date
    May 2000
    Location
    Burlington, NJ, USA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    This is my first time to post here!

    I am creating a web site and here is my dilemma:

    I want an image to be at the top of all of my pages going from side to side to fill the top of the viewers browser window. Here is an example of what I want it to look like, but please beware that the page takes forever to load (part of my dilemma) http://www.xzight.com/preview.html

    OK. Now that you've seen what I want it to look like, I NEED HELP!

    I figure I have 2 options: I can use a background image, but the one that is already on that preview page was optimized by the image compression tool at gifcruncher.com and still loads way too slow.

    The other option is to use an image of the picture and put it at the top of each page. The problem with that is the issue of resolution - how would I get the image to be across the top of everyone's browser window at the width of 100% and still have the image look good (not stretched or shrunk)?

    I don't know what to do! Please help me figure this out!

    I created the background image in Photoshop. It is approx. 1000 pixels tall. To me, it seems like there should be another way to have this image at the top of my page without having to have the background image at 1000 pixels long. Is there anyway to just insert the image (from option 2) as a background and not have the background repeat itself, so I can still have the black part of the body of my site?

    HELP!!!!!!!

    Thanks in Advance,
    Carolyn

    P.S. Please keep in mind I know nothing about Cascading Style Sheets or much of anything "technical" I am using Adobe Pagemill.

  3. #3
    SitePoint Wizard silver trophy Karl's Avatar
    Join Date
    Jul 1999
    Location
    Derbyshire, UK
    Posts
    4,411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got the imge down to 15k using 60% image quality in Jpeg, you should also make sure that the image is saved as progressive Jpeg, then when it will load the image in stages rather than wait for all of it to download first.

    It is a rather large image though.

    ------------------
    Karl Austin
    KDA Web Services

  4. #4
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you want a tiling background to repeat across the top only you can put:
    background-repeat: repeat-y;

    If you want it to repeat down only then you can put:
    background-repeat: repeat-x;

    You can create a top border by putting the following code in the head section of your document:
    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    &lt;style&gt;
    body { background-image: "gfx/image.gif";
    background-position: top left;
    background-attachment: fixed;
    background-repeat: repeat-y;}
    &lt;/style&gt;
    [/code]

    You can make a version of the popular left handed border by using:
    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    &lt;style&gt;
    body { background-image: "gfx/image.gif";
    background-position: top left;
    background-attachment: fixed;
    background-repeat: repeat-x;}
    &lt;/style&gt;
    [/code]

    You can create a right hand border that works in any resolution by using:
    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    &lt;style&gt;
    body { background-image: "gfx/image.gif";
    background-position: top right;
    background-attachment: fixed;
    background-repeat: repeat-x;}
    &lt;/style&gt;
    [/code]

    and finally you can create a border along the bottom of the page by using:
    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    &lt;style&gt;
    body { background-image: "gfx/image.gif";
    background-position: bottom left;
    background-attachment: fixed;
    background-repeat: repeat-y;}
    &lt;/style&gt;
    [/code]

    Please note that these techniques don't work in Netscape Navigator or anything before version 4 of Internet Explorer. While background placement is possible in these browsers it is a lot more complicated and would require a bit of work on your part to get a good effect on multiple resolutions.


    ------------------
    Wayne Luke - Sitepoint Moderator/Internet Media Developer
    Digital Magician Studios - Making Magic with Web Applications
    wluke@digitalmagician.com

    [Edited to be seen on smaller resolutions.]

    [This message has been edited by wluke (edited May 21, 2000).]

  5. #5
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Even easier (and compatible with more browsers, including Netscape 4.x), you can just put the picture in a table cell background:

    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    &lt;HTML&gt;
    ...
    &lt;BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0&gt;
    &lt;TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%&gt;
    &lt;TR&gt;&lt;TD BACKGROUND="bgimage.jpg"&gt;&lt;IMG SRC="spacer.gif" WIDTH=1 HEIGHT=2 VSPACE=24&gt;&lt;/TD&gt;&lt;/TR&gt;
    &lt;/TABLE&gt;
    ...the rest of your page...
    [/code]

    In the above, "bgimage.jpg" is the image you want to tile horizontaly across the top of your page. "spacer.gif" is a small (I use 5x5) transparent GIF. In the above, the spacer GIF has been set to be 2 pixels high, with 24 pixels' spacing above and below (for a total height of 50 pixels). You should set these values to match the height of the image you want to tile.

    If you want any content to appear over the tiled image, just put it in the table cell following the spacer GIF.

    ------------------
    -Kevin Yank.
    http://www.SitePoint.com/
    Helping Small Business Grow Online!

    [This message has been edited by kyank (edited May 21, 2000).]

  6. #6
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have tried that method and have found out that you have Netscape will sometimes collapse or not show the background row(s) properly unless there is something in there to fill the entire row. Personally I don't sweat the little stuff like that though. If the background doesn't show but the rest of the page looks good then the user isn't missing anything.

    ------------------
    Wayne Luke - Sitepoint Moderator/Internet Media Developer
    Digital Magician Studios - Making Magic with Web Applications
    wluke@digitalmagician.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •