Jump to content
  • 0

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

kashik

Asked by kashik,

 Share

Question

kashik Explorer

kashik

Posted
Posted

Всем привет. Верстаю сайтик один, в верстке не знаток, верстаю таблицами. Основная таблица с контентом шириной 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 естественно, сама таблица сдвигается, а фоновая картинка остается на месте, становится некрасиво. Посоветуйте, что можно сделать что бы фоновая картинка так же сдвигалась вместе с таблицей, либо может другую технику посоветуете.

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
kashik Explorer

kashik

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

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

Link to comment
Share on other sites
  • 0
stars Explorer

stars

Posted
Posted (edited)

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

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

Edited by stars
Link to comment
Share on other sites
  • 0
kashik Explorer

kashik

Posted
  • Author
Posted (edited)

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

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

Edited by kashik
Link to comment
Share on other sites
  • 0
kashik Explorer

kashik

Posted
  • Author
Posted
kashik,

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

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

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

b664c3debd31t.jpg

47d982127cc4t.jpg

Link to comment
Share on other sites
  • 0
stars Explorer

stars

Posted
Posted (edited)

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

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

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

Edited by stars
Link to comment
Share on other sites
  • 0
kashik Explorer

kashik

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

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

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

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

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

Link to comment
Share on other sites
  • 0
kashik Explorer

kashik

Posted
  • Author
Posted 
<!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>

Link to comment
Share on other sites
  • 0
stars Explorer

stars

Posted
Posted

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

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

<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">

Link to comment
Share on other sites
  • 0
kashik Explorer

kashik

Posted
  • Author
Posted

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept