[Resolved] body background image only for frontpage-template

Home Forums Support body background image only for frontpage-template

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1001440
    Mika

    Hello

    I am using Premium version and creating child-theme for generatepress theme.

    I have added background image by customise.
    It has added it each page.

    User wants background image only frontpage.

    So I have tried to make via elements

    I have created two elements

    – Frontpage-header, selected custom image
    – frontpage-layout, selected location rule ; display only in frontpage.

    question: how do I apply these elements for frontpage?
    Do I need to create also page-template-frontpage.php

    <?php
    /*
    Template Name: Front Page
    Filename: page-template-frontPage
    */

    Or should I create seperate header template file , because
    image for body backgound, looks like to be inside body-tag.

    At the moment GeneratePress has added inline.

    body {
    background-image: url(‘http://domain.fi/wp-content/uploads/2019/08/093001.jpg&#8217;);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    }

    header.php

    <body <?php body_class(); ?> <?php generate_do_microdata( 'body' ); ?>>
    	<?php
    	/**
    	 * wp_body_open hook.
    	 *
    	 * @since 2.3
    	 */
    	do_action( 'wp_body_open' );

    now I have deleted customiser backgound image if I could add it via elements.

    Please, What are steps to complete this task, as UI do not have
    option to add background image per page?

    Thanks Mika.

    #1001597
    David
    Staff
    Customer Support

    Hi there,

    you would just need to use some CSS. Each pages <body> tag contains classes, some are specific to that page. The home page has home so your CSS would look like this:

    body.home {
        background-image: url('image_url.jpg');
        background-color: #cccccc; /* Fall Back color */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #1004995
    Mika

    Thanks.

    Used your way to put image via Css, but in future , I will make UI element to fix image per page.

    #1005016
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.