WordPress.org

Ready to get started?Download WordPress

Forums

Help in creating different background images for static pages? (8 posts)

  1. SugaredHarpy
    Member
    Posted 7 years ago #

    I am trying to create a different header image for certain (not all) static pages on my site, Penelope Room.

    As in, when viewing Scott's Room, Scott would like to use the image cudgel.jpg instead of the usual morning.jpg as a header image.

    I'm using the theme: Greenbay V2 by DL2 Media and in it the header seems to be what you see above the header image. And what I'm calling the header image is called the background image in the stylesheet:
    #header
    {
    border-top:1px solid #A19585;

    border-bottom:1px solid #A19585;
    color: #A19585;
    width: 100%;
    margin-top: 10px;
    height: 150px;
    background-image:url('morning.jpg'); background-repeat:repeat-x
    }

    The theme does not use page.php but it does have a header.php. Although in the header.php, there is code for the section above the image and this for the image:

    <div id="topheader" style="width: 750px; height: 66px">
    <h1>
    <?php bloginfo('name'); ?>
    </h1>
    <div style="float: right; padding-right: 5px;"><?php bloginfo('description'); ?>
    </div>
    </div>
    <div id="header" onclick="location.href='http://peneloperoom.com/';" style="cursor: pointer;"></div>
    </body>

    I've gone through what seems like a hundred ways to have different headers for specific pages, but those aren't working for me (although, I'm more than ready to assume it's a user problem).

    Any suggestions? Is there more information I can give? I'm hoping for the least messy way possible, but I'm up for trying anything. Thank you!

  2. SugaredHarpy
    Member
    Posted 7 years ago #

    Is there any help for this? Thanks.

  3. moshu
    Member
    Posted 7 years ago #

    It's not very easy...
    You either have to use a lot of conditionals in your header.php file and/or use Page templates that call different header files.
    Plus, you'll have to alter the stylesheet, too, maybe have separate stylesheets.
    Not having any Page template it makes it even more complicated.

  4. SugaredHarpy
    Member
    Posted 7 years ago #

    Ah, I was worried about that. Thank you.

  5. buskerdog
    Member
    Posted 7 years ago #

    I have a way to do it but I'm having a problem as well. It basically involves naming the image after the page, like page_image.jpg:

    <img src="http://www.mydomain.com/images/<?php the_title(); ?>_image.jpg" />

    It works, BUT not if your page has multiple words in the title. I am combing the docs for how to replace the_title() with something that would reference the Post Slug rather than the full page title but I can't find anything. Help!

  6. buskerdog
    Member
    Posted 7 years ago #

    It was an issue with Permalinks. OP: I don't know if my metod would help you or not but it's allowing me to have a different image in the same place on each page.

    EDIT: Never mind, still not working.

  7. SugaredHarpy
    Member
    Posted 7 years ago #

    It helps to know another way to play with it, but sadly, I can't get that to work either. Good luck and let me know how it goes.

  8. kalkadoon
    Member
    Posted 7 years ago #

    Hi there,

    I had a similar problem about changing different elements through CSS on a page by page base. The solution might help you too.

    in header.php

    Change
    <body>

    With
    <body id="<?php if (have_posts()) : while (have_posts()) : the_post(); echo 'page-'; the_id(); endwhile; endif; ?>">

    Lets say the ID for your "Home" page is "2". If you want to create a different background for header section in "Home" page

    add to your CSS document
    #page-2 #header {background-image:url('cudgel.jpg')}

    You can do this to any page as long as you know their ID's.

    There is also an alternative, if you don't like to deal with ID's (like me) :)

    Change
    <body>

    With
    <body id="<?php if (have_posts()) : while (have_posts()) : the_post(); print_slug(); endwhile; endif; ?>">

    Add this function to classes.php

    function print_slug() {
    	$my_post_id = get_post(get_the_id());
    	$slug = $my_post_id->post_name;
    	echo $slug;
    }

    lastly change your CSS

    e.g. for "Home" page
    #home #header {background-image:url('cudgel.jpg')}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags