CSS Image position/focus

Question

I'm building a website and the image I want to put in the as background I can't put it into the position I want.

I want the 'focus' of the image on the web page to be a few px up to the centre of the image. The width I can see it all, but the height no.

The image resolution is '5760x3840px'.

So, I have this piece of css code for the image's settings.

.topwidget{
  max-width: 100%;
  height: auto;
  background-image: url(../images/welcome_banner_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom 1000px;
  margin-bottom: 20px;
  padding: 50px 0;
}

Answer 1

Try this
.topwidget{
  max-width: 100%;
  height: auto;
  background-image: url(../images/welcome_banner_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  **background-position: center 10px;**
  margin-bottom: 20px;
  padding: 50px 0;
}