Background Image on News page

Support
#1

Hi,

I cannot place a new background photo in the “News” blog page. I tried adding it to the Meta settings on the page and it is not appearing. See Screenshot…

Also, I want to place a banner above the header on the news page yet the recommended code did not work.

.blog .x-header-landmark:before {
content: url(URL of IMAGE);
width: 100%;
margin-bottom: 30px;

}

.blog .x-header-landmark {
overflow: hidden;
padding-top: 0;
}

See previous thread…

Thanks in advance.

#2

Hi There,

I already see a background image on your News page (see secure note).

Also the following code should work if you want to add a banner.

.blog .x-header-landmark::before {
    content: url(https://path.to/banner.png);
}

To see whether you have CSS issues, copy all of your custom CSS rules into a tool like CSS Lint (csslint.net) and check for errors.

Let us know how it goes.
Thanks!

#3

Hi,

I want to place a different background photo than the one appearing universally as a default on all pages.

The code you suggested does not work. I will send an inline reply.

Thanks

#4

Hello There,

Thanks for updating in!

Do you want something like this?

If that is the case, please do the following:

1.) Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

/* Blog Custom banner */
.blog .backstretch {
    display: none;
}

.blog {
    background-image: url(http://hnmcsconcept.com/wp-content/uploads/2018/04/2018_04_19_News-Background_Stars_1.jpg);
    background-size: cover;
    background-position: bottom center;
}

2.) And then please add the following code in your child theme’s functions.php file

// Add custom blog banner for Integrity blog index
// =============================================================================
function add_blog_banner(){ ?>

  <?php if ( is_home() ) : ?>

    <div class="custom-banner x-container max width mtm">
      <img src="http://hnmcsconcept.com/wp-content/uploads/2018/04/2018_04_16_The-Stargazer_Header_1920_1.jpg" alt="custom banner">
    </div>

  <?php endif; ?>

<?php }
add_action('x_before_view_integrity__landmark-header', 'add_blog_banner');
// =============================================================================

We would loved to know if this has work for you. Thank you.

1 Like
#5

It Worked!
THANKS SO MUCH!

#7

Can the white banner below the new top image be removed?
Also, wondering if I change the roll-over image on the blog posts on the main News page?

#8

Hi @hnmcsweb

Add this code below in your custom CSS:

.blog .x-header-landmark{
display:none;
}

Not sure what are you trying to achieve with this part.

Would you mind sharing us more details.

Thanks.

1 Like
#9

THANK YOU! This Code worked!

What I mean about the roll-over can be seen inthe attached photo - Any way of changing it so that instead of dark overlay colour with large link symbol the overlay is something else - even I darker blue (like the one in the colours section of the website) would be better.

Thanks!

#10

Hi hnmcsweb,

If you want to change this overlay color, you can use this CSS code:

.entry-thumb {
    background-color: rgb(0,25,100);
}

You can check this video tutorial to know how to use Chrome Dev Tools to customize these styles easily.

Thanks.

1 Like
#12

Hello There,

Your post reply has been withdrawn. Is your issue resolve already? If you need anything else we can help you with, don’t hesitate to open another thread.

Thank you.

#13

Please help me insert a new banner. The original one was deleted when we changed domain names. At the top of the News blog section. Here is the page address:

http://www.holynameofmarycollegeschool.com/news/

and here is the URL of the new Banner image…

Thanks in advance.

#14

Hi hnmcsweb,
I assume this banner was inserted by custom code added in the functions.php file in the child theme directory, could you please check this file and point the image URL to the new URL? as now it points to:
http://hnmcsconcept.com/wp-content/uploads/2018/04/2018_04_16_The-Stargazer_Header_1920_1.jpg

If this isn’t the case, then please provide us with the “new site” WordPress Dashboard login details in a “Secure Note” so we can investigate this issue.

Thanks.

1 Like
#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.