Announcement

Collapse
No announcement yet.

Bootstrap - Different image backgrounds for different breakpoints… where is a bug?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Bootstrap - Different image backgrounds for different breakpoints… where is a bug?

    I want to display two different background images per device, have a code, but it doesn't work properly...

    where is a bug?
    Code:
    @media (max-width: 720px) {
      body {
        margin: 0;
        background-color: #ff0000;
        background-image: url('img/bg1.jpg');
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 100% auto;
      }
    }
    
    @media (min-width: 721px) {
      body {
        margin: 0;
        background-color: #303441;
        background-image: url('img/bg2.jpg');
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 100% auto;
      }
    }
    Last edited by topvip; 2017-05-23, 06:25 AM.

  • #2
    Check the path to your first image. My images work as it should.

    And I agree with Dan Weber, the code can be simplified:
    Code:
    body {
      margin: 0;
      background-color: #ff0000;
      background-image: url('/images/2015_09_20_iphone_155_x400.jpg');
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 100% auto;
    }
    
    @media (min-width: 721px) {
      body {
        background-color: #303441;
        background-image: url('/images/2015_09_26_iphone_198_x400.jpg');
      }
    }[
    Last edited by Peckham; 2017-05-23, 06:24 AM.

    Comment


    • #3
      Just curious, why are you mixing min-width and max-width?

      Usually, max-width is used when targeting desktop first and then working down to mobile.

      min-width is used to target mobile first and work your way up to desktop.
      I've changed the exact screen size a bit since 1px is harder to get difference on when resizing, but same concept. Run this in full page mode.

      So, everything lower than 720 (mobile first) gets first image by default. When screen hits 720 it changes and then again at 820 and up.
      Code:
      body {
          margin: 0;
          background-image: url('257779.jpg');
          background-color: #FFF;
          background-repeat: no-repeat;
          background-position: top left;
          background-size: 100% auto;
      }
      
      @media (min-width: 720px) {
          body {
              background-color: #ff0000;
              background-image: url('562760.jpg');
          }
      }
      
      @media (min-width: 820px) {
          body {
              background-color: #303441;
              background-image: url('1439.jpg');
          }
      }

      Comment

      Working...
      X