Craig Craig - 3 months ago 14
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:

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:

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)?


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(;
  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 style="padding-left: 20px;">

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.