# Newbie Needs Help - Link the Body Background Image?



## soulsister (Feb 20, 2013)

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...



You can see the Splash testing Page here: http://newsiteforlisa.weebly.com/

I want to create a link to: http://newsiteforlisa.weebly.com/home.html 

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

Hope someone can help. Much appreciated!!


----------



## colinsp (Sep 5, 2007)

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.


----------



## soulsister (Feb 20, 2013)

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!


----------



## colinsp (Sep 5, 2007)

Have a look at this article then if you want the whole background clickable.


----------



## soulsister (Feb 20, 2013)

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.


----------



## JiminSA (Dec 15, 2011)

Have you looked into absolute and relative positioning? or am I missing the boat here?


----------



## soulsister (Feb 20, 2013)

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

```
<div id="S-page">
```
I've inserted this


```
<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:


```
#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:


```
<!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:


```
/* -------------------------------------------------------------------------------/
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;
}
```


----------



## JiminSA (Dec 15, 2011)

Well now soulsister, the trick is to place your button within and absolute to, the background image thus...
the html:

```
[IMG]http://xflive.techguy.org/files/theme/bg1.jpg[/IMG]

  [URL=http://newsiteforlisa.weebly.com/home.html][IMG]http://xflive.techguy.org/files/theme/ComeInButtonWhiteCircle.png[/IMG][/URL]
```
and the css:

```
#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


----------



## soulsister (Feb 20, 2013)

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'?


----------



## JiminSA (Dec 15, 2011)

That's curious 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?


----------



## colinsp (Sep 5, 2007)

z-index?


----------



## JiminSA (Dec 15, 2011)

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


----------



## soulsister (Feb 20, 2013)

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:


```
#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:


```
<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!


----------



## JiminSA (Dec 15, 2011)

Correct soulsister! If you change the current z-index to -1 it should show your overlay image...


----------



## soulsister (Feb 20, 2013)

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!!! :up: 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:


```
#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.


----------



## JiminSA (Dec 15, 2011)

It's your javascript (bgstretcher.js) that's doing the re-sizing and only for the background image not the button as well. I have no great js experience but it may be worth looking at the js script to see if it can handle the button as well - could you copy and paste it? - Nothing ventured nothing gained...


----------



## JiminSA (Dec 15, 2011)

P.S. As regards the tiling - play with overflow:hidden to stop it happening...


----------



## JiminSA (Dec 15, 2011)

Scrub that last thought - background-repeat:no-repeat; is a better solution...


----------



## soulsister (Feb 20, 2013)

Okay, will try the no repeat. ( Do I put that right inside the curvy brackets which already contain the height and width values for S-background?) And what do you call the curvy brackets? 

There are 2 java script files that came with the Splash Page template, I've posted them both. I was a little leery changing the #S-bg position to relative because I've no clue how to understand how it affects the below... Thanks for taking a look 

1) js base:


```
/*
Common javascript functions
Author: Artem Timryakov
Copyright: 2011, Artem Timryakov. All rights resevered
-----------------------------------------------------------------------*/
 
