Craig Craig - 1 month ago 6
CSS Question

Responsive banner image for all resolutions

I am trying to have a banner image, spanning 100% width of the screen
An example of what I want to achieve is found here:

http://www.aha.io/roadmapping/where-aha-fits

Look at it in full screen. The banner is 100% width, and maybe 15% of the screen height.

When you shrink the window size, the banner still uses 100% of the screen width, but seems to crop the left size, I think, and reduced in height, maintaining the screen height of around 15%.

I created a demo of what I am trying to do here:

http://www.bootply.com/Hrxwy8BjTT

What I end up with is, in 'mobile' version, a very very thin banner.

How can I make it crop a bit, and maintain around 10% (in my case) of the screen height (And not creating a scroll bar)?

Answer

This would be a good case to use Media Queries.The code below targets specific widths in a mobile-first pattern. This way the style for #background depends on the width of the device.

#background {
  background: url(http://snowdebts.com/images/banner-thin.png);
  background-position: center;
  background-size: cover;
  height: 225px; width: 100%;
}

@media (min-width: 480px) {
    #background { height: 200px; }
}

@media (min-width: 768px) {
    #background { height: 150px; }
}

@media (min-width: 992px) {
    #background { height: 100px; }
}

I took the liberty of removing your image tag, and setting it in CSS instead. So, for your HTML, you need the following:

 <div class="tab-content">
   <div id="background">

   </div>
   <div style="padding-left: 20px;">
     Hello
   </div>
</div>

You can modify the heights into percentages or fixed widths depending on what you need. Also, since we've set up the image as a background for the div element, we don't need to worry about the scroll bar, just the size of the div.

Comments