[CSS] Pozycjonowanie obrazka w różnych rozdzielczościach

[dawidt]

Witajcie już w Nowym, 2010 roku :-)

Mam pewien problem. Nie potrafię osadzić pliku obrazka (zdefiniowany jako tło) tak aby był poprawnie wyświetlany w różnych rozdzielczościach. W zależności od rozdzielczości jego pozycja się zmienia, albo bliżej lewej albo prawej. Docelowo obrazek ten winien być po środku (jest dobrze dla rozdzielczości 1200x..). Po lewej logo, po środku wspomniany, problemowy obrazek, z prawej inny moduł. Obecnie w kodzie (CSS) wygląda to w sposób następujący:

Kod:

#ja-header {
    height: 123px;
    z-index:999;
    background: url(../images/ona.png) no-repeat;
    background-attachment:inherit;
    background-position: 60% 0%;
}

Próbowałem również attachment fixed i scroll oraz background position w procentach, pikselach oraz center. Bez rezultatu.

W plku index.php klasa przypisana jest w sposób następujący (wycinek kodu):

Kod:

<!-- HEADER -->
<div id="ja-header" class="wrap">
  <div class="main clearfix">
  
      <?php
      $siteName = $tmpTools->sitename();
      if ($tmpTools->getParam('logoType')=='image') { ?>
      <h1 class="logo">
          <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
      </h1>
      <?php } else {
      $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
      $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');    ?>
      <div class="logo-text">
          <p class="site-slogan"><?php echo $sloganText;?></p>
          <h1>
              <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>    
          </h1>
      </div>
      
      <?php } ?>
    <?php if($this->countModules('ja-login')) : ?>
        <div id="ja-headtools" class="ja-headtool">
        <ul>             
              <jdoc:include type="modules" name="ja-login" />
          </ul>
        </div>
      <?php endif; ?>
  </div>
</div>
<!-- //HEADER -->

Nie bardzo potrafię wymusić na obrazku aby był zawsze w tym samym położeniu bez względu na rozdzielczość. Będę wdzięczny za łopatologiczną pomoc, jak niełatwo zapewne zauważyć nie jestem specem w tej dziedzinie :-)

Pozdrawiam i życzę Szczęśliwego Nowego Roku

[stachel94]

Spróbuj tak:

Kod:

background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

[dawidt]

Spróbuj tak:

Kod:

background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

Dzięki, spróbuję w ten sposób i dam znać jak poszło :-)