Full size background image

Full size background image

Full size background image

Adding a background via Blogger Theme Designer will show the image in it’s original size. Regardless if it’s your own image or one of theirs, it’ll be shown with the size it actually has and that could mean that your background image doesn’t cover large screens properly.

Of course you can make your image larger in a photo editing software like Photoshop etc, but doing so will make it only show the middle part on a small screen. Too small or to big background, how do you choose? The simple answer is that you don’t have to.

By adding a small snippet of code in your Theme Designer you can have a background image that fits all screens.


This is what you do


Go to your blogs Theme Designer.



Choose AdvancedAdd CSS.


In the code area you add this code:

body {
background-size: 100% 100%;


In case you uploaded your own picture, there are a few settings you need to address before you leave the Theme Designer.

First up is Alignment. Try the different settings to get the effect you prefer.

Next is Tile. If an image is to small you can tile it, either both ways or just horizontally or vertically. As we don’t wan’t our image to tile, set it to Don’t tile.

Last up is Scroll with page. If you have a seamless pattern as a background, it looks nice if your background scrolls down with the text in your blog, but if you have a photograph, it doesn’t look to good when the photo ends. Make sure this box isn’t ticked.



When you are done, click Apply to blog in the right upper corner.

Now your image will cover your visitors screens, regardless of what size they are!

Close Menu