Абсолютный CSS-изображение - 100% Ширина и высота

-4

Я создаю следующий веб-сайт для клиента на основе темы WP premium. Как вы можете видеть, я пытаюсь настроить его так, чтобы изображения могли быть применены в полноэкранном режиме.Абсолютный CSS-изображение - 100% Ширина и высота

http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/about/

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

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

источник

2015-01-27 pealo86

Прежде всего, вы не должны загружать свою заднюю панель круглый как img. Загрузите его с помощью атрибута background-image на некоторый фиксированный позиционированный элемент. Таким образом, когда изображение недоступно, у вас не будет уродливого заполнителя браузера, говорящего [image-not-found].

Во-вторых, всякий раз, когда у вас есть элемент, установленный на ширину 100% и добавляющий к нему прокладку, он будет переполняться по оси x. Если вы этого не хотите, установите overflow-x для скрытия на его родительском объекте, как предположил @abforce.

Лучший способ добавить полное фоновое изображение - добавить его в качестве фона в фиксированный позиционированный div, который является прямым потомком элемента body.

Вот пример:

<body> 
    <div class="full-background"></div> 
    <!-- Here goes your content... --> 
</body>

CSS:

.full-background { 
    position: fixed; 
    background-image: url('link-to-your-image'); 
    background-size: cover; 
    top: 0; 
    width: 100%; 
    height: 100%; 
}

источник

2015-01-27 13:53:07

идеальным спасибо! : D – pealo86

Возможно, вы захотите установить изображение как фоновое изображение с помощью CSS вместо элемента IMG.

#content-wrapper { 
    background-image: url('http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/wp-content/uploads/2015/01/iStock_000008484482Medium.jpg'); 
}

источник

2015-01-27 11:15:43 Sevanteri

Добавить это правило к вашему body

body { 
    overflow-x: hidden 
}

источник

2015-01-27 11:16:18

Вы можете установить его в качестве фонового изображения:

.background-photo{ 
    background: url('url_to_image') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

источник

2015-01-27 11:16:40 Seba

вы можете использовать изображение в качестве фона в тело тега ширина фона размер установите таким образом, чтобы изображение соответствовало вашей странице.

источник

2015-01-27 11:18:07

Абсолютный CSS-изображение - 100% Ширина и высота

ответ

Смежные вопросы