How to make background image extend up to h1 of blog post

Support
#2

Hi There,

Thank you for writing in, please add this to Theme Options > JS

jQuery( document ).ready(function() {
  jQuery(".single-post .entry-header").prependTo(".single-post .entry-content .el1");
});

Hope it helps,
Cheers!

#3

Thanks @friech, that worked but now there is still a remaining margin of white below the top image. Is there any way to fix this?

#4

Hi There,

Can you please send the URL where you have the issue. I checked your both of the site from your license and didnt find the issue page.

Thanks

#5

Hi @basanta it’s happening on any of the blog entries. There is simply a white space between the top image and the background parallax image below. I have attached destop and mobile examples:

#6

Hi there,

Please try this code in the Global CSS:

.single-post .entry-content {
    margin-top: 0;
}

.single-post .x-main .hentry .entry-featured {
    margin-bottom: 0;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

#7

Hi @Jade thanks for your help, but I believe the space is coming from the image at the top.

#8

Hi Jeremy,

Please try this:

.single-post .entry-content {
    margin-top: 0;
}

.single-post .x-main .hentry .entry-featured {
    margin-bottom: 0;
}

.single-post .entry-header {
    margin-top: 2em;
}
#9

Thank you @Jade yes this worked!

#10

You’re welcome.
We’re always here to help you out.

#11

Hi @Jade and @RueNel, upon updating to 6.0.4 this stopped working again. Have some of the CSS selector names changed since the update? It’s also of interest to note that the background image that was set for the blog index page has also disappeared since the update. Perhaps the two issues are related?

#12

Hi There,

This is how it looks on my end:

Could you please tell us what’s the issue?

Thank you.

#13

Hi @thai, before updating to 6.0.4 the background image extended up to, and presumably behind, the top blog image associated with the post. 10 days ago @Jade I put in

.single-post .entry-content {
margin-top: 0;
}

.single-post .x-main .hentry .entry-featured {
margin-bottom: 0;
}

.single-post .entry-header {
margin-top: 2em;
}

and that worked, but since the update, it no longer works. Moreover, the background image no longer displays at all on the blog index page. I was thinking perhaps the two issues are related?

#14

Hi again,

Try replacing this line of code:

.single-post .entry-content {
margin-top: 0;
}

With this:

.single-post .entry-content {
    margin-top: -100px !important;
}

I see parsing errors when I try to validate your CSS, perhaps that could be the reason your CSS isn’t working at all on some pages, Please setup a child theme (please see https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57) first and move all of your custom CSS to child theme’s style.css file.

Let us know how this goes!

#15

Thank you @Nabeel, I installed the child theme and replaced those 2 lines of CSS but it made H1 and H2 overlap on mobile devices.
I didn’t have any custom CSS in the style.css for X (it was simply blank) and the child theme style.css is also blank, so should everything should be ok now? Do I need to move the Global CSS and Global JavaScript anywhere else? Are you still seeing parsing errors?

#16

Hi there,

I think the issue why the previous customization does not work anymore because when you update, the dynamic classes added to the sections changed and in the first JS code you used, it was targeting the class of the first section.

Are you aiming to add the background image with the small masks to the single post content area throughout the site?

If so, you can just remove the background you set to the sections then add this CSS to the Global CSS:

.single-post .entry-wrap {
    position: relative;
}

.single-post .entry-wrap:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(https://www.fondudes.com/wp-content/uploads/2018/05/Fon97-basic-unit-background-repeat-225x225px.jpg);
    background-repeat: repeat;
    opacity: 0.1;
    top: auto;
    bottom: 0px;
    transform: translate3d(0px, -303px, 0px);
}

.single-post .x-main.full .hentry .entry-featured {
    z-index: 999;
}

The code above the will set the background to the title and the post content area without needing to manually set the background to the post sections.

Hope this helps.

#17

@Jade thank you, I love the idea of doing this! However, with this code, the background image cuts off before the end of the posts, and the parallax motion is also lost.
I’m still quite a bit worried about the parsing erros @Nabeel discovered while trying to validate the CSS and for which pages the CSS isn’t working on at all. Has my installation of the child theme already fixed all of this? I’m equally concerned that I no longer know which code currently in my Global CSS and Global JavaScript is needed, and what is no longer needed.

#18

Hi @jeremy4

Let’s do it via JS just as @friech suggested but this time with a little bit global selector so it doesn’t get broken if the theme is updated, please replace the JS snippet with this one:

jQuery( document ).ready(function() {
  jQuery(".single-post .entry-header").prependTo(".single-post .x-section:first-of-type");
});

Then add this CSS snippet to (X > Theme Options > CSS):

.single-post .x-main .hentry .entry-featured {
    margin-bottom: 0;
}

I’ve checked your CSS codes using this tool, and I can confirm there are some errors as shown in this screenshot:

You will have to correct these errors before adding the CSS snippet I provided to Global CSS section, otherwise it won’t work unless you add it to the style.css file in your child theme directory. I suggest going through these codes line by line till validating all of them.

Thanks.

#19

Thanks @Alaa that worked! I fixed the parsing errors insofar as it goes directly inputting the CSS in https://jigsaw.w3.org/css-validator/#validate_by_input

However, when I try to validate by simply entering the website as you have in https://jigsaw.w3.org/css-validator/#validate_by_uri it says I get 12 errors and I don’t seem to have any control over those errors in the CSS. See screenshot below:

over in the CSS. How should I fix this?

#20

Hi There,

This is how the single post looks on my end now; so it seems it already fixed.



Don’t worry about those errors, it’s pointing to a custom input property that is not native to CSS so the css validator does not understand it.

Check with the By direct input tab instead, and paste all your custom CSS in there. To have a plain and honest CSS checking.

Cheers!

#21

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