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.

Newbie Needs Help - Link the Body Background Image?

Discussion in 'Web Design & Development' started by soulsister, Feb 20, 2013.

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

    soulsister Thread Starter

    Joined:
    Feb 20, 2013
    Messages:
    49
    Hi There,

    Thanks for providing a place to get free help guys!

    I've been paid to do the graphics and site set up for a friend at Weebly. But the splash page she wants was so difficult I bought a template I thought would work. Basically, the background photo resizes to fit different resolutions, but the Enter Site Button ends up being in front of bad places of the background photo. I've spent so much time that...


    Now, I'd just be content to put the "Enter Site" button IN the background image itself (so it's not really a button) and have it so anywhere the user clicks on the background image will bring them to the home page. (it will be like they used the button)

    I want to link either the body element, or the body background, to the home page. (In a mostly, cross browser compatible way.)

    Can someone please tell me where I need to put the <a href/> tag, (Very specifically because I am proving to be a dolt at this), in the html file?

    Or, can this be done in the CSS file? - because that's where the image reference is...


    I'm attaching the html code for the Splash Page as well as the Main CSS file.

    Hope someone can help. Much appreciated!!:)
     

    Attached Files:

  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,257
    First Name:
    Colin
    It's working for me in Firefox just clicking on the 'come in' takes me to the page you want. If it doesn't for you try clearing your browser cache.

    Post your code in code tags not as attachments, some of us don't like downloading files from unknown people. ;)
     
  3. soulsister

    soulsister Thread Starter

    Joined:
    Feb 20, 2013
    Messages:
    49
    Thank-you for replying colinsp! (And letting me know about the attachments)

    I guess I wasn't clear. It's when testing at different screen resolutions (using online simulators) that the problem occurs. I've only included 2 examples here, from two different testers. At very wide resolutions the button is on top of the 'care-listen-heal' in the heart and at low ones, it appears half off-screen. I should tell you, all the text you see on the page, except for the button - is part of the background image. The button is the only thing on top of it.

    Example 1, it's offscreen at bottom: http://sweetsoulsister.deviantart.c.../ButtonJump-Examples1-355595200?_sid=7d31d8b9

    Example 2, it covers the text on heart:
    http://sweetsoulsister.deviantart.com/art/ButtonJump-Examples2-355595760?ga_submit_new=10%253A1361461676


    I guess this would be fine if your background picture didn't have things you couldn't cover up, but to use an enter button with this pic, it has to be in a certain relation to the image. I can do the bg so it doesn't stretch to cover the whole screen, and button will stay where I want it in relation to the background - but then I have image tiling at high resolutions and you have to scroll to see the button at low ones. Might just have to settle for that.

    But if it's a simple matter to make anywhere on the Splash screen clickable that would be give the appearance she wants.

    Thanks for your help! :)
     
  4. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,257
    First Name:
    Colin
    Have a look at this article then if you want the whole background clickable.
     
  5. soulsister

    soulsister Thread Starter

    Joined:
    Feb 20, 2013
    Messages:
    49
    Okay... as I was starting to suspect, it's not easy - and I don't want to change the template too much as the first time around I made many custom changes that took forever for me to learn and implement - then, when it was perfect, I discovered it was only perfect with my browser and operating system - makes you want to cry... Web designers must have nerves of steel. I wish I knew what I know now before attempting a full screen photo background that wasn't an abstract image.


    Is there a way to code the button (linked image) so that it will resize with, or in proportion to, the background image?... mostly cross-browser compatible?

    I suppose if that were simple, you would have suggested it, but have to ask...

    If you can't think of a way to get the button relatively positioned to the background I'll just go back to my tiling bg.

    I really appreciate your time btw. Thanks.
     
  6. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,331
    First Name:
    Jim
  7. soulsister

    soulsister Thread Starter

    Joined:
    Feb 20, 2013
    Messages:
    49
    Thanks for looking into it JiminSA

    Weebly is a 'drag and drop' site builder. If I put the button in using their method - I can't see the code for it. The code it allows you to edit is only the original template stuff. Not sure where the code for things you 'insert' via their editor is, but users can't access it.

    When my Splash Page background resizes for varying resolutions (via jquery), (whether I use their 'insert' method OR put the button in by editing the html and css file I have access to), it does not move 'with' the background so as to stay at the bottom of the heart in the background photo.

    This is what I've tried by putting the button in with code:

    In the Splash Page HTML file, directly below this
    Code:
    <div id="S-page"> 

    I've inserted this

    Code:
     
    <div id="ComeInButton"><a 
    href="[URL="http://newsiteforlisa.weebly.com/home.html%22%3E%3Cimg"]http://newsiteforlisa.weebly.com/home.html"><img[/URL] 
    src="/files/theme/ComeInButtonWhiteCircle.png"></a></div>
    
    And in the Main CSS file, in the splash page section, I inserted:

    Code:
     
    #ComeInButton {
    position: absolute;
    top: 90%;
    left: 35%;
    width:100%;
    height:100%;
    }
    
    The Result: The same. Please keep in mind - I just started reading about code 5 weeks ago...

    Is the html code not in the right place?
    Should I be using a different value than % in the CSS?

    Below, I'll put the code for both the Splash Page html and the Main CSS I have to work with and maybe you can help.

    Thank-you for your time!! :)


    Original Splash Page html file:

    Code:
     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
        <script type="text/javascript" src="[URL="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js%22%3E%3C/script"]https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script[/URL]>
        <script type="text/javascript" src="/files/theme/bgstretcher.js"></script>
        <script type="text/javascript" src="/files/theme/base.js"></script>
    </head>
    <body class='wsite-theme-light'>
    <div class="design"> <a href="[URL="http://divtagtemplates.com%22%3eweebly/"]http://divtagtemplates.com">Weebly[/URL] Templates Weebly Themes</a></div>
    <div id="S-bg"><img src="/files/theme/bg1.jpg" width="100%" height="100%"></div>
        <div id="S-page">
     
            <div id="S-content">
               {content}
            </div>
            <ul id="S-menu">
                {menu}
            </ul>
            <div class="S-footer" style="display:none;">{footer}</div>
        </div>
    <div style='display:none'>{title}</div>
    </body>
    </html>
    

    Appears it won't let me copy the whole CSS file.
    I was able to get the section about the Splash Page.

    Original Splash Page CSS:


    Code:
     
    /* -------------------------------------------------------------------------------/
    SPLASH PAGE AREA - ADD YOUR SPLASH PAGE CSS CODES BELOW
    / ------------------------------------------------------------------------------ */
    /* Splash Page Starts here */
    #S-page{
        width:940px;
        margin:0 auto;
        position:relative;
        font-family:Arial,Microsoft,sans-serif;
        padding:20px;
        z-index:2;
    }
     
    #S-menu{
        position:relative;
        padding:20px 0;
        overflow:hidden;
        display:none;
        margin: 0 auto;
        width: 980px;
    }
    #icontent #S-menu{
      display:block;
    }
    #S-menu li{
        float:left;
        text-align:center;
        padding:0 10px;
    }
    #S-menu li a{
        font-size: 14px;
        text-transform:uppercase;
        display:inline-block;
        color: #000; background-color: #fff;
    }
    #S-menu  li  a:hover,
    #S-menu li.selected a{
        color: #007f8a; background-color: #fff;
    }
    #S-content{
        color:#fff;
        background:none;
        padding:20px;
        min-height: 400px;
        height: auto;
        margin: 0 auto;
        width: 940px;
    }
    #S-bg{position:fixed; top:0; left:0; width:100%; height:100%}
    .S-footer {text-align: center; color: #fff; margin-top: 15px; font-size: 10px;}
    .S-bgstretcher {
     background: black;
     overflow: hidden;
     width: 100%;
     position: fixed !important;
     z-index: 1;
    }
    .S-bgstretcher, .S-bgstretcher UL, .S-bgstretcher UL LI {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
    }
    .S-bgstretcher UL, .S-bgstretcher UL LI {
     margin: 0;
     padding: 0;
     list-style: none;
    }
    #ComeInButton {
    position: absolute;
    top:90%;
    left:35%;
    width:100%;
    height:100%;
    }
    .design{
      font:11px Arial,sans-serif;  
      color:#979797;
      text-align: center;
      padding: 0;
      text-indent: -2400px;
      position: absolute;
    }
    
     
  8. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,331
    First Name:
    Jim
    Well now soulsister, the trick is to place your button within and absolute to, the background image thus...
    the html:
    HTML:
    <div id="S-bg">
     <img src="/files/theme/bg1.jpg" width="100%" height="100%">
     <div id="ComeInButton">
      <a href="http://newsiteforlisa.weebly.com/home.html"><img src="/files/theme/ComeInButtonWhiteCircle.png"></a>
     </div>
    </div>
    
    and the css:
    HTML:
    #S-bg{position:relative; top:0; left:0; width:100%; height:100%}
    #ComeInButton {
    position: absolute;
    top:90%;
    left:35%;
    width:100%;
    height:100%;
    }
    
    Then, whatever happens to the background via the javascript resize, should also happen to the button, but let's see;)
     
  9. soulsister

    soulsister Thread Starter

    Joined:
    Feb 20, 2013
    Messages:
    49
    Thank-you Jim. It's nice to get such a detailed answer.

    I copied and pasted the code you supplied and now the button doesn't show at all. (Thanks for showing where to put it btw). I'm guessing the problem is with putting the 'button div' inside the 'background div'? :confused:
     
  10. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,331
    First Name:
    Jim
    That's curious:confused: It definitely should show. Just check that the src= actually points to a valid filename. You should at least have a blank box showing if it isn't.
    Can you post the relevant html and css as did I in my last thread, please?
     
  11. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,257
    First Name:
    Colin
    z-index?
     
  12. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,331
    First Name:
    Jim
    Yes Colin, organizing z-index on the 2 images would assure it's being rendered, but I'm curious to see why it's not rendering in the current code;)
     
  13. soulsister

    soulsister Thread Starter

    Joined:
    Feb 20, 2013
    Messages:
    49
    I posted a little above and a little below so you could see where it is in the whole file. The original whole files (html and css) are both above. Also, I started with the % numbers I had before, but thought the button might now be too low and so changed them - but that's the only change I made. The .S-bgstretcher in the css does have a z-index of 1 if that might be it?

    PS. I should mention, Weebly has an 'editing view' of the page so you can drag and drop. The button does show there - just not after 'publishing' on the actual page. (Didn't say so before, because the editing view often shows things misaligned or things that don't publish.)

    Here is the CSS:

    Code:
     
    #S-content{
        color:#fff;
        background:none;
        padding:20px;
        min-height: 400px;
        height: auto;
        margin: 0 auto;
        width: 940px;
    }
    #S-bg{position:relative; top:0; left:0; width:100%; height:100%}
    #ComeInButton {
    position: absolute;
    top:55%;
    left:40%;
    width:100%;
    height:100%;
    }
    .S-footer {text-align: center; color: #fff; margin-top: 15px; font-size: 10px;}
    .S-bgstretcher {
     background: black;
     overflow: hidden;
     width: 100%;
     position: fixed !important;
     z-index: 1;
    }
    .S-bgstretcher, .S-bgstretcher UL, .S-bgstretcher UL LI {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
    }
     
    
    and here is the the HTML:

    Code:
     
     
    <body class='wsite-theme-light'> 
    <div class="design"></div>
    <div id="S-bg">
     <img src="/files/theme/bg1.jpg" width="100%" height="100%">
     <div id="ComeInButton">
      <a href="[URL="http://newsiteforlisa.weebly.com/home.html%22%3E%3Cimg"]http://newsiteforlisa.weebly.com/home.html"><img[/URL] src="/files/theme/ComeInButtonWhiteCircle.png"></a>
     </div>
    </div> 
     <div id="S-page">
       <div id="S-content">
               {content}
            </div>
    
    
    Thanks for your time guys! :)
     
  14. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,331
    First Name:
    Jim
    Correct soulsister! If you change the current z-index to -1 it should show your overlay image...
     
  15. soulsister

    soulsister Thread Starter

    Joined:
    Feb 20, 2013
    Messages:
    49
    Thanks Jim :)

    Well, I went ahead and tried adding a z-index of 5 to the button css before I saw your post. Will post code below.

    Button is now positioned in the same place relative to the background at all screen resolutions AND in various OS/Browser configurations!!! :D(y) You guys are geniuses! In older versions of IE (6,7) it didn't show at all, but I have decided not to concern myself with anything older than IE8.

    However now there are two new issues. One may be because I didn't lower the background z-index but rather increased the button one... Problem is, I only have a 1/2hr left on my free trial at crossbrowsertesting.com so I can't test every change I make....

    Issue One:

    Testing a cross section of Windows OS/Firefox/IE/Chrome versions I get this problem 50% of the time. The background image is full size, overlapping another duplicate image of itself. Scroll bars appear to go down and see the bottom of the underlying duplicate. You can see the affect here: http://sweetsoulsister.deviantart.c...24x768-full-356159281?ga_submit_new=10%3A1361

    Possible Reason?: Before I had the splash page I had given the whole site a body background image that 1440 wide x1600 long. The background of the template does not query and resize. The Splash Page was an addition to the original template. All the other page files still use that long image, and I was told it was ok to use a different one for the splash page. (I made a 'smoothly merged, long' version of the bg image because the rest of the site's pages expand to fit content and at higher resolutions you see the bg image tile. This way, you only had to see the ugly tiling horizontally, not vertically as well.)

    The Splash Page bg image size is only 1400x900. When the Splash was "fixed", it tested to fill the screen once, with no scroll bars, all the time. But now that it's "relative", I'mwondering if by using a long body background for the other pages on the site, it's repeating to fill that extra length? Or is it more likely that I need to decrease the z-index on the Splash Page bg (rather than increase the button) as you specified?

    Do I need to make the body background for the rest of the site the same size and test that or do you think I can just change the z-index and test that? Or change something else altogether?

    I would just test both, I've limited time for cross-browser testing (screen resolution testing I can do as much as I like)

    Issue Two:

    The button looks too big at lower resolutions and too small at higher as it's not resizing with the background, only re-positioning. I'm so happy it's in the right place though! I can't figure out if I should put the height and width of the button to 'auto' or try playing with " % " value numbers until I get the right ones.... (It also makes it appear un-centered when the size does not change.) This I can do by trial and error... but you might know right off the bat...

    So thank-you so much for this help. You wouldn't believe all the things I tried before and I'm grateful to have the thing finally positioned right - all the time!!!

    Current CSS:

    Code:
     
    #S-bg{position:relative; top:0; left:0; width:100%; height:100%}
    #ComeInButton {
    position: absolute;
    top:60%;
    left:40%;
    width:100%;
    height:100%;
    z-index:5;
    }
    
    The HTML is the same as before.
     
  16. 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/1090378

  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