0

I have a large background image that is a specific height and width which I'm happy with for desktop. I'm using background position centre top atm, so I can see the entire image but width is cropped as browser width is reduced.

There is a specific central part of the image that is the focus, so once I reach a specific browser width (around 1000px - where the image is cropped on the width), I'd then like that viewable area of the image to respond down to mobile retaining the visible cropped width that the browser has dictated... is this possible?

Many thanks

GibboK
  • 71,848
  • 143
  • 435
  • 658
Goardo
  • 49
  • 12

1 Answers1

0

I dont know what you exactly mean but I think that you want to use a media screen.

 @media screen and (max-width:1000px) {
        img{
           width:100%;
        }
    }

Reply on the post if you mean something else I will help you out :)

Bart Bussel
  • 176
  • 1
  • 2
  • 12
  • Can you please leave the code so I can work it out I would prefer in a JSfiddle – Bart Bussel Feb 15 '16 at 10:33
  • Hi there, I think you may be right that this is what I need, however, I want the image to retain it's crop (from the browser width being smaller), so I may just need to set the image width larger. Will let you know if this resolves it. Thanks - apologies, that last comment was incomplete when posted – Goardo Feb 15 '16 at 10:44