Different content background image for each Page

  • This is an attempt to place a simple tested solution to using different content background images on each individual WordPress Page.

    To give credit where it is due, I borrowed code from this thread HERE, did a couple of minor tweaks, tested it and can say it works perfectly to accomplish this one task.

    First I created 4 different background images and 3 different test pages. The 4th image is used as a default content background for any pages I did not define in my stylesheet.

    In the page.php file replace:

    <div id="content">

    With:

    <?php
$class = '';
if (is_page('test')) {
  $class = 'test';
} elseif (is_page('test2')) {
  $class = 'test2';
} elseif (is_page('test3')) {
  $class = 'test3';
} ?>

<div id="content"<?php if($class) echo ' class=' . $class . ''; ?>>

    In your stylesheet file find your content style block and replace with as follows (changing dimensions etc. to suit your theme):

    #content { background:url(images/bg-default.jpg) ;
width: 960px;
min-height: 340px;
background-repeat: no-repeat;
background-position: right bottom;
overflow: hidden;
}

#content.test { background: url(images/bg-test.jpg); }
#content.test2 { background: url(images/bg-test2.jpg); }
#content.test3 { background: url(images/bg-test3.jpg); }

    Note that It is not necessary to repeat the entire CSS block for each page.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Thank you…I didn’t know how to do this w/o buying a new theme.

    This can be achieved using the body_class() using a similar method to the one described here.

    Thread Starter Gomeza

    (@gomeza)

    This can be achieved using the body_class() using a similar method to the one described here.

    I must be missing something. Aside from not being able to envision how it could work for this purpose (different content background for each page), the thread you linked to does not provide any direction as to how this would be achieved.

    I must be missing something.

    clearly –

    body_class() https://codex.www.ads-software.com/Function_Reference/body_class outputs page specific css classes, with the page ID as part of the css class;

    example:
    .page-id-123

    use these in your style.css:

    body.page-id-123 #content { background: ....; }

    Thread Starter Gomeza

    (@gomeza)

    I must be missing something.

    clearly –

    I think the link you provide (which is to a very informative thread, thank you), illustrates some of the shortcomings of search and information finding in this type of forum more than anything. After 2 days of searching every possible permutation and derivative of keywords for the task I wished to accomplish and after much trial and error, your example is the only real direction I have come across.

    Moderator Ipstenu (Mika Epstein)

    (@ipstenu)

    ?????? Advisor and Activist

    Generally we suggest google ??

    site:www.ads-software.com "what I want to know"

    Thread Starter Gomeza

    (@gomeza)

    Generally we suggest google ??

    This is not a case of not knowing how to search, or of not putting in an appropriate amount of effort before posting a thread. It is a case of the information, though eventually found in this forum, being so obscure and without coding examples making it virtually impossible for a person of intermediate coding skills to find.

    I wouldn’t want this to sound like a complaint because I fully appreciate the effort put into that thread by its author and the efforts of people eventually sending me to that thread but there has to be a better way.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Different content background image for each Page’ is closed to new replies.