jQuery(document).ready(function(){
    jQuery(document).bgStretcher({
        images: ['/files/theme/bg1.jpg'],
        imageWidth: 1400,
        imageHeight: 900
    });
    jQuery(document).slider({
        slideShow: true
    });
});
(function($){
 /*  Variables  */
 var container = null;
 var allLIs = '', containerStr = '', direction = '';
 var element = this;
 var _sliderPause = false;
 var _sliderTm = null;
 var isScrolling = false;
 $.fn.slider = function(settings){
  settings = $.extend({}, $.fn.slider.defaults, settings);
  $.fn.slider.settings = settings;
        direction = settings.direction;
  function _build(){
            containerStr = '.' + settings.imageContainer;
   container = $(containerStr);
            allLIs = '.' + settings.imageContainer + ' li';
   if(!allLIs.length){ return; }
   $(allLIs).hide();
   $(allLIs + ':first').show().addClass('S-cur');
   if(!container.length){ return; }
 
            $(".S-prev-slide").live("click",
                    function(){$.fn.slider.slideShow('prev')});
            $(".S-next-slide").live("click",
                    function(){$.fn.slider.slideShow('next')});
            $(".S-pause-slide").live("click",
                    function(){$.fn.slider.pause()});
            $(".S-play-slide").live("click",
                    function(){$.fn.slider.play()});
   if(settings.slideShow && $(allLIs).length > 1){
    _sliderTm = setTimeout(function(){$.fn.slider.slideShow(direction)}, settings.nextSlideDelay);
   }
  };
 
  /*  Start slider  */
  _build();
 };
 $.fn.slider.play = function(){
       _sliderPause = false;
       $.fn.slider._clearTimeout();
       $.fn.slider.slideShow(direction);
 };
 $.fn.slider._clearTimeout = function(){
       if(_sliderTm != null){
           clearTimeout(_sliderTm);
           _sliderTm = null;
       }
 };
 $.fn.slider.pause = function(){
    _sliderPause = true;
    $.fn.slider._clearTimeout();
 };
 $.fn.slider.slideShow = function(direction){
  var current = $(containerStr + ' li.S-cur');
        if(direction=='next')
        {
            direction = 'next';
            if(isScrolling){
                return;
            }
            isScrolling = true;
            var next = current.next();
            if(!next.length){
                next = $(containerStr + ' li:first');
            }
            var margST = '';
            margST = 450 * parseInt(next.index()) * (-1);
            next.addClass('S-cur').css('left','830px');
            current.animate({ 'left': "-=" + '830' + 'px' }, 1000, function()
            {
                $(this).hide();
                $(this).css('left','0');
                isScrolling = false;
            });
            next.animate({ 'left': "-=" + '830' + 'px' }, 1000, function()
            {
                isScrolling = false;
                current.removeClass('S-cur');
            });
            $('.S-slider-text ul').animate({ 'top': + margST + 'px' }, 1000);
        }
        else
        {
            direction = 'prev';
            if(isScrolling){
                return;
            }
            isScrolling = true;
            var prev = current.prev();
            if(!prev.length){
                prev = $(containerStr + ' li:last');
            }
            var margST = '';
            margST = 450 * parseInt(prev.index()) * (-1);
            prev.addClass('S-cur').css('left','-830px');
            current.animate({ 'left': "+=" + '830' + 'px' }, 1000, function()
            {
                $(this).hide();
                $(this).css('left','0');
                isScrolling = false;
            });
            prev.animate({ 'left': "+=" + '830' + 'px' }, 1000, function()
            {
                isScrolling = false;
                current.removeClass('S-cur');
            });
            $('.S-slider-text ul').animate({ 'top': + margST + 'px' }, 1000);
        }
 
  if(!_sliderPause && $.fn.slider.settings.slideShow){
          $.fn.slider._clearTimeout();
    _sliderTm = setTimeout(function(){$.fn.slider.slideShow(direction)}, $.fn.slider.settings.nextSlideDelay);
  }
 };
 /*  Default Settings  */
 $.fn.slider.defaults = {
  imageContainer:             'S-slider',
  nextSlideDelay:             5000,
  slideShow:                  false,
        direction:                  'next'
 };
 $.fn.slider.settings = {};
})(jQuery);
```
2.) js bgstretcher


```
/*
 Background Stretcher jQuery Plugin
 © 2009 ajaxBlender.com
 For any questions please visit [URL="http://www.ajaxblender.com/"]www.ajaxblender.com[/URL] 
 or email us at [EMAIL="[email protected]"][email protected][/EMAIL]
 
 Version: 1.2
*/
;(function($){
 /*  Variables  */
 var container = null;
 var allImgs = '', allLIs = '', containerStr = '';
 
 var element = this;
 var _bgStretcherPause = false;
 var _bgStretcherTm = null;
 
 $.fn.bgStretcher = function(settings){
  settings = $.extend({}, $.fn.bgStretcher.defaults, 
settings);
  $.fn.bgStretcher.settings = settings;
 
  function _build(){
   if(!settings.images.length){ return; }
 
   _genHtml();
 
   containerStr = '#' + settings.imageContainer;
   container = $(containerStr);
   allImgs = '#' + settings.imageContainer + ' IMG';
   allLIs = '#' + settings.imageContainer + ' LI';
 
   $(allLIs).hide();
   $(allLIs + 
':first').show().addClass('bgs-current');
 
   if(!container.length){ return; }
   $(window).resize(_resize);
 
   if(settings.slideShow && $(allImgs).length > 1){
    _bgStretcherTm = 
setTimeout('$.fn.bgStretcher.slideShow()', settings.nextSlideDelay);
   }
   _resize();
  };
 
  function _resize(){
   var winW = $(window).width();
   var winH = $(window).height();
   var imgW = 0, imgH = 0;
   // Update container's height
   container.width(winW);
   container.height(winH);
 
   // Non-proportional resize
   if(!settings.resizeProportionally){
    imgW = winW;
    imgH = winH;
   } else {
    var initW = settings.imageWidth, initH = 
settings.imageHeight;
    var ratio = initH / initW;
 
    imgW = winW;
    imgH = winW * ratio;
 
    if(imgH < winH){
     imgH = winH;
     imgW = imgH / ratio;
    }
   }
 
   // Apply new size for images
   if(!settings.resizeAnimate){
    $(allImgs).width(imgW).height(imgH);
   } else {
    $(allImgs).animate({width: imgW, height: 
imgH}, 'normal');
   }
  };
 
  function _genHtml(){
   var code = '<div id="' + settings.imageContainer 
+ '" class="S-bgstretcher"><ul>';
   for(i = 0; i < settings.images.length; i++){
    code += '<li><img src="' + 
settings.images[i] + '" alt="" /></li>';
   }
   code += '</ul></div>';
   $(code).appendTo('body');
  };
 
  /*  Start bgStretcher  */
  _build();
 };
 
 $.fn.bgStretcher.play = function(){
       _bgStretcherPause = false;
       $.fn.bgStretcher._clearTimeout();
       $.fn.bgStretcher.slideShow();
 
 };
 
 $.fn.bgStretcher._clearTimeout = function(){
       if(_bgStretcherTm != null){
           clearTimeout(_bgStretcherTm);
           _bgStretcherTm = null;
       }
 };
 
 $.fn.bgStretcher.pause = function(){
    _bgStretcherPause = true;
    $.fn.bgStretcher._clearTimeout();
 };
 
 $.fn.bgStretcher.slideShow = function(){
  var current = $(containerStr + ' LI.bgs-current');
  var next = current.next();
  if(!next.length){
   next = $(containerStr + ' LI:first');
  }
 
  $(containerStr + ' LI').removeClass('bgs-current');
  next.addClass('bgs-current');
 
  next.fadeIn( $.fn.bgStretcher.settings.slideShowSpeed );
  current.fadeOut( $.fn.bgStretcher.settings.slideShowSpeed 
);
 
  if(!_bgStretcherPause){
          $.fn.bgStretcher._clearTimeout(); 
    _bgStretcherTm = 
setTimeout(function(){$.fn.bgStretcher.slideShow()}, 
$.fn.bgStretcher.settings.nextSlideDelay);
  }
 };
 
 /*  Default Settings  */
 $.fn.bgStretcher.defaults = {
  imageContainer:             'S-bgstretcher',
  resizeProportionally:       true,
  resizeAnimate:              false,
  images:                     [],
  imageWidth:                 1024,
  imageHeight:                768,
  nextSlideDelay:             10000,
  slideShowSpeed:             'normal',
  slideShow:                  true
 };
 $.fn.bgStretcher.settings = {};
})(jQuery);
```


----------



## soulsister (Feb 20, 2013)

Jim... I checked cross-browser at different resolutions again and noticed something.

I was looking at screen shots. They have 2 settings for those: Full Page and Windowed

In Full Page you see duplicate background images. But I discovered a "live test" function.

There was only time to "live test" 2 configurations of OS/Browser but in both - the scroll bars only moved the button and the first background image remained fixed and perfectly filled the screen. That is, *you could not scroll down to see the duplicate image at all*. And this is what happens in my OS/Browser combination as well. The trial ran out as I was testing more. This is with your addition of background-repeat: no repeat.

Do you think this could be what happens on all the ones that show duplicate images in Full Page mode? Because they all show just the 1 background in Windowed Mode. Maybe I don't need to worry about what showed in Full Page mode because you can't scroll the picture at all- it's fixed. Maybe you could test it on your pc with your browser/os combination and see... ?

http://newsiteforlisa.weebly.com

(I can find free cross browser screenshots, but not live testing, which is what I need to confirm this theory)

Button size will have to wait until tomorrow. If it cant' be adjusted, it will be ok.

Thanks for helping so much, and on a Sunday too, when you could be out hunting tigers and riding elephants...


----------



## JiminSA (Dec 15, 2011)

On my 21-inch screen the bg image renders as 1583px x 1017.64px with a scroll which only scrolls the content i.e. the ComeInButton. In order to drop this unnecessary scroll we could put overflow:hidden; between the curly brackets {or curly braces} of .S-bgstretcher
Regarding the re-sizing of the button using javascript, it's a no-go as the bgstretcher.js only caters for the background image and is not designed to handle the content therein - see this link
However we should be able to cope using css on the image to make it auto re-size according to the screen resolution.
Just try the following css on the button...

```
#ComeInButton {
position: absolute;
top:90%;
left:35%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
```
 and let's see what happens


----------



## JiminSA (Dec 15, 2011)

Incidentally you have a black rectangle at the base of the background picture (which I downloaded). I cropped this out of my downloaded version, which makes it easier on the eye when rendered and reduces the image to 823px in height, which you could reflect in the javascript base.js viz:

```
jQuery(document).ready(function(){
    jQuery(document).bgStretcher({
        images: ['/files/theme/bg1.jpg'],
        imageWidth: 1400,
        imageHeight: 823
    });
    jQuery(document).slider({
        slideShow: true
    });
});
```
though, it *seems* to make no difference if you don't, it does because it doesn't elongate 823 up to 900, but renders the true(new) size of 823px. Visually a small difference, but a precise one...


----------



## JiminSA (Dec 15, 2011)

FYI these people give a free unlimited resolution testing (unfortunately not cross-browser too)


----------



## soulsister (Feb 20, 2013)

Hi Jim,

Thanks again. That link to the bg-stretcher plugin page was very interesting. (Got me thinking I should test it for use with all the other pages on the site, if there is time.)

*1)* Well, the button does not resize with that adjustment. It seems to be appearing exactly as before. Positioned right, but too big at low resolution and too small at higher.

*2)* On a hunch, I changed the '#S-bg position: relative' back to "fixed". And the button remains in the right place at all resolutions at 3 different testing sites.

(When you wrote the html code properly for me, putting the button div inside the bg div, I think you made the bg a 'parent' to the button. W3 says: " An *absolute position* element is positioned relative to the first parent element that has a position other than static." Thus... just using 'absolute' as the positioning _type_ in the button CSS automatically makes it relative to the (parent) background. No need to change the background itself to a relative position. I think.... )

Changing it back it gets rid of the duplicate background overlay issue in Weebly 'editing mode.' So, I'm hoping, that it also fixes the way it was displaying cross browser half the time, (in that one view option.) Besides, no reason to change it if we don't have to. Please do correct me if I'm wrong!

*3)* The .S-bgstretcher CSS already contains 'overflow hidden' . The scrolling button might be nice to fix but I'm more concerned with having it resize.

*4)* Thank-you for the tip on the black rectangle. I put it in the image myself actually. The bg stretcher was distorting the heart no matter how I cropped/resized the picture. When I have time to digitally 'paint in' a realistic extension to the photo, it will fill that space and appear full screen - without distorting the heart. (Just takes time to make it look real.)


( Btw.. The woman whom I'm doing this for finally saw what has been done and she is absolutely delighted!! (At her resolution the button size is perfect). All your help is appreciated!  )

Going to post the parts of code we changed from the original, as they are right now, below for easy reference. Maybe you'll have another idea. And then go off to look for button resizing in proportion to the background solutions....

Edited HTML Portion:


```
<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>
```
Edited CSS Portion:


```
#S-bg{position: fixed; top:0; left:0; width:100%; height:100% background-repeat: no repeat; }
#ComeInButton {
position: absolute;
top:60%;
left:40%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
z-index:5;
}
```


----------



## JiminSA (Dec 15, 2011)

Sorry soulsister, my bad - I omitted one important aspect with the individual image resize construct...
we must specify a max size for it's holding div thus:

```
[IMG]bg1.jpg[/IMG]

		[URL=http://newsiteforlisa.weebly.com/home.html][IMG]ComeInButtonWhiteCircle.png[/IMG][/URL]
```
This will render an image at exactly 194px, and scale down as the viewable browser window gets smaller and smaller. 
So as the actual width of the uploaded image is 194px the image would be rendered as such at the maximum resolution and automatically down-sized, with this css as the resolutions get smaller - at least that is the theory


----------



## soulsister (Feb 20, 2013)

Hi there,

It still doesn't resize. (I'm using IE 8, could that have something to do with what I'm seeing when using online screen resolution testers?)

I noticed that in the "#S-bg line", I had no semi-colon following, "height:100%". Thinking I'd accidentally deleted it, I put in the semi-colon. The _button stops positioning correctly when there is a semi-colon after "height:100%" ._ It goes back to positioning right if I remove it.
(Wouldn't there have been a semi-colon there in the original code? I checked the copy I made of the original and it's not there, but maybe I made a mistake...)

Not sure what could be relevant...

Code as it is now:

CSS:


```
#S-bg{position:fixed; top:0; left:0; width:100%; height:100% background-repeat:no-repeat;}
#ComeInButton {
position: absolute;
top:60%;
left:40%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
z-index:5;
}
```
HTML:


```
<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" style="max-width:194px;">
  <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">
