Why is my container background image so zoomed in?

Question

I am having an issue with my background image of a container being zoomed in on the browser. The picture is 1200px wide and my container is also 1200px

Answer 1

You need to specify a few more properties for your background-image like this:

.container {
  width: 1200px;
  height:600px;
  background-image: url("img/background.jpg");
  background-size: cover; /* or contain depending on what you want */
  background-position: center center;
  background-repeat: no-repeat;
  text-align:center;
  margin:auto;
  padding:0;
}