Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]background-image skalowalny
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
kbilski
14.10.2010, 15:24:38
Witam

Mam problem z szablonem, ustawiłem tło w postaci .jpg i chciałbym aby automatycznie skalował się do różnych rozdzielczości.
Jednak gdy ustawie % (czyli automat) to zostaje mi na dole biały pasek. Nie jest to żaden moduł, nie moge tego namierzyc mozillą..


Może ktoś zna rozwiązanie?

Za tło odpowiada;

[PHP] pobierz, plaintext 
  1. #body_background_up_inner {
  2. float: left;
  3.     position: relative;
  4.     margin: 0px;
  5.     padding: 0px;
  6.     width: 100%;
  7.     height: 100%;
  8.     clear: left;
  9. background:#080607 url(../images/bg.jpg) no-repeat;
  10. background-attachment: fixed;
  11. }
[PHP] pobierz, plaintext


Link do strony http://www.calodoboweczyszczenie.vel.pl/
drivexov
14.10.2010, 15:33:42
No więc spróbuj całą stronę przystosowac do roznych rozdzielczosci ekranu.

W index.html dodaj:
Cytat
<div id="pozycja">
reszta strony
</div>


A w CSS:
Cytat
#pozycja {
position: relative;
}

Natomiast tło to normalnie kodem
Cytat
background-image: url(images/tlo.png); background-repeat:no-repeat;

Ja zawsze tak robie i wszystko działa.
Mam nadzieję, że pomoglem smile.gif
erix
14.10.2010, 15:45:16
background-image nie pozwala na skalowanie. Jedynie, gdy ustawisz jakiś dokument SVG jako tło, ale działa to wyłącznie w Operze.
kbilski
14.10.2010, 17:41:03
Ten szablon był zautomatyzowany i umożliwiał zmianę tła z panelu administratora. Wymusiłem background i teraz mam pytanie "pozycja" to który div w tym przypadku?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language ?>" dir="<?php echo $this->direction; ?>">
  3. <head>
  4. <jdoc:include type="head" />
  5. <?php
  6. // no direct access
  7. defined('_JEXEC') or die('Restricted access');
  8. JHTML::_('behavior.mootools');
  9. JHTML::_('behavior.tooltip');
  10. include_once ('wrapper/css.php');
  11. include_once ('css/template_css.php');
  12. ?>
  13. </head>
  14. <body>
  15. <?php if(($this->params->get('bg_con_list') =='con1') && ($this->params->get('bg_con') =='1')) : ?>
  16.     <div id="body_background">
  17.         <div id="body_background_down"> 
  18.             <div id="body_background_down_inner"></div>
  19.         </div>
  20.         <div id="body_background_up"> 
  21.             <div id="body_background_up_inner">
  22. <?php endif; ?>
  23.                 <div id="body_outer">
  24.                     <div id="body_inner">
  25.                         <?php include_once ('wrapper/header.php'); ?>
  26.                         <div id="content">
  27.  
  28.  
  29.                             <?php include_once ('wrapper/left.php'); ?>
  30.                             <div id="component_outer">
  31.                                 <?php 
  32.                                     if($this->params->get('slide') == 'change'){
  33.                                         $itemid = JRequest::getVar( 'Itemid', 0 );
  34.                                         $slide_change = $this->params->get('slide_change');    
  35.                                             if (is_array( $slide_change )) {            
  36.                                                 if (in_array($itemid,$slide_change) == $itemid){
  37.                                                     include ('wrapper/slideshow.php'); 
  38.                                                 }    
  39.                                             } else {    
  40.                                                 $slideshow_single = $slide_change;    
  41.                                                 if (($slideshow_single) == $itemid){
  42.                                                     include ('wrapper/slideshow.php'); 
  43.                                                 }
  44.                                             } 
  45.                                     }    
  46.                                     elseif($this->params->get('slide') == 'show'){
  47.                                         include ('wrapper/slideshow.php'); 
  48.                                     }
  49.                                 ?> 
  50.                                 <div id="component">
  51.                                     <?php 
  52.                                         if($this->params->get('component') == 'change'){
  53.                                             $itemid = JRequest::getVar( 'Itemid', 0 );
  54.                                             $component_change = $this->params->get('component_change');    
  55.                                                 if (is_array( $component_change )) {            
  56.                                                     if (in_array($itemid,$component_change) != $itemid){
  57.                                                         echo '<jdoc:include type="message" />
  58.                                                         <jdoc:include type="component" />'; 
  59.                                                     }    
  60.                                                 } else {    
  61.                                                     $component_single = $component_change;    
  62.                                                     if (($component_single) != $itemid){
  63.                                                         echo '<jdoc:include type="message" />
  64.                                                         <jdoc:include type="component" />'; 
  65.                                                     }
  66.                                                 } 
  67.                                         }    
  68.                                         elseif($this->params->get('component') == 'show'){
  69.                                             echo '<jdoc:include type="message" />
  70.                                             <jdoc:include type="component" />';
  71.                                         }
  72.                                     ?> 
  73.                                 </div>
  74.                             </div>
  75.                         </div>
  76.                     </div
  77.                     <?php include_once ('wrapper/bottom.php'); ?>
  78.                 </div>
  79. <?php if(($this->params->get('bg_con_list') =='con1') && ($this->params->get('bg_con') =='1')) : ?>
  80.             </div>
  81.         </div>
  82.     </div>
  83. <?php endif; ?>
  84. </body>
  85. </html>
