Фон не будет охватывать весь div

Question

Фон не будет охватывать весь div

0

Поэтому у меня есть небольшая проблема с сайтом, который я модифицирую для клиента: http://gator3094.hostgator.com/~sunhome/staging/.

Как вы можете видеть, фоновое изображение, которое я помещаю в теги <header></header> не растягивает полную высоту div.

Вот ссылка на мой CSS файл (все остальное - только Foundation Foundation Framework): http://gator3094.hostgator.com/~sunhome/staging/wp-content/themes/sunpower_theme_sunsolar/library/css/custom.css

Вот также код CSS, который я использую для этого раздела сайта:

header { 
    background: url('http://gator3094.hostgator.com/~sunhome/staging/wp-content/uploads/home-bg2.png') no-repeat center center fixed; 

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

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

Надеюсь, это просто супер простое решение. Я бы очень признателен за любую помощь.

Keenan Payne 25 нояб. 2013, в 03:21

Источник

Теги:

html

css

html5

css3

background

1 ответ

Ещё вопросы

agconti · Accepted Answer · 2013-11-25T00-28-00.000Z

Ваша проблема связана с отсутствием соответствующего обрезания фонового изображения.

Попробуйте это с помощью тега заголовка:

header { background: black;}

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

Все еще не верьте мне?

Попробуйте заменить его следующим:

header { background: url("http://placekitten.com/1800/950");}

Это было так просто, большое спасибо. Думаю, мне следовало бы отдохнуть от того, чтобы смотреть на один и тот же код в течение 8 часов, и, возможно, я мог бы сам это понять, ха-ха.
@KeenanPayne нет проблем! дополнительная пара глаз всегда помогает.