Background image in <body> element not being responsive

HTML & CSS
1

Taking a look here, I do not see it resizing on mobile/tablet devices. I took a look at this post and went here, but didn’t see a solution.

My code:

body.home {
    background: #457dc8 url("../images/image.jpg") no-repeat fixed left top / cover ;
}
2

This is what I do → 

img {
   width: 100%;
}

and if you want to constrain you image to a specific size then simply do → 

max-width: 640px;

for example.

3

But @toad78 is referring to a background image, which can’t be affected by the CSS, right?

I can see the image resizing until about a width of 950px then it stops.

1 Like
4

Oops…did read OP post very well…me bad.

5 
background-size: 640rem 320rem;

as an example…

6

How will using rem on the background help the background image to resize according to the size of the browser window?

1 Like
7

The OP has the bg image set as background-size: cover;, as shorthand in his background property that was posted.

He is just having trouble with an (unknown) mobile/tablet device.

1 Like
8

Would the size of the mobile screen been fluid compared to screen size of the mobile size. Oh I forgot you would have to convert px to rem. The only other option would to be use javascript or some other HTML to constrain the background image.

This is what I do for my logo:

<h2 class="logo"><span>Pepster's Place - Circle of Life</span> <a href="index.php"></a></h2>

    /* LOGO STYLING */
    h2.logo {
        display: inline-block;
        position: relative;
        top: 0;
        left: 30px;
        width: 100%;
        max-width: 200px;
        height: 200px;
        background-image: url(../images/img-logo.png);
        background-repeat: no-repeat;
        background-position: center;
        padding: 0;
        margin: 0;
    }
    h2.logo a {
        display: inline-block;
        z-index: 100;
        width: 100%;
        max-width: 288px;
        height: 200px;
        padding: 0;
        margin: 0;
    }
    h2.logo span {
        display: none;
    }

could be probably done with other html tags other than the anchor tag? (I think)

9

I think what you are seeing is the image being clipped when the image and container have different dimensions.

You can actually create that same scenario on a desktop when you drag your viewport out of the images aspect ratio. Drag your desktop browser to an upright rectangle (like a tablet) and you get the same results.

Mozilla developer on background-size: cover says this …

cover

A keyword that is the inverse of contain. Scales the
image as large as possible and maintains image aspect ratio (image
doesn’t get squished). The image “covers” the entire width or height of
the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

10

I would suggest that you set up a media query and use contain for mobiles and tablets.

@media screen and (max-width: 760px) {
    body.home {
        background: #457dc8 url("../images/image.jpg") no-repeat fixed center top / contain ;
    }
}

You’ll have to set the max-width where you decide the breaking point needs to be. I just set 760px as a starting point.

1 Like
11

Using cover will make the image responsive and resize. But depending on the aspect of the image and the screen, you may not see the image resize when altering screen size in one dimension.
For example, if the image is landscape and in your browser you simulate a portrait screen and narrow the browser width only, the image size won’t alter, because it covers the height which remains constant. Adjusting the browser height, you will see the change.

12

Just back from holiday so have misread the question but background-size cover and background-attachment fixed are not compatible with ios when used on the same element.

You can instead use an element that is fixed positioned and then apply a normal background image with cover applied.

here’s the old demo.

2 Likes
13

After doing some tests with that approach I have come to realize that the image itself should be changed too.

Even with all the css3 background sizing options, this really comes down to selecting a bg image with an aspect ratio that is relatively close to your targeted viewport.

For desktops and normal users (unlike us who drag their browsers around in all different aspects) you would be somewhat safe serving a landscape shaped bg image and using cover.

For mobiles/tablets I would think that a bg image of reduced px size and a portrait shape would give you a head start on how you expect it to scale. In that case you should still be able to use cover while only changing images in a media query.

I stumbled on a pretty good article about fixed and fluid aspect ratios, about 4 yrs old but still relevant.

Responsive background images with fixed or fluid aspect ratios

14

PaulOB:

This method worked very well with all devices. Thank you for the suggestion.

Ray.H:
I do believe in your suggested practice, which I did implement with other elements (i.e., Our Classes), including the body.home.

Thank you very much, gentlemen, for your help.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.