CODEWITHSUNDEEP
htmlcssresponsive-designbackground-imagebackground-position
Cole Davidson
Cole Davidson

Reputation: 67

CSS Background-position not working on mobile

I'm having a problem positioning a background image properly. It works on desktop, and even when I resize the window to simulate a phone it displays correctly, but when I actually visit the website on my phone (tested on Android/Chrome and iOS/Safari) it seems to be ignoring the background-position property.

CSS in question:

.blur {
        background: 
    /* top, transparent blue, faked with gradient */ 
    linear-gradient(
      rgba(43, 43, 43, 0.1), 
        rgba(43, 43, 43, 0.1)
    ),
    /* bottom, image */
    /* BACKGROUND IMAGE */
    url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
  background-attachment: fixed;
  background-position: -350px -150px;
  background-position-x: -350px;
  background-position-y: -150px;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #2b2b2b;
  overflow: auto;
}

@media (min-width: 40em) {

.blur {
      background: 
    /* top, transparent blue, faked with gradient */ 
    linear-gradient(
      rgba(43, 43, 43, 0.1), 
      rgba(43, 43, 43, 0.1)
    ),
    /* bottom, image */
    /* BACKGROUND IMAGE */
    url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
  background-attachment: fixed;
  background-position: -350px 0; 
  background-size: cover;
  background-repeat: none;
  }

@media (min-width: 50em) {

  .blur {
  background: 
      /* top, transparent blue, faked with gradient */ 
      linear-gradient(to right,
        rgba(43, 43, 43, 0.1), 
        rgba(43, 43, 43, 0.1)
      ),
      /* bottom, image */
      /* BACKGROUND IMAGE */
      url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
    background-attachment: fixed;
    background-position: -250px 0; 
    background-size: cover;
    background-repeat: none;
    }

I've searched for solutions and found two suggestions that have helped people it the past: adding background-position-x and background-position-y which didn't help, and moving the background image out of body and into a different container (.blur in this case) which also didn't help.

The website is: https://suzannecowan.ca/.

Thanks in advance for any advice you can provide.

Upvotes: 1

Views: 8052

Answers (2)

ralph.m
ralph.m

Reputation: 14345

Setting your bg image to cover means that it will want to stretch to the height of the screen, which means on a small device that you'll get a very narrow view of it. Personally, I'd either resize the image to be taller and thinner so that it fits better on a mobile screen, or instead set the background size to 100% auto, which looks pretty good imho.

Upvotes: 3

Marc J
Marc J

Reputation: 1433

In Android/Chrome, the background IS being positioned. If you change the value it moves the image. You can also confirm it through the Chrome (mobile) web debugger.

The difference between mobile/desktop comes from the difference in how the two treat those length units.

Upvotes: 0

Related Questions