I have a website that uses the image as a background throughout the page. To do this, I use the new CSS3 specification "background-size", which is set to "cover".
background-image: url(/images/House-Remodel-Ideas2.jpg); background-repeat: no-repeat; background-size: cover;
In general, this works well, but I noticed that if the window starts to get too narrow (and this is a fairly wide image, so even 1024x768 is "too narrow"), then the image stops filling the page, and instead I see the background color of the page.
This view destroys the appearance of the page. Although I believe I can get creative in both the size of the image and the overall page design, it would be nice if it worked as expected. I am fine with viewing the image or cropping, but I'm not sure if it is too small and leaves the page background.
Is there any way to fix this to prevent this from happening?
An example was requested, so ... here is the image I'm using: http://i.imgur.com/igLMC.jpg
And here is the HTML:
<!DOCTYPE html> <html> <head> <style type="text/css"> body { background-image: url(house.jpg); background-size: cover; background-repeat: no-repeat; background-color: red; } </style> </head> <body> </body> </html>
I put an unpleasant red background behind the image to demonstrate the problem. If it works correctly, you should not see red color. So run the above and then resize your browser so that it is very thin and tall. You will see a lot of red under the image. This is problem.
As an update, during testing, removing DOCTYPE seems to fix the problem. I'm not smart enough to tell you why. :)
source share