How to Make Your Background Image Fill the Whole Page

I have come across a lot of blogs that have a graphical background image that doesn’t repeat and doesn’t fill the whole page. Often times these people pick a background image that looks perfectly fine on their computer, but on a larger screen it’s obvious that the image doesn’t fill the whole page. It can make the layout look a little unattractive!

So today I’m going to teach you how to make your background image fill the whole page, regardless of the size of the screen!

Before

On Star Ships and Dragon Wings - Before

See how the background just ends? And then it turns into the background colour, which is green. This abrupt cut-off can make your blog look unattractive and less professional.

After

On Star Ships and Dragon Wings - After

This time the image fills the ENTIRE screen! It looks so much better!! This is clearly how the page was meant to look.

How it’s done

This is actually EXTREMELY easy to do! All you need is to add a bit of CSS to your blog like this:

body {
background-size: cover;
}

* This bit of code is supported in all modern browsers. It may not work in older versions (particularly IE8 and below).

It’s like magic!

Be sure to pass this onto your friends or any blogs who don’t have a background image that fills the whole page! It’s a super easy fix and I want everyone to have beautiful background images, regardless of monitor sizes!

** Huge thanks to Anya at On Starships and Dragon Wings for letting me show her before and after pics! **

Photo of Ashley
I'm a 28 year old California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

41 comments

    1. I’m using a 27′ iMac, and if I blow up my browser (Chrome) full screen, your background cuts out and there’s a white column on either side of my screen. But I’m probably the exception, moreso than the rule. Figured I’d give you the heads up, since you thought you were in the clear!

  1. I’m taking a web design elective this year and it really hasn’t done much for me in terms of my knowledge of code and stuff but whenever I’m using Dreamweaver to do the websites sometimes the background just stops after a certain point because I didn’t set it on repeat (and it annoys the ever loving crap out of me) so thanks for showing me how to fix that, Ashley! πŸ˜€ <33

    Eileen @ Singing and Reading in the Rain recently posted: Stacking the Shelves (59)
    1. If you have one big image (like in the example) then it’s a lot better to use this method than just setting it on repeat anyway! Because images like that one aren’t meant to repeat so you’d very obviously see the “seams”, which is just as unattractive!

      So if you have a background that’s repeatable (like my background with the shapes), then set it on repeat.

      If you have one big image like Anya does in the example, then use the “cover” bit of CSS! πŸ˜€

    1. Absolutely! You just have to target a different element. So you have to figure out what class or ID your header/footer has and use that. Example:

      #footer {
      background-size: cover;
      }

      That would target an element with the ID “footer”. πŸ™‚

  2. THANK YOUUU! I’ve had this problem for so long that I started using images that were easy to repeat just so that I *could* repeat them since they never filled the screen. And since getting a desktop, I realize that not everything that looked good on my laptop looked the same to others. Sweet relief haha. :]

    Sierra recently posted: Antigoddess by Kendare Blake
    1. Not in cPanel. You have to put it in your site’s code files. If you’re using WordPress, install Jetpack and enable the Custom CSS feature. Then put the bit of code there.

    1. The “cover” background-size option is defined like this:

      Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

      So the desired effect is to have the whole background area covered by the background image (both width and height-wise).

      If you don’t want that, you could try background-size: contain; instead, which is defined as:

      Scale the image to the largest size such that both its width and its height can fit inside the content area

      So it won’t necessarily fill the whole page, it will just fill it so that both the width and height can bit, but not necessarily both of them fill the whole area.

  3. Hi! Im working at my blogspot blog and i donΒ΄t know how to put this code in my html template πŸ™
    ΒΏWhere i need to put this?
    Thanks very much!

    1. If you go to customize your template, there should be an option somewhere (maybe in the “Advanced” section?) for custom CSS.

      Sorry I can’t be more specific; I don’t use Blogspot.

    1. The picture will always be proportionally scaled to its original size. So the picture itself won’t stretch. But the goal is to have every inch of the background covered, so that means parts of the picture may be cut off. That’s better than having the picture stretched/distorted to fit the screen size.

    1. The image is full screen for me. πŸ™‚ If you’re not seeing the changes then maybe your browser has cached how it was before and you need to do a few refreshes.

      1. Actually, maybe I’m not explaining well. I mean that light off-white background is cutting off randomly.. I’m not talking about the picture of my face lol.

            1. You have that section of the content set to off white in your code.

              Sadly this goes outside of the scope of free help I can offer since it doesn’t have anything to do with this blog post.

  4. Hello πŸ™‚

    I am starting to build up my own blog and using a bought DIVI theme .. just like you I guess..
    I really like the feature you made where you have framed your general text, like it was written on a piece of paper.

    my question is: How did you frame your text? I would like to do it on my block as well, however not as written on paper but on a block of wood instead.

  5. Hi,
    I use your recomendation to fill my entire page with my uploadet photo,but the prblem is i still have black boarder line at the bottom of the page then i scroll,is it bicouse i dont tile picture or something else,or is not posiblle to have endlles photo picture then scrolling?does it have to be some pattern only picture? Please help,thank you.

    Jonas

Recent Posts

    Random Posts