Фоновое изображение шириной 100%

Question

Фоновое изображение шириной 100%

0

Я пытаюсь сделать фоновое изображение 100% и иметь изображение в качестве фона. Когда я загружаю изображение, он переходит на 100%, но обрезает изображение. Это делает изображение более широким, чем мой экран. Как исправить это, когда ширина изображения составляет 100%, но ширина изображения соответствует экрану без обрезания. Вот мой tumblr, чтобы вы поняли, что я имею в виду (http://ophelialogy.tumblr.com/), и вот полное изображение, чтобы показать вам полное изображение и дать вам представление о том, где он отрезает (http://imageshack.us/a/img7/7103/khb3.png).

Вот мой код: CSS ЧАСТЬ

    /* --- HEADER --- */
#header {
    top: 0;
    left: 0;
    width: 100%;
    {block:IfAdjustableHeader}height:{text:Header Height};{/block:IfAdjustableHeader}
    {block:IfNotAdjustableHeader}height:100%;{/block:IfNotAdjustableHeader}
    position: fixed;
    z-index: 10;
    background-image: url('{image:header}');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/* --- PAGE CONTENT --- */
#page {
    {block:IfAdjustableHeader}top:{text:Header Height};{/block:IfAdjustableHeader}
    {block:IfNotAdjustableHeader}top:100%;{/block:IfNotAdjustableHeader}
    left: 0;
    width: 100%;
    min-height: 100%;
    position: absolute;
    background: {color:Background};
    z-index: 99;
}

.container {
    margin: 50px auto 0px;
    {block:If400Posts}width: 800px;{/block:If400Posts}
    {block:If500Posts}width: 900px;{/block:If500Posts}
}




/* --- POSTS --- */
.postcol {
    width: 540px;
    margin-left: 240px;
}

.posts {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
} 

.posts img, .posts li, .posts blockquote {
    max-width: 100%;
}

Часть HTML

<body>

<div id="header">
<div class="description">{Description}</div>
</div>


<div id="page">
<div class="container">





<div class="postcol">


{block:Posts}
<div class="posts">
</div>

Tessa Wilde 20 окт. 2013, в 21:03

Источник

0

Я не уверен, что это именно то, что вы ищете, но я получил некоторые интересные результаты, используя стиль fluidratio найденный здесь в вашем description div, с возвратом высоты до 400px и, конечно, с URL вашего изображения. (Для этого я удалил стилизацию фона и высоты из #header )
nkanderson 20 окт. 2013, в 19:31

Теги:

html

css

image

tumblr

3 ответа

Ещё вопросы

Я не уверен, что это именно то, что вы ищете, но я получил некоторые интересные результаты, используя стиль fluidratio найденный здесь в вашем description div, с возвратом высоты до 400px и, конечно, с URL вашего изображения. (Для этого я удалил стилизацию фона и высоты из #header )

niico · Answer 1 · 2013-10-20T17-48-00.000Z

использовать:

background-image: url(../images/myimage.jpg);
background-size: cover;

Вы хотите фоновое изображение в заголовке или на главной странице?

В настоящее время он находится в заголовке.

Установите фоновое изображение в теге html, если вы хотите, чтобы он охватывал всю страницу.

Ссылка Nasser, чтобы сделать это, является хорошим (я бы, однако, оставил без внимания браузерные хаки).

РЕДАКТИРОВАТЬ

AHH Вы говорите о ширине.

Я думаю, что это может быть связано с тем, что раздражающий слайдер tumblr поступает справа - это слишком сильно растянуто.

Я предлагаю попробовать эти стили на jsfiddler - или на другом отдельном сайте - вы, вероятно, найдете, что он работает нормально.

sheriffderek · Answer 2 · 2013-10-20T16-25-00.000Z

ТАК...

Какая крышка (на мой взгляд) принимает фоновое изображение и делает все возможное, чтобы использовать большую часть его, что она может в зависимости от высоты или ширины коробки, в которой она находится. Есть два способа справиться с этим. Один из способов - сделать коробку идеальным соотношением для изображения. Другой - фактически использовать img, который растянет коробку до его точного размера. Вот как это сделать. Плюсом версии фонового изображения является то, что вы можете легко обслуживать небольшую версию только на небольших экранах с помощью правила @media.

HTML

<header class="container global-header"></header>

<header class="container global-header2">
    <img alt="banner-thing" src="http://placekitten.com/400/100" />
</header>

CSS

html, body {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    float: left;
}

.global-header {
    width: 100%;

    /* this is hacky - but it is your answer */
    height: 0;
    padding-bottom: 25%;

    background-image: url("http://placekitten.com/400/100");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* you should have this too */
    background-position: center center;
}

.global-header2 {
    width: 100%;
    /* height will be determined by image size */
}

.global-header2 img {
    display: block;
    width: 100%;
    height: auto;
}

FIDDLE

Nasser Torabzade · Answer 3 · 2013-10-20T16-17-00.000Z

это отличное сообщение в блоге объясняет, что вам нужно, без каких-либо сторонних инструментов:

http://css-tricks.com/perfect-full-page-background-image

Кроме того, для этого есть некоторые плагины jQuery, в том числе: