Stretching an Image Horizontally Accross the Entire Screen with CSS

I recently ran into an issue where I wanted to stretch an image (think a color border) all the way across a webpage (horizontally). This was a bit tricky, so I figured I’d share my fix.


  1.  We made a big image, this isn’t necessary, but will keep your image scaling well on a larger page.
  2. Set the max-width to 100%
    1. max-width: 100;
  3. Set the max-height to auto
    1. max-height: auto;
  4. Now set the height and width of the image in pixels
    1. width: 3840px;
    2. height: 17px;

That’s it! You should no have a responsive, full width image for your page. Below is the HTML and CSS.

<div class="colorbar">
<img class="lpimg" src="ColorBar-Lrg.jpg" alt="" />
  max-width: 100%;
  max-height: 100%;
  width: 3840px;
  height: 17px;
  position: relative;

Leave a Reply

%d bloggers like this: