WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Background image into content page (7 posts)

  1. Jackie Chan
    Member
    Posted 3 years ago #

    How would i put a background image into my page so that i can put text over the top of the image?

  2. peredur
    Member
    Posted 3 years ago #

    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

  3. Jackie Chan
    Member
    Posted 3 years ago #

    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 http://www.jackiepalmer.net/gallery/ however when i use the code used for that one it does not work, any ideas?

  4. peredur
    Member
    Posted 3 years ago #

    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

  5. Jackie Chan
    Member
    Posted 3 years ago #

    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?

  6. Jackie Chan
    Member
    Posted 3 years ago #

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

  7. Jackie Chan
    Member
    Posted 3 years ago #

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

    Thanks for your responses

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags