-1

I am trying to create a responsive background image which fills the entire page. I followed the CSS from this question which worked fine for me. 

  background: url(captiveportal-back.jpg) no-repeat center center fixed;
      -webkit-background-size: 100%;
          -moz-background-size: 100%;
              -o-background-size: 100%;
                  background-size: 100%;
                      -webkit-background-size: cover;
                          -moz-background-size: cover;
                              -o-background-size: cover;
                                  background-size: cover;
}

However I would like to center the image differently in portrait mode (so as to bring a different section of image in to focus).

The bing website does this all the time, every time centering at different pixel as per the background image. How can it be done?

Community
  • 1
  • 1
Benny
  • 639
  • 3
  • 11
  • 25
  • I am not averse to coding as I figured out most of the code of my page myself. Neither am I expecting a code writing service. It is sufficient to point in the right direction. While your expectation is right most of the time it doesn't apply when one doesn't know where to start, which technique to use. – Benny Mar 17 '16 at 14:17
  • 1
    @Benny - Your entire question is "*I'd like to center the image differently in portrait mode.*" Everything else is fluff. Please expand your question to explain **exactly** what you are having trouble with, and why the included code isn't working. – JDB Mar 17 '16 at 14:22

3 Answers3

1

maybe you need you a media query.. if you have some code maybe we can help you more.

@media all and (orientation: portrait) { 
    #div background-position { ... }
}

@media all and (orientation: landscape) { 
    #div background-position { ... }
}
fabiovaz
  • 516
  • 2
  • 9
1

You're gonna have to use medias queries to detect the resolution of the device. For example, to detect a mobile in portrait mode with max 480px :

@media only screen and (max-device-width: 480px) and (orientation: portrait) {
}

Then you're gonna have to change the background-size: cover. That property don't let you change the position of the image since it uses the best configuration possible to cover the entire space. You're gonna have tweak the numbers to fit your image. For example, if your image is a landscape (width > height), use :

background-size: auto 100%;

This will make the image fill up the entire height. You can then place it using background-position. For example, top have your image align to the left :

background-position: left top;
qbeauperin
  • 591
  • 4
  • 21
1

Finally figured out that it can be done by creating different image versions for different viewports. The srcset attribute allows us to select different images for various viewports. As mentioned by others, media queries need to be used in conjunction to achieve this.

Here is a microsoft blog post explaining the end-to-end solution:

https://blogs.windows.com/msedgedev/2015/10/07/using-extended-srcset-and-the-picture-element-to-tailor-your-image-to-every-device-and-layout

Benny
  • 639
  • 3
  • 11
  • 25