Background Image to Homepage ONLY

  • Resolved andi77cip

    (@andi77cip)


    8 years, 6 months ago

    I have read many posts for other themes, and I’m not sure if this is theme specific or not.
    I don’t know how to write code, and am apprehensive to change it based on someone else’s questions.

    Basically, I want my home page to display a background image, but not the other pages.
    I can’t change this in page attributes, as this theme doesn’t give me the option to edit the home/front page as a page (it’s not listed).
    Snowfall theme.
    My site is not live yet..
    ANY help is greatly appreciated.

Viewing 15 replies - 1 through 15 (of 25 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    the home page usually has a body class of .home — check the <body> tag on your home page.

    You can then use that to be very specific with your CSS. For example,

    .home body { background: url(‘some_image_file.png’); }

    Thread Starter andi77cip

    (@andi77cip)

    Thanks sterndata.

    I haven’t played around with much CSS yet, but I’m happy to try if you can be a little more specific.
    I’m not familiar with the process, but I’m hoping my intelligence and some help should get me through it!

    Am I looking for the tag in the editor? Under Styles? Or Templates?
    Under styles I have found:

    body{color:#555555; font-family:’Open Sans’,Arial, FontAwesome, sans-serif; font-size:14px;line-height:1.5;word-wrap:break-word; font-weight: 100; min-width: 1300px; background: #FFFFFF; }
    .site-container { width: 100%; display: block; margin: 0 auto; overflow: hidden; }

    … but it doesn’t look like it’s talking about the front page.

    Under templates there’s a Static Front Page (front-page.php) link, but the only thing in that entire space is:
    */
    ?>

    <?php get_header(); ?>
    <div class=”clear-top”></div>
    <?php if ( ‘posts’ == get_option( ‘show_on_front’ ) ) : get_template_part( ‘fp-blog’ );
    else: get_template_part( ‘featured-box’ ); get_template_part( ‘fcontent’ );
    endif;
    get_footer(); ?>

    Sorry, I know I’m a pain, but I’m very happy to learn if anyone has a bit of patience..?!

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Please give me a link to your site.

    Thread Starter andi77cip

    (@andi77cip)

    Thanks!
    https://www.coreintentions.com

    It’s a giant mess right now, I am fumbling through!
    I just published it, let me know when you’re done so I can remove it from being out there in the world!

    Thread Starter andi77cip

    (@andi77cip)

    I am able to add a background image, and it will show on the front page, but then it also shows on all the rest, and you can’t read the text.
    Maybe it’s easier to change those than the front page..?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    just qualify it with .home

    .home .body and so on

    home is a class of the body.

    The correct CSS code should be this:

    body.home{background: url('https://i1.wp.com/www.coreintentions.com/wp-content/uploads/2016/05/cropped-23-01.png?fit=250%2C70');}

    I used your logo as an example. ??

    Thread Starter andi77cip

    (@andi77cip)

    I’m not sure where to add that to qualify it.. sorry.
    It seems really simple.. but only if you speak the language!

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    thanks for the correction, bryan!

    You add the code under Appearance > Editor > style.css

    Just be careful not to delete any other code in there. To be safe, add it at the bottom.

    Thread Starter andi77cip

    (@andi77cip)

    Bryan and sterndata..
    You have no idea how much I appreciate this.
    I copied exactly what you suggested I add, and added it to the bottom of style.css and after I updated, nothing changed ??

    I understand if you think I’m a lost cause, but I would still like to try if anyone has any suggestions!
    The site is back on maintenance mode, I can’t have that mess out there!

    You might want to check if your CSS has been added successfully. Can you disable the maintenance mode for a little while so that I can view the theme’s stylesheet?

    Thread Starter andi77cip

    (@andi77cip)

    Done. Thanks

    Your website now just displays a white page.

    Thread Starter andi77cip

    (@andi77cip)

    Oh Man!

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘Background Image to Homepage ONLY’ is closed to new replies.