Full page background image is not responsive

Question

I´m trying to adapt the background image i have on my website but i cannot get it smaller on Iphones, Nexus or whatever small phone i'm testing it. I am using the Chrome developer tools to test this.

Here's a snippet on JsBin: http://jsbin.com/dacamemule/edit?output

The background image is 1920x1080 which would make it too big for small phones but i did tried to create a break point using media queries with the image size set at 768x432 but it still didn´t work. It's supposed to be an image map where the links in it will "stick" in the same place no matter if it's desktop or responsive view. The blue dot with the video is one example. There should be more dots spread throughout the map.

Thanks for your help.

Instead of trying to circumvent the SO rule of posting your code **in your question** when linking to jsFiddle.net, why not just do as you're asked? You chose to highlight meaningless text as code just to avoid doing what the big, red warning box asked you to do. — j08691, May 24 '16 at 20:59
Sorry for the lack of code. I will try to make a fiddle later with all the resources when i get back. — Fab, May 24 '16 at 23:03

score 0 · Accepted Answer · edited May 23 '17 at 12:15

If you want your image to be responsive, you might want to remove the min-width:1024px rule from img.bg. Perhaps replace it with min-width: 100%; max-width: 100%; height: auto;?

However, if you really want to use your image as background, don't use an <img> tag at all. Use the background properties of your <body> or of some helper (container) and make use of the background-size property (and the required prefixes).

Proof of concept:

body {
  background:white url("http://s33.postimg.org/loiuxh5wf/Fundo.png") no-repeat center center;
  -webkit-background-size: contain;
     -moz-background-size: contain;
       -o-background-size: contain;
          background-size: contain;
  min-height:100vh;
  margin: 0;
  padding:0;
  overflow-x: hidden;
  font-family: sans-serif;
}
.someLinks {
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
          align-items: stretch;
  -webkit-box-align: stretch;
     -moz-box-align: stretch;
      -ms-flex-align: stretch;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.someLinks>a {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 0 45%;
      -ms-flex: 1 0 45%;
          flex: 1 0 45%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  color: red;
  text-decoration: none;
}
.someLinks>a:hover {
  background-color: rgba(255,0,0,.35);
  color: white;
}

<div class="someLinks">
  <a href="#" onclick="return false">link</a>
  <a href="#" onclick="return false">link</a>
  <a href="#" onclick="return false">link</a>
  <a href="#" onclick="return false">link</a>
</div>

This is just an example. Replace the links with your actual links and remove their onlick property when you want them active.

As of now, your desired outcome is unclear and this might not fit your purpose. Please create a Minimal, Complete, and Verifiable example of your problem, properly linking all your resources. Right now, the contents of video.js, index.html and style.css are unknown to us. And so are the images you are overlaying.

Andrei thank you for your answer. It now adapts to every screen. The reason i wanted to use a background image using the tag was to create an image map with the links and would use an imageMapResizer plugin that calculates the new coords wherever the image is scaled. — Fab, May 25 '16 at 22:28

score -2 · Answer 2 · answered May 24 '16 at 21:21

-2

change position "fixed" to "relative" on your image css.

answered May 24 '16 at 21:21

Noah

80
8

**`position:relative;` makes an image responsive**. That's a very bold statement. Could you please document it? And test, perhaps? – tao May 24 '16 at 22:11
Apologies. I read the question wrong. I didn't realize it was background image as the image was not attempting to be a background on the fiddle. You are correct, simply giving an element a certain display will not make it responsive, but with his fixed display, the other elements were not flowing correctly. Relative position fixes that issue. Again, if I had realized he wanted the image to be a background, my answer would have been different. Apologies – Noah May 24 '16 at 22:30

Full page background image is not responsive

2 Answers2