replace white background with images

Travelify
#1

Hi,

I love the travelify theme. I’m a first timer at setting up my own website using wordpress theme.
The forum has been most helpful. However I need to customize certain aspect of the theme as I find that it has too much of a white background.

I have attached the following image.

basically, I have 3 questions.

  1. How can I replace the white background with the Travelify wordings with an image? (the black box)
    What are the dimensions for the image to fit into the box. Can I still see the wordings over the image?

  2. How can I replace the white background of the shaded region with an image? Would appreciate if you could provide the dimension for the image as well.

  3. Last but not least, how do I replicate the social media sharing icons as seen on your demo in the top box above the menu bar.

Thank you and cheers to the good work done.
Lim

#2

  1. You can use custom header image which you can find under Appearance - Header, but you will have to slightly edit that header area since image itself will be place right below header content.
    There are several form thread on this already, just to name few of them:
    https://colorlibsupport.com/t/how-to-reduce-header-paddingmargin-on-top-in-travelify/
    https://colorlibsupport.com/t/how-to-remove-white-space-around-header-images-and-or-logo-in-travelify/

  2. If you mean that yellow shaded area then you can replace it by adding this to Theme Options - Other - Custom CSS
    #main {
    { background-image: url(‘https://colorlib.com/travelify/wp-content/themes/travelify/images/background.png’); background-repeat: repeat; background-position: top left; background-attachment: scroll;
    }
    There is no recommended dimensions for that area since it is dynamic and it will depend of number of posts, your post length, image size, etc. The best approach is to use a tiny pattern image and repeat it unlimited times. Theme demo use this approach for background image.

YOu can replace default background image via WordPress Dashboard - Appearance - Background.

  1. Social media icons can be added via Appearance - Theme Options - Social Links. Just copy/paste your links in the right fields and save changes. No rocket science here.
#3

Thank you so much for the quick reply.

I managed to fix it using the second link provided.

It definitely took care of the excessive white background.

Many thanks