SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile x marks the spot (clever backgrounds)

    Hi all,

    I have and old treasure map graphic i would like to use as a background.

    I am unsure on how to get the edging of the graphic to stick to the viewport edges while allowing the background to adjust according to the viewers browser.(graphic is just a texture and has no focal point)

    any idea on the most straight forward way of tackling this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by minusten View Post
    I am unsure on how to get the edging of the graphic to stick to the viewport edges while allowing the background to adjust according to the viewers browser.
    You can't do this with current CSS2 as a true background image, though CSS3 will offer this feature (which works in a few browsers now). You could put the image in the HTML and set it to width: 100%; but that won't look good in some browsers, and it can get a bit messy, too. Another option is to use JavaScript, with something like Supersized.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    The first thing that I can think of is to use multiple backgrounds or background divs to make the borders.

    There was a recent article on how to do this.

    Basically what you'd do is slice the image up so that only the main middle texture is your body {background-image:url('etc.jpg');}. Then, with the four sides around, you can use them as alternate background images and repeat-x and repeat-y (for whatever works) so that they look nice.

    Like so (CSS):

    Code:
    body
    {
     background-image:url('maintexture.jpg');
    }
    
    #Leftbackgroundimageborder
    {
     background-image:url('leftborder.jpg');
     background-repeat:repeat-y; /*You want it up and down because it's the left side border*/
    }
    
    #topbackgroundimageborder
    {
     background-image:url('rightborder.jpg');
     background-repeat:repeat-x;
    }
    Get it?

    ~TehYoyo

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great link! thanks for the advice TehYoyo

  5. #5
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    No probs.

    Happy to help.

    ~TehYoyo

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sooo thought i had it i have the background image done.

    it seems that my divs wont layer over the top of the edge of my background?

    any ideas??

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by minusten View Post
    it seems that my divs wont layer over the top of the edge of my background?

    any ideas??
    You need to tell us what method you are using, or better, provide a link so we can see what you are doing. Did you see my post above? It has a link to a method which you can basically cut and paste. Has content overlaid on image.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is what i have

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />

    </head>


    <body>
    <div class="cont">
    <div class="back">
    <div class="left">
    <div class="right">


    <table width="200" border="1" cellpadding="5">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>


    </div>
    </div>
    </div>
    </div>
    </body>
    </html>


    -------------------------------------------------------------------
    .back
    {
    background-image:url(Images/back.png),url(Images/sl.png),url(Images/sr.png);
    background-position: top , left , right;
    }

    .left
    {
    background:url(Images/sl.png) repeat-y;
    background-position:top left;
    position:fixed;
    }
    .right
    {
    background:url(Images/sr.png) repeat-y;
    background-position: top right;
    position:fixed;
    }

  9. #9
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i got your like its very nifty though i dont get how to apply a slideshow to my issue?


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
  •