Проблема с фоновым изображением

kashik · July 5, 2010

Всем привет. Верстаю сайтик один, в верстке не знаток, верстаю таблицами. Основная таблица с контентом шириной 800рх, отцентрирована. Мой монитор с разрешением 1650х1050 поэтому и фоновую картинку лепил под это размер шириной в 1650, с такими CSS:

body {

background-image:url(fon.jpg);

background-repeat:no-repeat;

background-attachment:fixed;

background-color:#ff8281;

background-postion: center top;

}

ну и при уменьшении ширины экрана вплоть до 1024 естественно, сама таблица сдвигается, а фоновая картинка остается на месте, становится некрасиво. Посоветуйте, что можно сделать что бы фоновая картинка так же сдвигалась вместе с таблицей, либо может другую технику посоветуете.

stars · July 5, 2010

данная строчка

background-postion: center top;

говорит о том что фон за центрован по горизонтале и прилеплен к верху... уберите ее будет двигаться )

Edited July 5, 2010 by stars

kashik · July 5, 2010

данная строчка говорит о том что фон за центрован по горизонтале и прилеплен к верху... уберите ее будет двигаться )

вот я щас смотрю с монитора у которого разрешение по ширине 1440 и уже наблюдаю то что картинка смещена, т.к. картинка имеет по ширине 1650 рх, убрал строчку ничего не изменилось.

d0ublezer0 · July 5, 2010

Так уберите fixed

kashik · July 5, 2010

ну как бы все эти фишки они нужны, тем более fixed, что бы картинка не прокручивалась с контентом. Я вот нашел какой то скрипт http://mutter.boom.ru/read/018.htm но что то он не работает.

stars · July 5, 2010

Вы хотите чтобы у вас при уменьшении экрана уменьшался и фон пропорционально? Если так то это нельзя реализовать по средствам html css с помощью JS можно но скрипт будет тяжелым(и откровенно говоря лишним)... Обычно большие картинки делают по прицепу: в центре основная картинка шириной 950-1024 + по бока добирают фоном\градиентом

P.S. Для проверки сайта на видимость при разном разрешении не обязательно иметь несколько мониторов, достаточно свернуть браузер в окно, ухватиться за краешек браузера и дальше путем растягивания и сужения окна смотреть как сайт смотрится...

Edited July 5, 2010 by stars

kashik · July 5, 2010

мне нужно что бы фоновая картинка просто сдвигалась конкретно в лево, т.е. уходила за левую границу браузера, тем самым находилась всегда в нужном месте с таблицей, уменьшать ее или увеличивать автоматически не нужно, в общем проблема в том, что фоновое изображение упирается в левую границу браузера. 950-1024 это не вариант т.к. сама таблица 800, там от картинки ничего не останется.

кстати да спасибо что напомнили, реально уменьшить разрешение экрана либо просто сдвинуть границу браузера это на самом деле разные вещи, вот я щас скинул разрешение с 1440Х900 на 1280Х768 моя картинка стала нереально огромной, думаю и замарачиваться не стоит уже с этим.

Edited July 5, 2010 by kashik

sigma77 · July 5, 2010

kashik,

Можешь на картинке показать, что и куда у тебя должно смещаться или не смещаться.

Т.е. одна картинка при разрешении 1650, вторая - 10204.

kashik · July 5, 2010

kashik,
Можешь на картинке показать, что и куда у тебя должно смещаться или не смещаться.
Т.е. одна картинка при разрешении 1650, вторая - 10204.

1650 этот монитор дома, а так на этих скринах можно понять.

stars · July 5, 2010

Ну так а почему не сделать 3 колонки?

первая служит для левой части background-postion: right; делаем, средняя у нас сама таблица, и правая у нас правая часть background-postion: left; Среднюю часть закрепляем по середине а края пуская тянутся...

судя по скрину вам нужно background-postion: center; без top попробуйте может не будет прыгать...

Edited July 5, 2010 by stars

kashik · July 5, 2010

Ну так а почему не сделать 3 колонки?
первая служит для левой части background-postion: right; делаем, средняя у нас сама таблица, и правая у нас правая часть background-postion: left; Среднюю часть закрепляем по середине а края пуская тянутся...
судя по скрину вам нужно background-postion: center; без top попробуйте может не будет прыгать...

я так тоже делал, это решает пол проблемы, левая часть скрывается так же под таблицей, но правая часть зато начинается двигаться как нужно. задавать позиции для каждой части не решило проблему, и еще не понятный для меня баг background-attachment:fixed; задавая это свойство для левой и правой части, в правой части пропадает картинка фоновая 0_о

сделаю наверное простенький фон)

stars · July 5, 2010

Ну если вы выложите код то могу помочь сделать или ссылку на вашу работу...

kashik · July 5, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">

.nav{
    font-family: arial;
    font-size: 10pt;
    font-weight: bolder;  
    color: #990134;	
    text-decoration: none;
    text-shadow: white 1px 1px 2px;
    text-transform: uppercase;
}      

.nav:hover{
    font-family: arial;
    font-size: 10pt;
    font-weight: bolder;
    text-decoration: none;
    color: #ffffff;
    text-shadow: none;
    text-transform: uppercase;
}

