Как сделать контейнер на 100% ширины страницы?

Question

Я озадачен тем, что делаю. Во-первых, посмотрите на мою крошечную сниппета:

HTML:

<div class="image_container"></div> 

CSS:

.image_container { 
background-image: url("images/wall.jpg"); 
height: 120px; 
width: 100%; 
} 

Что я использую выше, чтобы иметь контейнер с изображением в качестве фона, который будет принимать вся ширина экрана пользователя, так как я использую ширину: 100%. Но на моем 13-дюймовом Mac это выглядит так, но когда я перехожу на гораздо больший экран, изображение отображается частично, но не занимает 100% экрана. Почему он, несмотря на использование ширины 100%, все равно не займет всю ширину?

Я попытался посмотреть, могу ли я использовать background-repeat: repeat-x, но это просто повторяет изображение, и оно выглядит ужасно. Что еще я могу сделать или есть другой подход?

Answer 1

Поскольку вы устанавливаете ширину для div, а не изображения. Попробуйте background-size: cover;

Oh ... и container действительно должно быть class.