CODEWITHSUNDEEP
htmlcss
Ditto
Ditto

Reputation: 296

Screen resolution guidance to newbie

I was provided with an image 1920 x 1080 to use as a background for the main container on the page:

<div class="container"></div>
<style>
    .container {
        background: url("background.png");
        width: 1920px;
        height: 1080px;
    }
</style>

I'm working with a MacBook with resolution 2880 x 1800. But the container is way wider and taller than my browser screen. Why my display's screen resolution is bigger than the image and still can't show this 1920 x 1080 image entirely? Is because is retina? What can I do here? I can't scale background with background-size: contain because some elements are strictly positioned and they will get misplaced when the browser windows resizes.

Upvotes: 0

Views: 93

Answers (2)

Ditto
Ditto

Reputation: 296

So in lack of a better approach (if there is one) what I'm doing is to zoom the page when it's displayed on retina screen:

    .container {
      background: url("background.png") no-repeat;
      width: 1920px;  // the actual width of the background image
      height: 1080px; // the actual height of the background image
    }

    /* for high resolution display */
    @media
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
      body {zoom: 67%;}
    }

If somebody come up with a better solution, please don't hesitate to post it as an answer and I will unmarked this answer as correct and mark the other one as the correct one.

Upvotes: 0

Clayton Engle
Clayton Engle

Reputation: 581

(Sorry, I don't have the reputation to comment, so I'm answering instead).

If you're .container is going to be 1080x1920 no matter what, why not set the background image size to that as well, with a background-position as left top to force it into place?

Whatever your retina display thinks a 'px' unit is, it will match them if they are both set for the background and the container.

<div class="container"></div>
<style>
    .container {
        background: url("background.png");
        width: 1920px;
        height: 1080px;
        background-size: 1920px 1080px;
        background-position: top left;
    }
</style>

Again, sorry, I'm more curious why this doesn't solve it than recommending an actual solution. I just can't submit comments yet.

Upvotes: 2

Related Questions