.link {
    border-left: 1px #990134 dotted;
    color: #345588;
    text-align: center;	
    background-color: #FF8280;
    	}

.link1 {
    color: #345588;
    text-align: center;	
    background-color: #FF8280;
	}


.link:hover {
    color: #FFFFFF;  
    background-color: #990134;
    }       

.link1:hover {
    color: #FFFFFF;  
    background-color: #990134;
      }       

#header {
background-color:#ffffff; 
background-repeat: no-repeat;
background-position: center;
}
#content {
background-color:#FDE5EE;

}

#footer {
background-color:#FF8280;

}


#mtext {
font-family: Tahoma;
color:#990134;
font-size: 10pt;
line-height: 1.5;
}

#cat {
font-family: Arial;
color:#990134; 
font-size: 10pt;
vertical-align: top;
font-weight: bold;
line-height: 1.5;
border-right: dotted 1px #990134;
background-color:;
}

.cat {
font-family: Arial;
color:#990134; 
font-size: 9pt;
vertical-align: top;
font-weight: bold;
line-height: 1.5;
}

.cat:hover {
text-decoration:none;
color:#5ABFCE;
}

.zag {
font-family: Arial;
color:#610030; 
font-size: 13pt;
font-weight: bold;
line-height: 1.5;
text-align: center;
}

.bfon {
background-repeat:no-repeat; 
background-attachment:;
background-postion:;
}

</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 <table cellpadding="0" cellspacing="0" border="0">
  <tr>
   <td class="bfon" style="background-image:url(fon1.jpg);" height="" width="430"></td>
   <td style="background-color:#990134;" height="" width="15px"></td>
   <td style="background-color:#FF8280;" height="" width="7px"></td>

   <td width="730px" valign="top">
    <table cellpadding="0" cellspacing="0" style="" border="0">
     <tr>
      <td id="header" height="180px" width="740px" colspan="6"><img src="head.jpg" height="180px" width="740px"></td>
     </tr>

<!--ìåíþ íàâèãàöèè-->

     <tr>
      <td style="background-color:#990134;" height="3px" width="740px" colspan="6"></td>
     </tr>
     <tr>
      <td class="link1" height="25px" width="72px"><a class="nav" href="">Ãëàâíàÿ</a></td>
      <td class="link" height="25px" width="72px"><a class="nav" href="">Ïðîäóêöèÿ</a></td>
      <td class="link" height="25px" width="72px"><a class="nav" href="">Ðàáîòà</a></td>
      <td class="link" height="25px" width="72px"><a class="nav" href="">Çàÿâêà</a></td>
      <td class="link" height="25px" width="72px"><a class="nav" href="">Îïëàòà</a></td>
      <td class="link" height="25px" width="72px"><a class="nav" href="">Êîíòàêòû</a></td>
     </tr>
     <tr>
      <td style="background-color:#990134;" height="3px" width="740px" colspan="6"></td>
     </tr>

<!--ÊÎÍÒÅÍÒ-->

     <tr>
      <td id="content" height="" colspan="6">
       <table cellpadding="10" cellspacing="5" style="" border="0">
         <tr>
          <td id="cat" width="25%">

<span class="zag">Êàòàëîã</span><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ âîëîñ</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ çàãàðà</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ ëèöà</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ íîã</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ ðóê</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ òåëà</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Àðîìàòû Avon</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äåêîðàòèâíàÿ êîñìåòèêà</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Àêñåññóàðû</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ âîëîñ</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ çàãàðà</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ ëèöà</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ íîã</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ ðóê</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äëÿ òåëà</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Àðîìàòû Avon</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Äåêîðàòèâíàÿ êîñìåòèêà</a><br>
<img src="home_arrow_1.gif"> <a class="cat" href="">Àêñåññóàðû</a><br>

          </td>
          <td id="mtext" width="75%">
<center><img src="avon.jpg" width="80%" height="80%"></center><br>

         </tr>
       </table>
      </td>
     </tr>
     <tr>
      <td style="background-color:#990134;" height="3px" width="740px" colspan="6"></td>
     </tr>
     <tr>
      <td id="footer" height="70px" colspan="6"></td>
     </tr>
    </table>
   </td>                                           

  <td style="background-color:#FF8280;" height="" width="7px"></td>
  <td style="background-color:#990134;" height="" width="15px"></td>
  <td class="bfon" style="background-image:url(fon2.jpg);" height="" width="430px"></td>
 </tr>
</table>
</body>
</html>

stars · July 5, 2010

Мое рабочее время не счадно улетело не успел я посмотреть ваш код...

так на вскидку должно работать

<body style="margin:0;padding:0;background-image:url(img.jpg);background-position: center;background-attachment:fixed;" >
<table align="center" cellpadding="0" cellspacing="0" border="0">

kashik · July 6, 2010

так и оставил три колонки, просто уменьшил боковые фоновые картинки по ширине, добавил <table align="center" и все стало работать так как нужно, единственное осталось background-attachment: fixed; если боковым колонкам задаешь это свойство, то картинки уже обе просто не показываются.

Sign In

Проблема с фоновым изображением

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information