```


----------



## JiminSA (Dec 15, 2011)

I remember reading in a blog somewhere that the line

```
width: auto\9; /* ie8 */
```
should read

```
width: auto/9; /* ie8 */
```
i.e. forward slash not backward - that will certainly be worth a test out...

Regarding the semi-colon... things seem better without it don't they
I found this relevant snippet, which kinda explains things.
So as the old adage goes


> "If it ain't broken, don't try fix it..."


----------



## JiminSA (Dec 15, 2011)

Could you use either FF or chrome to test as well as IE? This, because IE is notorious for creating anomalies, which Bill in his wisdom doesn't tell me about... That way we might only have to concentrate on IE...


----------



## soulsister (Feb 20, 2013)

I will test it at work tomorrow on Firefox and Chrome.

My regular pc is unusable (locked out because of a registry issue - it does not respond to input from any device and so cannot click the login button - a completely different issue.)

This one has only 500 RAM. Amazed I'm doing what I am on it. I will install Firefox 10, tomorrow night so I can test with both at home. That seems to be the highest I can go with my current RAM.

Because I did preliminary research, am doing a lot of custom graphics, am teaching her to use Weebly and how Blogs work - as well as setting up the site - she's paying me enough to get a new machine (There IS a God and praise him mightily!)

*In any case, stats show IE is still the most commonly used Browser, with Firefox and Chrome coming to a tie for second near the end of 2012. So whatever I do needs to work with IE - albeit, maybe not as old a version as 8.*

The semi-colon thing: Since I've added "background-repeat: no repeat" to the line in question, the height is no longer the last descriptor. According to your article, it should then have a semicolon to separate it.... However, it seems to work best without it 

Will see if it resizes, with code as is, with a different browser...
Thanks for the guidance!


----------



## JiminSA (Dec 15, 2011)

Cool soulsister! ... and yes, God is mighty to be praised!


----------



## soulsister (Feb 20, 2013)

Hey Jim,

With the current changes we've made to have the button resize with the background, the button is not showing _at all_ on Google Chrome (v25.0.1364.97m)

It shows in Firefox v19 and IE9.0.13 but does not resize. I've tried it with the forward slash change in IE8 and no luck. Will try it with the forward slash change in other browsers at work on Monday as I can do Chrome there as well.

Sigh... Don't feel bad if you can't come up with something. You fixed the crucial thing, the position, which makes sure the button is accessible at all resolutions (when I put the code back to what it was). I'm very grateful for that! 

The people that sell the template for the splash page show examples of it, all with the Enter Site button placed neatly in the center and sized appropriately to show well against the background photo. In their own main demo, if their Enter Button were to end up on top of different parts of the background, (because bg resizes and button does not), their own button would not show up against it. When I wrote them about applying the java resize to the button as well (they offer great support) they said "we do not use jquery" and "the template is functioning as intended". So thanks for balancing my faith in human nature by helping 

I will just have to tell her I couldn't fix it and accept a ding in pay if necessary. Almost decided to buy a month of cross-browser testing so I'll feel good about everything else working, or at least advise her of the bugs, before I hand it over. (I've tried different things myself to resize it, and nothing I found worked.)

Was going to start teaching myself at from the beginning (better place to start  ) when this was finished, at W3 - but seeing how many browser/OS version combinations you need to consider is mind boggling. So not sure now.

Assuming you checked the code to see I changed it correctly?

Thank-you, thank-you, thank-you.


```
S-bg{position:fixed; top:0; left:0; width:100%; height:100% background-repeat:no-repeat;}
#ComeInButton {
position: absolute;
top:60%;
left:40%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
z-index:5;
}
```


```
<div id="S-bg">
 <img src="/files/theme/bg1.jpg" width="100%" height="100%">
 <div id="ComeInButton" style="max-width:194px;">
  <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>
