Search the Community

Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в 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; }

Должно быть как на первом скриншоте. Что не так я делаю или как правильно переделать??? Помогите пожалуйста уже всю голову сломал!

Подскажите пожалуйста как растянуть фон за пределы блока, который лежит в контейнере. В верстке так же использовалась библиотека Bootstrap(решение должно быть адаптивным).

Приписал body{ background-image: url(img/fon.png) } Сразу фон есть , а после обновления изчезает. И так с любой картинкой Подробней в скриншотах

Добрый день! Помогите с такой проблемой: Есть шаблон с общим фоном: Для понятности разметки поменял на другой цвет: Суть вопроса: надо где черный квадрат и цифра 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;} } Помогите пожалуйста это сделать Вроде получилось подробно описать суть вопроса...

Здравствуйте! Есть блок шириной 390px и высотой 100px, который является ссылкой. .div { background-image: url(bg_1.png); height: 100px; width: 390px; } .div:hover { background-image: url(bg_hover.png); } <div class="div"> <a href="#">Текст</a> </div> <div class="div"> <a href="#">Текст</a> </div> Можно ли сделать так, чтобы при наведении на блок фон менялся на bg_hover.png и при этом стрелка слева картинки выходила за пределы блока??

Друзья, возникла задача построения ряда блоков. Блоки располагаются один под другим. В каждом есть изображение, которое должно обрезаться снизу. Однако сам div нестандартный. Смотрим картинку Какие у меня были варианты решения: Использовать overflow: hidden; Но идея потерпела крах, потому что он обрезает не по линии, а по горизонтали. Использовать clip; Тоже крах, потому что теряется адаптивность и каждый раз рассчитывать clip даже с помощью js тяжело Разные варианты совмещения. Например, взять из макета дугу и картинку, сохранить как PNG и установить в основном слое как background-position: bottom; Пока это самая лучшая идея, но она не универсальна. Необходимо сделать так, чтобы работало с любой картинкой, не только с выбранной из макета. То есть было бы странно сначала закидывать любую картинку в макет, там вырезать ее вместе с дугой и вставлять как background Как строить такие блоки с обрезкой картинок на нижней границе?

