Responsive background image in header not scaling

See more:

CSS3

responsive

Hi there,

I have been learning how to use media queries for responsive design and it is going well. The issue I am having now is when downsizing to the dimensions for an iPad.

I have a big background-image in a header div which is defined in the CSS. the image fills the full header which also takes up a lot of the screen (hero image).

When I scale down however, the image used is the original image which results in only showing part of the image in a smaller space.

I noticed that when I take off background-size: cover; it uses the correct image (a smaller one), however when I do that there is a large area of white space above the background image.

To check that the header was correct I took off the background image and only showed a background color of red, and the header is the correct size. This is why I am confused about the white space above the background image, because if I could fix this it would work.

/* if iPad (1,2, Mini, 3 and 4) */
@media screen and (max-width:768px) and (min-width: 451px){
	header{
		background: url(../images/image1medium.jpg) no-repeat center center fixed;
		background-color: red;
		margin:0;
		padding: 0;
		height: 20%;
	}
}

I have tried changing the height to 0 but nothing happened. So from the code above the red shouldn't be seen but it is (because of the white space).

Also, I just noticed that when the height dimensions change from a desktop (about 768px high) to iPad (approx. 1024px high) the image starts to fit. When the height dimension gets to 500px the background image fits!

Might it be because I am using % instead of pixels for the height?