WP Child Theme Issue

HTML & CSS
1

I have created a child theme for my blog because I have been offered some advertising and need to hard code it. In truth should have done it before - but never mind.

Anyway the child theme is working except for one thing - the background image on my post. It is a blog about a football team and I have a faded image as a background. However I can’t find where I added it to replicate in the child theme. It’s not in the style sheet, I’ve checked (which is why I posted here) - but I can’t find it in the php files either. I really struggle with the inspector on FF, but tried it to see if I could see it but I can’t.

Can someone take a look and tell me where the damn thing is please? It’s all a bit embarrassing asking about my own site - but I can’t find it.

https://joysandsorrows.co.uk/2020/07/so-what-now-for-blues/

If you look at this post you will see the faded image repeated vertically. I just need to know where that it so I can add it to the child theme because the child theme isn’t picking it up.

I have switched to the main theme for now for the purpose of this post.

Thanks Kev

2

Without seeing the theme files I cannot answer where this image is being generated specifically by the theme, however I can confirm it is being output in the CSS class .mh-wrapper

The full CSS you’re looking for here is:


.mh-wrapper {
    padding: 30px;
    background: #fff;
    /*start of my addition*/
    background-image: url("./images/2bluesbg.png");
    background-repeat: repeat-y;
    background-position: 50px 15px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    /*End of my addition*/
}

I am not sure what the /* my addition */ notes are about. Does your theme provide its own input for adding custom CSS or styling? If so, that may be where it is being set.

I also see if you remove that repeated image, that there is another faded image behind it (a photo of a stadium)

Hopefully this helps to at least shed a little light!

1 Like
3

Ok so the stadium is the main background. The background image - which you have correctly identified - is the background of just posts. I have tried adding it to the custom CSS section but it hasn’t worked.

I have checked it’s definitely copied into the image folder of the child theme so I don’t know why it’s not being picked up.

The style.css is in main theme folder and the image is in the image folder.

I have now switched to the child theme.

4

I also tried adding it to the child theme style sheet directly, but that hasn’t worked either.

5

Maybe you could test referring the image in relation to the root instead:
background-image: url(/wp-content/themes/mh-edition-child/images/2bluesbg.png);

(Just a thought.)
`

6

Yep that worked. Obviously it wasn’t liking my relative link.

Got there, happy to leave it that way. Thanks for your help all.

2 Likes