backgorund не стакается с верхним краем css body { background-color: #fff; margin: 0; } div.ferst{ height: 700px; width: 100%; background-position:21.5%; background:#0A0905 url(../img/IMGP4333.png)100% 100% no-repeat; } h1{ margin: 0; padding-left: 250px; padding-top: 59px; } html <!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Whitesquare</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="wtf" type="text/css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="ferst"> <h1>kek</h1> </div> </body> </html> https://yadi.sk/i/0lstBB273Jm9me болие наглядное фото

Собственно давно уже бьюсь с этой проблемой и прошу о помощи, т/к решения не нашел. Есть картинка (во вложении), нужно сделать также. Варианты с просто взять и такую же картинку (с полосами) вставить как фон не подходят, т/к потом нужно будет сделать параллакс эффект + некоторые расстояния получаются не точными до верхних/нижних границ от картинки. Уже пробовал и поворачивать изображение и треугольники, но ничего не получается, либо слишком не устойчивое. Прошу помощи, наверняка кто-то сталкивался с такой задачей раньше.

Доброго всем дня. Нужно сделать так, чтобы на фоне сайта дымился дым (клубился, вращался и.т.д), всегда, а в некоторых блоках дым должен двигаться, сжиматься или расширяться в зависимости от проскроливания страницы. Пожалуйста, подскажите, как это сделать лучше всего? Поставить на фон видео? Но его нельзя будет контролить скролом.

Здравствуйте, текст не очень хорошо читается на фоне сайта и хотелось бы сделать под него подложку, но чтобы она занимала минимум места и не перекрывала изображение. Как когда текст выделяют курсором. Как хотелось бы во вложении. Заранее спасибо за помощь!

Здравствуйте! Имеется картинка для заднего фона и ещё 2 файла, которые надо разместить поверх самого фона Хотелось бы узнать как можно разместить ipad и iphone на фоне, уменьшить их размер (сами они очень большиеа) и сделать растягивающийся фон Могу также оставить ссылку на psd если надо. Заранее благодарю

Всем привет. Народ, делаю сейчас страницу: Ссылка Но никак картинку не могу спозиционировать, чтобы она вообще отображалась, как на главной странице: http://busik.top/ И в футере картинка на задний план уходит почему то. Пробовал с z-index играться, но результата не дало. Помогите пожалуйста, как CSS подправить, чтобы всё нормально отображалось? Скрины: Скрин1 Скрин2

Здравствуйте. В макете у текста есть фон - http://joxi.ru/KAgMOn8CgbXbKm Есть возможность сделать 2 строки одним тегом <p>, но с фоном на каждую строку? Пока только решение пилить 2 тега <p> на каждую строку. Например, текст в несколько строк, но фон, конечно же, непрерывный - http://joxi.ru/v29JkwWsGlzwbA

Добрый день! Скачал шаблон сайта и столкнулся с проблемой замены фона. Когда указываю ссылку на изображение, которое расположено на сайте с картинками, фон подключается без проблем background:#EDEDED url("http://img2.goodfon.ru/original/1920x1200/0/5d/pole-podsolnuhi-priroda.jpg") no-repeat center center fixed; Но если я подключаю фон из папки с картинками, фон подключатся не хочет background:#EDEDED url("img/image.jpg") no-repeat center center fixed; Подскажите, где я допустил ошибку?

Возможно глупый вопрос, но интересует терминология. Часто подобное вижу в бутстрапе. Пример css код: background: url("/img/background.jpg") repeat-x;background-color: #ffffffПочему используются две переменные, разве не проще использовать одну? background: #fff url("/img/background.jpg") repeat-x;

Здравствуйте! В Google Chrome на мобильном(Android) неправильно показывается страница -а именно background снизу становится белым. Страница onamap.ru/account/login Скриншот Но на ПК всё нормально. Не пойму в чем дело.

Доброго дня уважаемые коллеги. Помогите, пожалуйста, разобраться в таком вопросе: Если у нас есть img и в нем src к картинке. Браузер шлет запрос к картинке, а если у меня эта картинка выводится через background: url('/img.png') в стилях. Будет ли к ней также запрос или все откомпилится при единственном запросе браузера к стилям? Т.е. дает ли преимущество в запросах к серверу отображения картинок в стилях через фон, а не через img? Заранее спасибо.

http://cssdeck.com/labs/collab/deoxlsaw http://s013.radikal.ru/i323/1505/83/7283853ab505.jpg У body и основного div'а один фон, но при сужении экрана, изображения расходятся, можно ли исправить в background-attachment, или как-нибудь, путем наименьшего сопротивления?

Как сделать наложение backgroun поверх картинки? В последствии через javascript реализую его исчезновение. http://jsfiddle.net/32zrhdfe/

Добрый вечер форумчане. Столкнулся с такой проблемой. Никак не получается наложить полупрозрачный фон на изображение. Пример можно посмотреть здесь http://rezka.plasmainfo.ru. Заранее спасибо за ответы.

Здравствуйте. Подскажите пожалуйста как лучше задать фон, который выделен на макете стрелочкой. Вырезать часть и размножить, как я понимаю не получиться. При задании фона нужно что бы фон мог подстраиваться по высоте в зависимости от количества контента, что бы хорошо смотрелся если у меня будет например всего один слайдер в один ряд. Ссылка на макет: http://www.pixic.ru/i/L0G0f6N450k813a3.png

Добрый вечер, подскажите как можно выставить фото слайдер background для элементов контента. Пробовал через z-index, получается криво. Нужно чтоб было вот так http://pixs.ru/showimage/VillaSanMa_8067826_14250958.jpg а получается вот так http://sport.teslalight.com.ua/ Спасибо.

Подскажите пожалуйста почему background не растягивается на моем проект-сайте на всю ширину, и почему открывая сайт на мобильном браузере моего s4 изначально сайт открывается увеличенным в пол сайта? Вот пример как выглядит сайт на мобилах СМОТРЕТЬ. Заранее спасибо!

Итак HTML-код: <div class="menu"> Акции</div><div class="menu"> Акции</div>CSS-код: .menu { background: url('images/menu.png') no-repeat; background-size: 100%; background-position: 100%; color: #fcefe4; font-size: 20px; font-weight: bold; margin-top: 20px; padding: 15px; padding-bottom: 25px; text-align: center; text-shadow: 0 -1px 0 black;}Проблемма: В первом div блоке background отображается а во втором нет. Как ето исправить?