Jump to content
  • 0

Фон с аркой для резиновой вестки.


maxakagaret
 Share

Question

Привествую профессионалов и новичков вкрстки.

Стокнулся с некоторой проблемой во время верстки сайта

Верстка резиновая и с ней как таковой проблем нет, чего не скажешь о фоне

Вот такой вот борк должен быть на главной странице.

И как это сдедать с помощью HTML/CSS - я понять не могу.

Решение с JS имеется, но прежде чем его применять, хотелось бы удостовериться что без JS не обойтись.

Еще раз подмечу, что верстка резиновая.

 

4874685m.jpg

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

Ну а если сделать блок красным цветом, ниже блок с тремя этими кнопками и марджином вверх их поднять (задать z-indeх, чтобы нижний блок перекрывал верхний)?

Видимо, я неточно изложил суть проблемы. Сложность заключается именно в нижней части фона - которая изогнута. Решение, конечно есть - фоновый рисунок с позиционированием по центру, но интересно именно html/css решение.

Не пойму в чем проблема. Вырезал в фотошопке, и прилинковал к боди.

Как я указал в описании проблема в том, что я пытаюсь найти решение с использованием именно html/css.

Link to comment
Share on other sites

  • 0

 

Как я указал в описании проблема в том, что я пытаюсь найти решение с использованием именно html/css.

Отпишешь тут через пару лет, думаю решение найдешь)

 

Ваша "ирония" неуместна. Советую обратить внимание, например, на http://htmlbook.ru/blog/golosovanie-za-luchshee-izobrazhenie

Или попроще http://htmlbook.ru/blog/treugolniki-cherez-css

Edited by maxakagaret
Link to comment
Share on other sites

  • 0

Так братишка это совсем другое. Вот если решение найдется, тогда соглашусь что "ирония" не уместнa.

Без фамильярностей, пожалуйста. Решение состоит в том, чтобы div с абсолютным позиционированием позиционировать по центру родителя.

Edited by maxakagaret
Link to comment
Share on other sites

  • 0
Решение состоит в том, чтобы div с абсолютным позиционированием позиционировать по центру родителя.

Что-то не вьеду. Если знаешь решение, зачем создавал тему и спрашивал как сделать)))
 

Link to comment
Share on other sites

  • 0

Можно вставить блок с изогнутой нижней частью (есть же разные фигуры на css http://habrahabr.ru/post/126207/) между этими тремя кружками и заголовком. Чуть приподнять его еще, а кружки поставить слоем выше.

Но имхо, проще картинкой.

Link to comment
Share on other sites

  • 0

Можно вставить блок с изогнутой нижней частью (есть же разные фигуры на css http://habrahabr.ru/post/126207/) между этими тремя кружками и заголовком. Чуть приподнять его еще, а кружки поставить слоем выше.

Но имхо, проще картинкой.

Спасибо за статью, почерпнул там интересную и полезную информацию. Однако проще - не значит лучше. Подгружать картинку 1500х300 для фона - не лучшее решение для оптимизации сайта. Но все же остается вопрос о позиционировании - насколько мне известно центрировать плавающий блок по центру так же, как фон (left:center), нельзя.

Link to comment
Share on other sites

  • 0

Как вариант, можно извернуться наподобие такого. Можно еще поколдовать с хитрой комбинацией линейных и радиальных градиентов, но боюсь, что аккуратно состыковать границы во всех браузерах окажется не так легко, как хочется. Ну и "лобовой" вариант — SVG-картинка в фоне (весить будет всего ничего, масштабироваться должна адекватно).

Link to comment
Share on other sites

  • 0

Как вариант, можно извернуться наподобие такого. Можно еще поколдовать с хитрой комбинацией линейных и радиальных градиентов, но боюсь, что аккуратно состыковать границы во всех браузерах окажется не так легко, как хочется. Ну и "лобовой" вариант — SVG-картинка в фоне (весить будет всего ничего, масштабироваться должна адекватно).

Спасибо, хорошее решение. Правда совместимость несколько хуже, чем у border-radius.

Неровно получается.

Link to comment
Share on other sites

  • 0

Ой, я ж забыл, что IE9 понимает трансформы (с -ms-, наверное, единственный реальный случай, когда этот префикс нужен). С ним вроде совместимость почти та же.

Еще раз спасибо за предложеное решение. После некоторых модификаций прекрасно встало на шаблон.

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