Monthly Archives: April 2016

Big background image?

So you got a big background image and you want to have it size correctly when you play with the screen sizes? Here are two quick ways to do that.

One is you can do this

background: url("./images/melt_down.jpg") no-repeat center center fixed;
background-size: cover;

That will have the background picture cover the whole area.

or you can try this.

background-size: 100% 100%;

That will size the image for you automatically as well. Of course you should play with the margin % sizes.

If these two solutions don’t cut it you can always just use media queries and specify the background image sizes in pixels at certain break points you see. To find your break points just move the browser window from big to small and back and notice sizes where you should change the size of the background or whatever other elements need to be moved. This is completely up to the user but as you do this you will find natural break points that will catch your eye. Thanks for reading!

– Out

Advertisements