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.

HTML5_logo_and_wordmark.svg

  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="" />
</div>
<style>
.colorbar{
  max-width: 100%;
  max-height: 100%;
  width: 3840px;
  height: 17px;
  position: relative;
</style>



Leave a Reply

Your email address will not be published. Required fields are marked *