Background и div

@sweelemk · Регистрация: 16.09.2013

Author24 — интернет-сервис помощи студентам

Доброго дня! Имею следующую структуру:

HTML5

<section>
    <div id="poster" style="background-image: url(image/bikecycle-header-background.jpg);">
    </div>      
</section>

Как сделать, чтобы section не обрезал background-image? И все это должно быть адаптивно. Спасибо большое!

@aj17 · 18.07.2014, 14:09

CSS

.poster
{
background-size:cover;
}

или задайте точный размер для section

@sweelemk · 18.07.2014, 14:44 **[ТС]**

aj17, section имеет высоту 800px и ширину 100%
При анимации background-position видна обрезанная картинка по блоку.

@Sabio · 18.07.2014, 16:30

А какого размера картинка?

@sweelemk · 18.07.2014, 22:44 **[ТС]**

Sabio, 2048x1365

@Sabio · 19.07.2014, 00:08

И вы хотите в 800 пикселей поместить 1365? Правильно понимаю? Смотрите в сторону background-size и подберите себе значение, подходящее под ваши цели.

@ilyad3 · 19.07.2014, 23:15

попробуйте поиграться с min-width и min-height

@sweelemk · 21.07.2014, 18:13 **[ТС]**

Вот код:

HTML5

<header id="header">
    <section>
        <div id="poster" style="background-image: url(image/100530.jpg);">
        </div>
    </section>
</header>

CSS

#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 картинка обрезается

@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 2 / 2 / 2 Регистрация: 09.05.2014 Сообщений: 38
	19.07.2014, 23:15	7
	попробуйте поиграться с min-width и min-height 0

	21.07.2014, 18:13