WordPress.org

Ready to get started?Download WordPress

Forums

Adding background image to content area (6 posts)

  1. gdsilva
    Member
    Posted 2 years ago #

    Hello,

    I’m quite new at using WordPress and know almost nothing about CSS. I learn fast though.

    I’m working on redesigning an old site right now in WordPress and would like to use Esplanade. I wonder if it is possible to use a background image in the content area. I have a bunch of graphics that were design to ‘sit’ on a background and I don’t want to redo all of these. Here is the old site: http://www.ooodlesofdoodles.com/Home.htm I would like to be able to add the brown background on each page of this theme. I would much appreciate some guidance if possible please. I’m a Mac user, if that makes a difference.

    Thank you in advance

  2. Knut Sparhell
    Member
    Posted 2 years ago #

    You will need to know something about how a theme is made up, and preferably how to make a child theme, to do this safely.

    In style.css use something like #content { background: brown url('http://the-image-url') }

    Or you may try this plugin.

  3. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    These will likely be helpful on CSS:

    http://codex.wordpress.org/CSS

    http://www.w3schools.com/css/

  4. gdsilva
    Member
    Posted 2 years ago #

    Thanks Knut. On the style.css it says not to modify it. Any updates will revert the style.css to the original coding. I did try the plugin you suggested and that didn't work.

    Thanks for these links WPyogi!

  5. Knut Sparhell
    Member
    Posted 2 years ago #

    Yes, do not change the original style.css if you want it to survive an update. Make a child theme and activate it. You are the only one who will update your own child theme. WordPress will load your new style.css, hence the @import rule at the top. Change the twentyeleven to the folder name of your theme. Also put in your own header strins, to properly identify it as your theme.

  6. tiffanyjean47
    Member
    Posted 1 year ago #

    I was trying to do the same thing, and I spent many hours searching and trying different things different forums offered, like this one too.

    The following worked the best for me.
    http://forum.bytesforall.com/showthread.php?t=9525

    Here is my testing site.
    http://tiffany.hyukit.com/?page_id=220

    I wanted the About page and the Services page to have an image background in the actual content section. But not on the other pages.

    Here is the code I put in CSS
    body.page-id-220 div#content-area {
    background-image:url('http://tiffany.hyukit.com/wp-content/uploads/2013/03/About-Page-Background1.png');
    }

    I found out what the page name was from mozilla view source.

Topic Closed

This topic has been closed to new replies.

About this Topic