[HTML] pobierz, plaintext
drivexov
14.10.2010, 17:54:22
Pozycja to ma być pierwszy DIV, w którym będzie się znajdowała cała reszta strony w tym też wszystkich innych divów.

Cytat
<div id="pozycja">
Tu cała reszta strony
</div>

Rozumiesz?
kbilski
14.10.2010, 19:04:40
tak, krok pierwszy i drugi zastosowałem..chciałem się tylko upewnić, natiomiast sama pozycje background w css zostawiłem bez zmian lub zostawiłem sama linijkę z url.
Niestety żadnych zmian nie odnotowałem.

generalnie jak wywalę pozycje z css odpowiedzialną za tło, to znika obrazek z falą ale pojawia się stare tło strony, myślę ze szablon coś tu mota...
drivexov
14.10.2010, 19:35:17
Ja w takim razie nie rozumie, co ty chcesz zrobić. Mógłbyś napisać troszkę jaśniej?
kbilski
15.10.2010, 13:33:49
Tłumacze na spokojnie:

Z panelu administratora wybieram kontur i wtedy pięknie to działa na całej stronie i się skaluje, jest z parametrem repeat-x.



Odpowiada za to fragment kodu css

[PHP] pobierz, plaintext 
  1. #body_background_down_inner {
  2. 	float: left;
  3. 	position:relative;
  4. 	margin: 0px;
  5. 	padding: 0px;
  6. 	width: 100%;
  7. 	height: 450px;
  8. 	background: url(../images/cons/con1.png) repeat-x; 
  9. 	clear: left;
  10. }
[PHP] pobierz, plaintext


Zamieniam to na 

[PHP] pobierz, plaintext 
  1. #body_background_down_inner {
  2. 	float: left;
  3. 	position:relative;
  4. 	margin: 0px;
  5. 	padding: 0px;
  6. 	width: 100%;
  7. 	height: 100%;
  8. 	background: url(../images/bg.jpg) no-repeat; 
  9. 	clear: left;
  10. }
[PHP] pobierz, plaintext


Efekt widać na stronie http://www.calodoboweczyszczenie.vel.pl/
drivexov
15.10.2010, 14:21:42
Jakoś dziwnie masz ten szablon.
Spróbuj dodać position: relative w miejscu, które w CSS odpowiada za menu o ile takie masz. Jeżeli nie, to polecam zapoznać się z kurshtml.boo.pl smile.gif Mnie pomogło.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.