Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[CSS] Pozycjonowanie obrazka w różnych rozdzielczościach - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] Pozycjonowanie obrazka w różnych rozdzielczościach (/thread-css-pozycjonowanie-obrazka-w-roznych-rozdzielczo%C5%9Bciach)



[CSS] Pozycjonowanie obrazka w różnych rozdzielczościach - dawidt - 01-01-2010

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


RE: [CSS] Pozycjonowanie obrazka w różnych rozdzielczościach - stachel94 - 02-01-2010

Spróbuj tak:
Kod:
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;



RE: [CSS] Pozycjonowanie obrazka w różnych rozdzielczościach - dawidt - 09-01-2010

(02-01-2010, 02:51)stachel94 napisał(a): 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 :-)