Background image interferes with blog text

Shapely
1

Hello,

I seem to be having issues with the background image interfering with the blog text.

See attached image.

Thanks.

2

Hey there,
Hope you’re doing well today

That’s weird.

Please provide me with the URL to your site so that I may have a closer look at the issue that you’re having and be in a better position to suggest a solution.

While you’re doing that, Kindly disable all of your third-party plugins and see if this issue still exists.

If it resolves the issue I am going to then ask you to activate the disabled plugins one by one and test the page to see if we can isolate the conflicting plugin if that is the case.

I look forward to your reply.

Best Regards,
Support

3

Hi,

http://www.asjamesauthor.com/hello-world/

No 3rd party plugins active.

Thanks.

4

Hey again,

The issue I’m seeing here is actually the lack of a featured image.

Because there’s no featured image, it displays the blank image (as shown on the blog archive page), and here on the single page, it displays nothing (there isn’t an image to display). As a result of this, the page content is forced up (into the background image).

If you add the CSS below to Appearance > Customize > Additional CSS, you’ll see that the page actually aligns perfectly when approximately 400px of space (just about the amount of space for a featured image) is added:

.postid-1 .entry-content {
    margin-top: 400px;
}

Also, note that the code will work for this post only. Before adding a featured image, you’ll need to remove this so that the page isn’t pushed further down to the bottom.

I hope this helps,

Best Regards,
Support

5

What if I don’t want to set a featured image?

6

Hi there,
Thanks for keeping in touch with us.

If you don’t wish to use featured images, you’ll just need to remove .postid-1 from the code given above, and it’ll move the page down appropriately to ensure the page isn’t affected by the lack of a featured image, however, in the archive, you will have the blank image consistently (unless you swap them out for some other ones).

To do that, you’ll need to go to your theme folder (access your site via FTP), then go to shapely/assets/images.
Inside that folder, you’ll need to replace the placeholder and placeholder_wide images. Ensure that they have the same names and file types and you should be good.

Please let me know if there are any more questions that I may answer for you :slight_smile:

Best Regards,
Support