Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
1

Background и div

18.07.2014, 12:23. Просмотров 516. Ответов 7
Метки нет (Все метки)

Доброго дня! Имею следующую структуру:
HTML5
1
2
3
4
<section>
    <div id="poster" style="background-image: url(image/bikecycle-header-background.jpg);">
    </div>      
</section>
Как сделать, чтобы section не обрезал background-image? И все это должно быть адаптивно. Спасибо большое!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
18.07.2014, 12:23
Ответы с готовыми решениями:

Background в Div'e
я хочу сделать кнопки в менюшке с помощью ДИВ и заранее заготовленной картинки...

Background Div-а
Не так давно начал разбираться с CSS и это моя первая верстка, поэтому...

Блок div с background
Добрый день! У меня есть &lt;div&gt;, которому я задал фоновую картинку через css....

Не отображается background-image у div
Не отображается background-image у div c классом nav-item. Все изображения...

Не работает background у блока div
Добрый день уважаемые форумчане! Прошу помочь со следующей проблемой: не...

7
aj17
282 / 272 / 154
Регистрация: 02.06.2014
Сообщений: 1,020
18.07.2014, 14:09 2
CSS
1
2
3
4
.poster
{
background-size:cover;
}
или задайте точный размер для section
0
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.07.2014, 14:44  [ТС] 3
aj17, section имеет высоту 800px и ширину 100%
При анимации background-position видна обрезанная картинка по блоку.
0
Sabio
57 / 57 / 14
Регистрация: 24.06.2013
Сообщений: 265
18.07.2014, 16:30 4
А какого размера картинка?
0
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.07.2014, 22:44  [ТС] 5
Sabio, 2048x1365
0
Sabio
57 / 57 / 14
Регистрация: 24.06.2013
Сообщений: 265
19.07.2014, 00:08 6
И вы хотите в 800 пикселей поместить 1365? Правильно понимаю? Смотрите в сторону background-size и подберите себе значение, подходящее под ваши цели.
0
ilyad3
1 / 1 / 2
Регистрация: 09.05.2014
Сообщений: 38
19.07.2014, 23:15 7
попробуйте поиграться с min-width и min-height
0
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
21.07.2014, 18:13  [ТС] 8
Вот код:
HTML5
1
2
3
4
5
6
<header id="header">
    <section>
        <div id="poster" style="background-image: url(image/100530.jpg);">
        </div>
    </section>
</header>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#header{
    overflow: hidden;
    width: 100%;
    height: 800px;
    position: relative;
}
#poster{
    position: fixed;
    z-index: -99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
        -moz-background-size:cover;
         -o-background-size: cover;
            background-size: cover;
    background-repeat: no-repeat;
    -webkit-animation: header_bg 15s  linear forwards;
    -moz-animation: header_bg 15s  linear forwards;
    -ms-animation: header_bg 15s  linear forwards;
    -o-animation: header_bg 15s  linear forwards;
    animation: header_bg 15s  linear forwards;
}
При смещении картинки при помощи background-position картинка обрезается
0
21.07.2014, 18:13
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.07.2014, 18:13

background растягивается на соседний div
Вот код: &lt;div style=&quot;float: left; padding: 8px;&quot;&gt; &lt;a...

Настройка div с background-image
Подскажите пожалуйста как сделать так что бы фоновая картинка установленная в...

Вложенные div с разными background
Здравствуйте, подскажите пожалуйста решение вот такой проблемы. Есть один блок,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru