Background image into content page

If it’s a background image, any text in that element or any element descended from it will be over the background (unless the background is redefined in any ancestor, of course).

To put a background image on an element, add a style rule to the (child) theme’s style sheet:

the-selector-for-the-element {
  background: url('path/to/image.png');
}

Remember the path to the image is relative to the stylesheet. And you will probably also want to provide a default background colour in case the image is not found for some reason.

If you are modifying a theme, and you haven’t already done this, bear in mind that child themes are the only recommended way of making modifications. A child theme is essential if you are modifying a default theme.

Cheers

PAE

Thanks for your response however i mean a background on the actual content rather than the background of the website heres an example of what i done before https://www.jackiepalmer.net/gallery/ however when i use the code used for that one it does not work, any ideas?

There was nothing in what I said that suggested a background for the whole site. Quite the reverse, in fact.

In your HTML, you have an element, div#main, which is the element I would have chosen for the background. Then, inside that you have an anonymous div with an element style:

background-image: url('/wp-content/uploads/2011/08/web-gallery.jpg');

That’s obviously not going to work, since the url is invalid.

So the first thing that I’d do would be to remove the element style (and the anonymous div). There’s no need to muck about with the HTML for style issues.

Then I’d create a folder called ‘images’, say, in my child theme directory and copy my image to it. Let’s call it myimage.png. Finally, I’d add the following rule to the child theme’s style sheet:

#main {
  background: url('images/myimage.png');
}

Remember that url() takes a path to the image that is relative to the stylesheet.

HTH

PAE

Is there not a way that i can add a code to the HTML of my page via the page editor, like in the example sent?

If this helps i’m trying to do it on https://www.rcsmobilescreens.com/why-go-mobile/

I resolved this problem using this website https://mcbuzz.wordpress.com/2008/10/14/how-to-put-text-on-top-of-image-wordpress/

Thanks for your responses