[Помогите] Изменить фон

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем mative, 28 май 2015.

  1. mative

    mative

    Регистрация:
    24 май 2015
    Сообщения:
    43
    Симпатии:
    1
    ребята, у меня тоже проблема с картинками и css, я в модуле HTML контента не могу их растянуть на всю ширину окна браузера, ширина=100% растягивает только до границ самого модуля ( он ограничен разрешением (адаптивностью) соответственно )....помогите пожалуйста. я уже где только не спрашивал...так и не могу понять как это делается! да и ответ получил только один "бакграунд: кавер" .... что это значит не понятно, но при приписке этого стиля ничего не происходит...

    [​IMG]

    помогите пожалуйста эту картинку приклеить к левому краю экрана ( без марджин-лефт конечно, он не адаптивен ), и ограничить правым краем экрана, и пропорции чтобы сохранялись. РЕБЯТА, ГОРЮ! проект сдать не могу из-за этого по срокам лечу! а вот надо именно так((

    http://lombard-zoloto.kypitsite.ru/ - вот ссылка на проект. только я не понимаю зачем она нужна. код-то там html + css...я просто не могу понять как его сделать адаптивным...растянуть на браузер, а не на модуль!
     
    Lasted edited by : 28 май 2015
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.350
    Симпатии:
    1.378
    а теперь объясните нормально что вы хотите сделать.

    нужно чтобы эта картинка была фоном для сайта?
    что значит "приклеить к левому краю экрана"?
     
  3. mative

    mative

    Регистрация:
    24 май 2015
    Сообщения:
    43
    Симпатии:
    1
    [​IMG]
    ну вот так вот нужно. только что бы это адекватно выглядело! без нижнего скролинга и адаптивно...
     
  4. ramses

    ramses

    Регистрация:
    16 сен 2014
    Сообщения:
    36
    Симпатии:
    10
    Может попробовать margin в процентах поставить, для каждого разрешения. Чтобы скролла не было на body в css прописать overflow-x: hidden;
     
  5. mative

    mative

    Регистрация:
    24 май 2015
    Сообщения:
    43
    Симпатии:
    1
    а как это сделать для каждого разрешения подскажите пожалуйста? я сейчас тупо марджином свдинул его просто, за неимением навыка сделать иначе. ну в процентах понятно там могу поставить грубо говоря 60%, но это мне кажется врядли чего изменит, нужно именно к ширине картинке что-то прописать, причём ладно тут на обычной версии я могу высчитать те же % для ширины, но ведь планшетные и мобильные версии такого не примут
     
  6. ramses

    ramses

    Регистрация:
    16 сен 2014
    Сообщения:
    36
    Симпатии:
    10
    Использовать @media http://htmlbook.ru/css/media
    В зависимости от разрешения экрана и устройства прописывать для изображения:
    margin-left: -20%;
    width: 1588px; (1600px экран) и т.д.
    Мб это решение поможет.
     
    mative нравится это.
  7. mative

    mative

    Регистрация:
    24 май 2015
    Сообщения:
    43
    Симпатии:
    1
    <img src="http://lombard-zoloto.kypitsite.ru/image/catalog/parallax-2-2050x637.jpg" style="@media screen { /* Стиль для отображения в браузере */ margin-left: -20%; width: 78%; @media handheld { /* Стиль для отображения в телефоне пи планшете */ width: 100%; } @media tv { /* Стиль для отображения в телефоне пи планшете */ width: 100%; } ">

    это так должно выглядеть? я просто не совсем понимаю синтаксис и по идее не отображается ничего путёвого.
    --- Добавлено, 28 май 2015 ---
    может есть ещё какие-то способы? может есть ещё способы как без @media насильно прописать расширения экранов и типы устройств?
     
  8. ramses

    ramses

    Регистрация:
    16 сен 2014
    Сообщения:
    36
    Симпатии:
    10
    Корректировки вносить надо в файл стилей а не в теле хтмл. У Вас стоит bootstrap, в документации по нему детально описано как использовать @media.
     
  9. mative

    mative

    Регистрация:
    24 май 2015
    Сообщения:
    43
    Симпатии:
    1
    так т.е. мне нужно назначить какой-нибудь контейнер для картинки моей и к ней прописать отдельно стиль в файле stylesheet.css ? а как это сделать описано в документации к будстрапу? правильно понимаю?

    поищу сейчас документацию тогда для начала. поясните правильно ли я понял пожалуйста.
     
  10. ramses

    ramses

    Регистрация:
    16 сен 2014
    Сообщения:
    36
    Симпатии:
    10
    Оборачивать изображение в контейнер не обязательно. Можно тегу img присвоить id или class, и оперировать им.

    stylesheet.css
    @media screen and (min-device-width: 1600pх) {
    .class_или_id_изображения {margin-left: -20%; width: 1588px;}
    }
    @media screen and (min-device-width: 1280pх) {
    .class_или_id_изображения {margin-left: -6%; width: 1280px;}
    }

    и т.д.
     
    mative нравится это.
  11. mative

    mative

    Регистрация:
    24 май 2015
    Сообщения:
    43
    Симпатии:
    1
    попробовал для примера:

    stylesheet.css
    @media screen and (min-device-width: 1600pх) {
    .id_kartinka {margin-left: -20%; width: 1588px;}
    }
    @media screen and (min-device-width: 1280pх) {
    id_kartinka {margin-left: -6%; width: 1280px;}
    }

    и в самом контенте прописал тоже!

    <div id="kartinka"><img src="http://lombard-zoloto.kypitsite.ru/image/catalog/parallax-2-2050x637.jpg"></div>

    ничего не меняется..я правильно хоть соблюдаю синтаксис и прописываю id ? как картинке его задать я не очень понимаю, мне проще в дивы заключать
     
  12. ramses

    ramses

    Регистрация:
    16 сен 2014
    Сообщения:
    36
    Симпатии:
    10
    stylesheet.css

    @media (min-width: 914px) { /* это будет показано при разрешении монитора до 914 пикселей */
    #kartinka img {margin-left:-13%; width:916px}
    }
    @media (min-width: 1067px) { /* это будет показано при разрешении монитора до 1067 пикселей */
    #kartinka img {margin-left:-7%; width:1065px}
    }
    @media (min-width: 1280px) { /* это будет показано при разрешении монитора до 1280 пикселей */
    #kartinka img {margin-left:-6%; width:1280px}
    }
    @media (min-width: 1455px) { /* это будет показано при разрешении монитора до 1455 пикселей */
    #kartinka img {margin-left:-14%; width:1455px}
    }
    @media (min-width: 1600px) { /* это будет показано при разрешении монитора до 1600 пикселей */
    #kartinka img {margin-left:-20%; width:1588px}
    }

    body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    overflow-x:hidden;
    }
     
    mative нравится это.
  13. mative

    mative

    Регистрация:
    24 май 2015
    Сообщения:
    43
    Симпатии:
    1
    Огромное спасибо - принцип понял... сейчас ровняю сижу, но не совсем понятно как для мобильных и планшетных устройств сделать хотя бы на 100% внутри модуля (там не принципиально уж это упирание в края ).

    я прописал вот так:

    @media handheld { /* Стиль для отображения в телефоне или планшете */
    #kartinka img { width:100%}
    }

    не получается почему-то((
    вроде по аналогии + инструкции должно быть так и для тв соответственно:

    @media tv { /* Стиль для отображения на телеке */
    #kartinka img { width:100%}
    }
     
  14. ramses

    ramses

    Регистрация:
    16 сен 2014
    Сообщения:
    36
    Симпатии:
    10
    @media (max-width: 480px)
    #kartinka img {width:100%}
    }
     
    mative нравится это.
  15. mative

    mative

    Регистрация:
    24 май 2015
    Сообщения:
    43
    Симпатии:
    1
    благодарочка огромнейшая вам ребята прописал так и прокатило

    @media (min-width: 768px)
    #kartinka img {margin-left:-20px; width: 768px }

    если не трудно, подскажите как прописать для планшетов?
     
  16. ramses

    ramses

    Регистрация:
    16 сен 2014
    Сообщения:
    36
    Симпатии:
    10
    Как я понимаю, планшеты понимают screen, соответственно прописать той же самой @media, подставляя ширину планшета. По аналогии как Вы делали выше.
     
    mative нравится это.
  17. mative

    mative

    Регистрация:
    24 май 2015
    Сообщения:
    43
    Симпатии:
    1
    не получается...пробовал 2умя способами..как написано выше и:

    @media (min-width: @screen-sm-min)
    #kartinka img { margin-top:-20px; width:100%; height: 420px }

    @media (min-width: @screen-md-min)
    #kartinka img { margin-top:-20px; width:100%; height: 420px }

    @media (min-width: @screen-lg-min)
    #kartinka img { margin-top:-20px; width:100%; height: 420px }


    а вообще огромнейшее тебе спасибо! просто выручаешь очень сильно!!!!
     
  18. ramses

    ramses

    Регистрация:
    16 сен 2014
    Сообщения:
    36
    Симпатии:
    10
    Пожалуйста. Для этого есть кнопка мне нравится :Smile:

    Попробуй в min-width прописывать значения в px. Не могу утверждать, что это правильно, но должно работать. Т.е. посмотреть, какие размеры самые популярные.
     
    mative нравится это.
  19. mative

    mative

    Регистрация:
    24 май 2015
    Сообщения:
    43
    Симпатии:
    1
    пробовал уже, к сожалению не помогает..вот только в этом проблема вроде осталась =(