Сделать изображения статичными на всех разрешениях экрана и окнах браузера

Question

             <header>
        <div id="logo_box" style="-webkit-border-radius: 0px;border-radius:0px;padding:33px;">
            <h1><a href="index.html" id="logo"><img src="images/Logo_black_blue.png"/><span></span></a></h1>
        </div>
        <nav style="z-index:100;margin-top: -50px;float: right;">
            <ul id="menu">
            <li></li>
                        </ul>
        </nav>
                      <div class="wrapper">
                                        <div class="text1" style="margin-left: 130px;padding: 59px 0 0 47px;">
         Ingen løpende timehonorar...</div><br><br> 
                     <p style="color:#007EAD;margin-left:230px;font-size:22px" >
         ...kun provisjon basert på <b style="font-weight:bold;">resultatet</b> vi skaper for kunden </p>

             </div> 
                </header>

CSS

      #page1 .body3 {background:url(../images/Sty.png) center top no-repeat;position:absolute;height:415px;width:373px;top:162px;left:50%;margin-left:187px;z-index:10}


header {width:100%;padding-bottom:186px;}
.ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
#logo_box {background:#000;padding:38px 0 22px 0px;border-radius:18px;-moz-border-radius:18px;-webkit-border-radius:18px;box-shadow:0 1px 3px #b7b7b7;-moz-box-shadow:0 1px 3px #b7b7b7;-webkit-box-shadow:0 1px 3px #b7b7b7;behavior:url(js/PIE.htc);z-index:2;margin-top: -10px;width:100%;}
#logo {color:#fff;text-decoration:none;height: 150p;z-index: 10000;}
#logo span {font-size:17px;color:#a6a6a6;vertical-align:baseline}
header nav {height: 7px;border-radius:18px;-moz-border-radius:18px;-webkit-border-radius:18px;behavior:url(js/PIE.htc);top:52px;z-index:1;padding-left:10px;}
  #menu {width: 940px;}
   #menu li {float: left;padding-left: 16px;background:url(../images/menu_line.gif) right 18px no-repeat;padding-right: 17px;}
    #menu .bg_none {background:none;padding-right:0;margin-right:0}
     #menu li a {display:block;font-size:17px;color: #fff;text-decoration:none;line-height:47px}
      #menu li a:hover, #menu #menu_active a {color: #1D8BCE;}
  .text1 {font-size:36px;color:#545454;padding: 89px 0 0 47px;line-height:48px;letter-spacing:-2px}
    .text2 {font-size:26px;line-height:36px;color:#1d8bce;padding:0 0 0 130px}
     #icons {font-size:20px;line-height:22px;color:#515151;padding:0 0 0 531px;letter-spacing:-1px;margin-top:-10px;height:22px;overflow:hidden}

необходимо сделать изображение логотипа и изображение Sty.png статичным, чтобы они не сдвигали свои позиции при изменении размера окна или разрешения экрана. Проблемная страница веб-URL ссылка

попытался использовать поле left-left, но он оставляет много разрыва между текстом и изображением, так как я могу решить эту проблему.

Answer 1

Вы пробовали положение: исправлено? Похоже, это то, что вы хотели бы держать что-то всегда в одном месте:

http://www.galaxywebsitedesign.com/blog/css-position-explained.html

Answer 2

Почему вы поместили логотип и ссылку div в тег <h1>?Если размер шрифта и так увеличен, это изменяет размер этого элемента и, следовательно, положение логотипа.

Если я хочу логотип с фиксированной позицией, который, при нажатии, перейдет на страницу, затемЯ обычно использую:

<style>
  #logo {
    position: absolute;
    background-image: url('images/logo_black_blue.png');
    height: whateverpx;
    width: whateverpx;
    left: whereeverpx;
    top: whereverpx;
    cursor: pointer;
  }
</style>
<div id="logo" onClick="location.href='index.html'" />