[resolved] How to add jpg watermarks in all pages (5 posts)

  1. GreenFuelsBio
    Posted 2 years ago #

    Hello, I want to add 2 images as a watermark on every page. One for the top, and one for the bottom. If it can be respecting the proportion for each resolution.
    An example, this is the original page:
    I want to make it so that like this:
    Is there any way to do this?
    Greetings and thanks.

  2. acub
    Posted 2 years ago #

    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;}
  3. GreenFuelsBio
    Posted 2 years ago #

    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?

  4. acub
    Posted 2 years ago #

    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.

  5. GreenFuelsBio
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.