Search code examples
cssbackgroundimagemapresponsive

Full page background image is not responsive

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.

Solution

  • 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.