WordPress.org

Ready to get started?Download WordPress

Forums

CSS Code to Add Background Image to Individual Pages (6 posts)

  1. zenner1103
    Member
    Posted 1 year ago #

    My website is:

    http://www.jenna-miller-photography.com/

    I only want my background image on my home page. I have tried EVERY code out there to only have it on my home page, but nothing works. Right now the code I am using is:

    #main-container { background-image: url(http://farm9.staticflickr.com/8227/8367060024_5348825a46_h.jpg); background-repeat: no-repeat; background-position:center; }

    Every time I change it to anything else, it disappears. I have tried inserting my page id and literally every code I found on here and still nothing. I would consider trying a code to take it away from the other pages too. Any advice would be great!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    What page id? I don't see any page id's or classes generated in your theme. For example, in twentytwelve, this php:

    <body <?php body_class(); ?>>

    generates this HTML (on an example site - specific classes might vary):

    <body class="home blog custom-background custom-font-enabled single-author">

    So then you can use those classes in the CSS code to target individual pages:

    body.home {
       CSS styles go here and would only apply to the home page
    }

    So, as is, I don't think there is a way to only put the background on the home page of your site without modifying the header.php file.

    But since you are using a commercial theme, you'll need to get any further support from the developer/vendor as commercial themes aren't supported here:

    http://themeforest.net/item/anthology-premium-elegant-wordpress-theme/131771

  3. zenner1103
    Member
    Posted 1 year ago #

    I tried body.home and also body.page-id-2 div#container and many other codes containing the page id # (my home page id # is 10)

    I will have to contact the developer.

    Thanks!

  4. zenner1103
    Member
    Posted 1 year ago #

    I inserted the code you gave me into the header.php file and I see page-id-10 in the code when I use firebug but it still isn't working. I am so determined to figure this out!

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sorry Zenner1103, this isn't the place to ask for support with that theme. If you have an issue with one of the themes at http://wordpress.org/extend/themes/ let us know.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    CSS code doesn't go in the header.php file (except as it's put there by a custom CSS option/plugin) - as you can now see on your site, that code is now visible. Remove it.

    As Andrew said, you'll need to go to the developer for help with the theme. But it might also be helpful to you to learn a bit more about how WP works - this is a great source of info:

    http://codex.wordpress.org/

    For general HTML and CSS info:

    http://www.w3schools.com/

Topic Closed

This topic has been closed to new replies.

About this Topic