Jump to content
  • 0

Фоновая картинка на всю ширину


Bava
 Share

Question

Привет всем!

Как верстается фоновая картинка, которая в psd макете выглядит как бы на всю ширину макета? То есть, такая, которую нельзя за-repeat-ить, которая полноценная картинка.

На этой странице лежат макеты. Я спрашиваю сейчас про такие как 1, 2, возможно 3, 9, 11, 18, 26. Возможно нужно их верстать с фиксированной шириной страницы соответствующей макету, то есть, выравнивается по центру страница, а по бокам определенным цветом. Или как..

Помогите пожалуйста, не могу понять :wacko:

Например, с макетом 4 все понятно, потому что фон везде одинаковый, а вот макет 2 не пойму как правильно делать

Надеюсь вы меня поняли :) , а если нет спрашивайте, что не понятно

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Привет всем!

Как верстается фоновая картинка, которая в psd макете выглядит как бы на всю ширину макета? То есть, такая, которую нельзя за-repeat-ить, которая полноценная картинка.

На этой странице лежат макеты. Я спрашиваю сейчас про такие как 1, 2, возможно 3, 9, 11, 18, 26. Возможно нужно их верстать с фиксированной шириной страницы соответствующей макету, то есть, выравнивается по центру страница, а по бокам определенным цветом. Или как..

Помогите пожалуйста, не могу понять :wacko:

Например, с макетом 4 все понятно, потому что фон везде одинаковый, а вот макет 2 не пойму как правильно делать

Надеюсь вы меня поняли :) , а если нет спрашивайте, что не понятно

Я иногда просто зеркально отражаю картинки и вставляю. А вообще верстай как есть, я думаю что в реальном проекте если нужно будет делать под большие экраны, дизайнер предоставит картинку больше.

Link to comment
Share on other sites

  • 0

1) Есть background-size: 100% и cover (в разумных пределах, но всё же).

2) Картинка не обязательно должна быть цельной (напр. в «Аватаре» №9 парящий утес справа при расширении окна может отъезжать, открывая дальнейшие красоты пандорского горизонта, и т.п.).

3) По-хорошему, да, дизайн должен предусматривать вид хотя бы для нескольких ключевых размеров. Если дизайнер не предусмотрел, в ТЗ явно не оговорено, а сроки поджимают, сугубо имхо — вполне можно воспринимать такой макет как фиксированный.

Link to comment
Share on other sites

  • 0

Спасибо за помощь

Я иногда просто зеркально отражаю картинки и вставляю.
Это как?
background-size: 100% и cover
Наверное, если попадется большой экран, то могут быть плохие последствия или не

А как вы решаете подобные проблемы? или обычно дизайнеры делают версии с большими размерами

Edited by Bava
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

  • Similar Content

    • By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By rpalenko
      Должно быть как на первом скриншоте. Что не так я делаю или как правильно переделать???
      Помогите пожалуйста уже всю голову сломал!
    • By Sanchous
      Подскажите пожалуйста как растянуть фон за пределы блока, который лежит в контейнере. В верстке так же использовалась библиотека Bootstrap(решение должно быть адаптивным). 
    • By mejta
      Приписал  body{
      background-image: url(img/fon.png)
      }
       Сразу фон есть ,  а после обновления изчезает.
      И так с любой картинкой
      Подробней в скриншотах
       
    • By Dizred
      Добрый день! Помогите с такой проблемой:
      Есть шаблон с общим фоном:

      Для понятности разметки поменял на другой цвет:

      Суть вопроса: надо где черный квадрат и цифра 1, вставить изображение прозрачное в самый угол, ну типо ленточки георгиевской и всё остальное залить фоном:

      Вот css:
      html{background-color:#5d1338;} body{background:url(../images/purple/bg.jpg) no-repeat top center;} a.read_more{background-color:#ff9694;} .button_divider{border-bottom:1px #6a2146 solid; border-top:1px #6a2146 solid;} a{color:#ff9694;} h1 span, h2 span, h3 span, h4 span, h1 strong, h2 strong, h3 strong, h4 strong{color:#ff9694;} ul#main_menu li a.selected {color:#ff9694;} ul#main_menu li a:hover, ul#main_menu li.current-menu-item a{color:#ff9694;} ul#main_menu ul li a {color:#ff9694;} ul#main_menu ul li ul li a {color:#ff9694;} .footer_menu ul li.selected a{ color:#ff9694;} .footer_menu ul li a:hover{ color:#ff9694; } .post_date, .post_date_nothumb, .service_pricespecial, input#searchsubmit, ul.filter_portfolio li.selected a, ul.filter_portfolio li a:hover, input.form_submit, a.icon_link_img{ background-color:#ff9694;} .footer_text a:hover{ border-bottom:1px dotted #ff9694;} ul#main_menu ul, ul#main_menu ul li ul, .flex-caption {background-color:#5d1338;} a.more, .left13 ul li, .entry ul li, .sidebar ul li{ background:url(../images/purple/bullet.png) no-repeat left;} .home_underslider{ background:url(../images/purple/home_underslider.jpg) no-repeat center top;} .slide_frame{background:url(../images/purple/slider_frame.png) no-repeat center;} .footer{background-color:#460d29;} .footer_text, .footer_menu ul li a{color:#b05877;} @media screen and (max-width: 1024px) { .show_menu, .hide_menu, ul#main_menu, ul#main_menu ul{ background-color:#5d1338;} ul.filter_portfolio li.selected a, ul.filter_portfolio li a:hover{background-color:#5d1338;} ul.filter_portfolio li a{color:#ff9694;} }  
      Помогите пожалуйста это сделать  
      Вроде получилось подробно описать суть вопроса...
×
×
  • 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