```


----------



## JiminSA (Dec 15, 2011)

Well soulsister I have not yet given up (and thank you for thinking of my feelings)

I have contacted the developers of the javascript (ajaxblender.com) asking them for help. 
So let's see what sort of response we may receive...


----------



## JiminSA (Dec 15, 2011)

Failing that as a solution, perhaps we should incorporate the 'come in' circle into the background image and h-reference it using an image map - this is a brief overview of what I mean


----------



## JiminSA (Dec 15, 2011)

I've done a mock-up here, which is currently set to provide the link, when the user hovers in the heart area, but you can refine that... here's the html...

```
[IMG alt="BG"]bg1.jpg[/IMG]
```


----------



## soulsister (Feb 20, 2013)

Thanks Jim! 

I've been working on other things for a couple of days and for some reason, did not get an email about your last two posts...

An image map had occurred to me, but I thought it would be too difficult given the java resizing, etc.

I see you certainly live by your signature 

Will give this a try. However, if it works, I'll need to test it cross browser...

(Btw - am rushing through the rest of the page, leaving better design until later, need to begin SEO... a whole new arena...)

Very kind of you to help this much, thank-you.


----------



## JiminSA (Dec 15, 2011)

There is is/was a move to make image map possible using percentages (cross-browser) but don't know what progress if any was made (it'd be great if it was done). 
I'm gonna look for js that will "percentify" image map on resize...
Take a look at this re SEO - I just did it for a client and it works nicely!


----------



## JiminSA (Dec 15, 2011)

BTW the reason you never got emails re my other replies could be because of this proviso at the bottom of every reply...


> There may also be other replies, but you will not receive any more notifications until you visit the forum again.


----------



## soulsister (Feb 20, 2013)

Well, I'm not sure why this worked in your demo, but does not work (image with button merged into it has no clickability) in Firefox or IE on my page. Could we need to add a z-index of greater than (1), (that of the bg-stretcher)? If so, not sure how to modify the html so that we can style the image map _only_ in CSS.

Please check there is not an error in the way I've placed it in the HTML or in the CSS. (there is a little code above/below for context) Thank-you!!!


```
#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;
}
```


```
<div id="S-bg">
 <img src="/files/theme/bg1.jpg" width="100%" height="100%" alt="BG" usemap="#bgmap">
 <map name="bgmap">
   <area shape="rect" coords="400,100,1200,850" href="[URL]http://newsiteforlisa.weebly.com/home.html[/URL]" title="Click to enter the site" alt="comein">
 </map>
</div> 
 <div id="S-page">
   <div id="S-content">
```


----------



## JiminSA (Dec 15, 2011)

That's quite weird
I'm thinking that it's got something to do with the theme set-up... Could you post a link to the online site which is not showing the map link?


----------



## soulsister (Feb 20, 2013)

I know, weird. Hopefully this helps...

Splash page, which you can't enter, *here*.

If you want to get to navigable pages, here is the *home page*.

I see various things on image mapping, but they are for different purposes... have seen people putting a z-index on the map though... and since the button didn't show without a z-index... can we try that? Just not sure how to give the map an an id of it's own...

Anyhow, thank-you for checking it out


----------



## JiminSA (Dec 15, 2011)

You are absolutely correct about z-index affecting the usemap (well done). A solution would be to block the z-index for the splash page and the best way to do this is to take out the stylesheet main_style.css by commenting it out of the head section - this line

```

```
 This weebly stylesheet was not in my demo and is not necessary in your splash page as it is so minimal... I am reasonabley confident that the js to resize will not be affected - afaik it is independent of the css.


----------



## JiminSA (Dec 15, 2011)

Just thinking about my previous suggestion and it's not a good one - my bad Let's rather just stick the z-index of 5, currently in the stylesheet, into the bg image styling "inline". This way we directly associate the map coding with the z-index and hopefully get it to work

amended html...

```
[IMG alt="BG"]bg1.jpg[/IMG]
```


----------



## soulsister (Feb 20, 2013)

Hi Jim,

I tried your code and it did not work, no linking. After trying variations on it I went a different way and and made an invisible box link. (Pieced together from various things I found.) The Splash Page now links to the home page in IE, Firefox and Chrome. ( When I just had the background transparent, it wouldn't work in IE, so I added a background image to both the box and the box-link, which is a transparent .png, and then IE was fine.

The size of the box is (most likely) fine to accommodate the main bg image resizing for different resolutions. If not, I can change it.

The only problem I see is that in IE, once you click within the box and use the link, a thin gray line outlines the huge box.

1) Do you foresee any big problems with this method?
2) Do you know of a CSS hack, or how to write a conditional statement for all IE versions that would get rid of the gray outline? Seems a lot people try to.

and 3)

Am I allowed to buy you a case of beer for all your trouble?  This is the best help I've ever gotten in a forum! Thank-you.

The existing code is below:


```
<div id="S-bg"><img src="/files/theme/bg1.jpg" width="100%" height="100%"></div>
      <div class="box1">
  <a id="box-link" href="[URL="http://newsiteforlisa.weebly.com/home.html%22%3E%3C/a"][COLOR=#0000ff]http://newsiteforlisa.weebly.com/home.html"></a[/COLOR][/URL]>
  </div>
