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

This works fine!

background:rgb(37, 16, 13) url("images/bc02.jpg");
background-repeat: no-repeat;
width: 100%;
height:100%;
background-position: center center;
text-align:center;
margin:auto;
padding:0;

Answer 2

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;
}