I cannot see my background image


I use the Astrid theme for my site www.howtobookyourtrip.com

When I go to customize - background image and try to use an uploaded image as background the end result is that I can only see the top of the picture. I would like the whole picture to be shown, instead of just the top 20% of the image. What can I do to change it?




I think its because the footer background, you can make it transparent using this CSS code:

.footer-widgets, .site-footer, .footer-info {
    background-color: transparent;
.footer-widgets .astrid-3col {
    background-color: rgba(0,0,0,0.5);

You can put the code in: Customize > Additional CSS.


Thank you very much. That partly solved the problem. Now I can see the whole picture BUT still the footer covers it a bit. Can I add something to make the footer stay below the background image?

I think its because your image need to more wide.
But you can try this CSS code first:

   background-position: center top;
   background-size: 100% 100%;

Hope it works.

Unfortunately the footer covers the picture even though I add that code. Is the image to blame? You mention that it “need to more wide”.


I didn’t noticed that you already implement the code in above, or its already removed? if yes, can you re-implement the code again and let me try to fix it for further

For your background image, you are using this http://howtobookyourtrip.com/wp-content/uploads/2017/04/Tuscany-2.jpg right? the image resolution is 577x433, and the recommendation is 1600x1200.


Excuse me, I was a bit too quick. I implemented the code according to your instructions, but deleted it when I found that it didn´t work. But now I have implemented the code again so you can have a look! Still the footer covers the image. I would like the footer to be placed below the image so the whole image could be seen…

Regarding the image size, I waas using the image you linked to. However, now I changed to Tuscany 4 which has a resolution that at least is a bit closer to the recommended one!

Thanks. Okay please see this screenshot http://prntscr.com/ewoehm, those 3 blocks are the footer widgtes, right? and you want to make it downward so you can see the whole background image.

To downward the footer widgets, its depend on the content of your page. But because you only have little content for your home page, maybe you can increase the height of the content using this CSS code below:

.home .site-content {
    height: 500px;

Feel free to adjust the value of the height from the code in above.

Thank you very much. Now it works the way I want. I appreciate all your help!