```


```
#S-bg{position:fixed; top:0; left:0; width:100%; height:100%}
.box1 {position: absolute; 
  top: 100px; 
  left: 100px; 
  width: 1200px; 
  height: 900px; 
  background: transparent url(5x5png.png) no-repeat;
  z-index:5;
  overflow:hidden;}
#box-link { 
  position: absolute; 
  top: 100px; 
  left: 100px; 
  width: 1200px; 
  height: 900px; 
     background: transparent url(5x5png.png) no-repeat;
  text-decoration: none; 
  z-index:5;
  overflow:hidden;}
```


----------



## JiminSA (Dec 15, 2011)

Ha-Ha No booze thanks - I've been tee-total 13 years! I'm just so pleased that YOU have solved the problem :up:
I'll take a look at the remaining thin grey line issue, but I don't expect Bill will change his protocol on our behalf


----------



## JiminSA (Dec 15, 2011)

The following change to your html will get rid of that annoying grey border around your link area in IE...

```
[URL=http://newsiteforlisa.weebly.com/home.html][/URL]
```


----------



## soulsister (Feb 20, 2013)

Thank-you Jim,

Have been so busy and my 'client' wants me to focus on seo and crossbrowser testing to get site finished, as opposed to the look of it, so will try implementing that later.

Just wanted to say I so much appreciate all your help and I plan to send a small donation to Tech Support Guy 'in your name'.

You've been a fantastic help! :up:


----------



## JiminSA (Dec 15, 2011)

My pleasure soulsister and we all thank you for the small donation...


----------

