0

I have a 4496x3000 image I am using for a background image. It's responsive until it get down to about 1190px at which time it's not. I thought maybe creating a media query and using a smaller image would help but it did not. What is wrong with my code that makes it stop being responsive? 

body, html {
    margin: 0;
    padding: 0;
    width: 100%      
}

.bgimg {
  width: 100%;    
  background-image: url(../img/pexels-photo-Original-4496x3000.jpeg);  
  opacity: 0.65;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-color: #464646;   
}

@media only screen and (max-width : 1190px) {
    .bgimg {
        background-image: 
            url(../img/pexels-photo-medium-1280x854.jpeg); 
    }
}
<body class="bgimg">
Alireza
  • 2,319
  • 2
  • 23
  • 35
comfortablyNumb
  • 195
  • 1
  • 17

1 Answers1

0

I tried the code without media query and it worked well i.e. made my background image responsive. You should try using another (bigger) image and without using media query.

shaina
  • 212
  • 1
  • 10
  • Yes, I only put a media query on it in a fit of desperation. It's definitely not working on my machine so I will take your advice and try another image. I thought that 4496 x 3000 was big. What size would you suggest for a background image? – comfortablyNumb Jul 01 '17 at 04:01
  • Yeah, 4096 x 3000 is quite big. I tried with image of size 2048 x 1536 and it worked. Which browser are you using? – shaina Jul 01 '17 at 04:34
  • Great! Did you get what was the problem with your last image? – shaina Jul 01 '17 at 05:21
  • @shainasabarwal I knew it was a big image but when I did research on what the optimal size of a background image should be it was greater than 3000 x 3000. this would ensure it works well on all screen sizes. I tried it in Chrome, Firefox and Edge. No, I have not figured out the problem yet. It was late so I went to bed. I plan on working on it today. I'll give your image a try. Thank you for your help – comfortablyNumb Jul 01 '17 at 13:37
  • @shainasabarwal I used the image you provided. First I copied it to my computer and tried it from there and none of them were responsive. I then used the http address and tried it that way and it worked correctly in Edge and Firefox but not Chrome. I uninstalled and reinstalled Chrome but that did not help. Oh well, since it works on yours and the other OP that answered, I'll trust that it's working properly. – comfortablyNumb Jul 01 '17 at 14:32