Viewing 4 replies - 1 through 4 (of 4 total)
  • Yes it can be done.

    1. Create a child theme if you don’t already have one.
    2. In functions.php of your child theme, add the following code:

    add_action('get_footer', 'insert_bottom_background');
    function insert_bottom_background() {
    	echo '<div class="bottom-background"></div>';
    	}

    3. In style.css of your child theme, add the following code (assuming your images are called top_background.png and bottom_background.png and are both placed in the folder img, in your child theme’s folder. I also assumed your bottom background image is 60px high. If it’s higher or lower, modify the height declaration of .bottom-background in the code below):

    #main-wrapper {background: transparent url('img/top_background.png') no-repeat center top;}
    .bottom-background {background: transparent url('img/bottom_background.png') no-repeat center top; height: 60px;}
    Thread Starter GreenFuelsBio

    (@greenfuelsbio)

    Works fine, but can i make the background image fill 100% width of the page?
    I can change the height and transparency through css? or I have to modify the image with an image editor?
    thanks.

    Afaik, resizable backgrounds are not possible through CSS. A workaround would be to place img tags behind the content and resize them relative to the page width, using javascript, but that’s far beyond the scope of this forum.

    If you change the image with an editor it won’t cover 100% of other screens. In your case I’d say a width of about 800px would look decent on all resolutions, cropped on small screens and covering content width on larger ones.

    As a sidenote, your backgrounds would look better if you replaced the white part with transparency using a photo editor and saved them as png’s.

    Thread Starter GreenFuelsBio

    (@greenfuelsbio)

    Thanks for the help, I think it has been so good, you think? https://www.greenfuelsbio.com
    This topis is resolved.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to add jpg watermarks in all pages’ is closed to new replies.