how to make background image full-appear

Question

I have a problem when I want a header and under it there is an image. When The image width is larger than the header one, a scrollbar appears. When you scroll to right there is blank space in header. here the example problem.

the problem is that every page has image with different width. When I use the largest image width on header, a horizontal scroll appears.

Answer 1

If I were you, il would put the header a fixed size or a 100% width size and do the same on the image.

You can also use the property max-width on the image so that she can't be sized more than 100% : add the following rule (in css) in your fiddle example :

img {
    max-width: 100%;
}

Answer 2

I'm not sure of your exact set up - but if you have the ability to tweak the CSS so that you can create a rule for each page - I'd add the images as backgrounds to your header.

 .header {
     background: url(example.jpg) no-repeat;
     background-size: cover;
   }

 .page-1 .header {
     background-image: url(example-1.jpg);
  }

  .page-2 .header {
     background-image: url(example-2.jpg);
   }

See this page on the background-size property .