Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Change header image for each page of website

    I am working with a CSS template:

    I am wanting to change my header image for each page. I have read some information on how to do this and have come to conclusion that some PHP has to be used. I have found in the CSS behind my template the code the displays the current header image:

    PHP Code:
    #header { float:left; width:880px; height:330px; background:url(../images/header.jpg); background-repeat:no-repeat; } 
    I have also found some code examples of how to change the image for each page:

    PHP Code:
    <?php
       
    if ($node->nid == 1) {
       print 
    'image-1.jpg" />';
       }elseif (
    $node->nid == 2){
       print 
    'image-2.jpg" />';
       }elseif (
    $node->nid == 3){
       print 
    'image-3.jpg" />';
       }elseif (
    $node->nid == 4){
       print 
    'image-4.jpg" />';
       }elseif (
    $node->nid == 5){
       print 
    'image-5.jpg" />';
       }elseif (
    $node->nid == 6){
       print 
    'image-6.jpg" />';
       }elseif (
    $node->nid == 7){
       print 
    'image-7.jpg" />';
       }elseif (
    $node->nid == 8) {
       print 
    'image-8.jpg" />';
       }elseif ((
    $node->nid == 9) | ($node->nid == 10)){
       print 
    'image-9.jpg" />';
       }elseif (
    $node->nid == 11) {
       print 
    'image-11.jpg" />';
       }else {
       print 
    'default-image.jpg" />';
       }
    ?>
    I am struggling to work out how to integrate the PHP into the existing CSS.

    Any help would be much appreciated.

  • #2
    New to the CF scene
    Join Date
    Sep 2009
    Location
    Online
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    YOu will need to add a php include tag in the area where you want the header to apear! It should be done in the html not the CSS. here is a link to my portfolo http://www.hotstardesign.com

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    I am wanting to change my header image for each page.
    Little confusing as I could take it that you want a DIFFERENT header on every page. That can all be done with just CSS.

    If you are wanting to put the SAME header image for every page that will not be changed, you can do that with CSS if you put the header image in as a background of a div container properly styled. Every page links to a common CSS file so it would appear on all pages as long as the header div is on every page.

    If you you want to change the header image on every page from time to time, the I would suggest the use of PHP Includes. You can use the include codes for the HTML and/or the CSS file link. I would probably make a separate CSS if you are putting different header images on each page or planning on changing the header images from time to time.

    I hope I got this written down right. LOL
    ☠ ☠RON☠ ☠

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How many pages do you have?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have 20 pages in total. I am just wanting each page to have a different image. So include would be needed for this?

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    CSS would do it since all 20 pages should be linking to a common external style sheet already. The only file you would be editing is the CSS to change the heading image at any future date.

    Includes just make it easier if you want to do something different with the header image as you still only edit one file...the include file which is referenced to by each include code on every page.

    For yours, I would just do the CSS file. Two ways one of which involves adding another CSS file link and a CSS file for the header images only or just add all the header images CSS to the present CSS file.

    If the header image container is a div and ALL header images are the same size and centered and not repeated, example:

    CSS:

    Code:
    #header1, #header2, #header3, #header4, ...  #header20  {
    width: XXpx;
    height: YYpx;
    margin: 0 auto;
    }
    
    #header1 {
    background: url(header_image1) no-repeat center scroll;
    }
    
    #header2 {
    background: url(header_image2) no-repeat center scroll;
    }
    .
    .
    .
    #header20 {
    background: url(header_image20) no-repeat center scroll;
    }

    HTML:

    Code:
    <div id="headerZ"></div>
    Z = page name or just a number in sequence as shown in CSS. The html will be placed where you want it and the corresponding id put in for the div.

    If each header image has a different size and centered, then you will have to change those dimensions as well for each one:

    Code:
    #header1, #header2, #header3, #header4, ...  #header20  {
    margin: 0 auto;
    }
    
    #header1 {
    width: XXpx;
    height: YYpx;
    background: url(header_image1) no-repeat center scroll;
    }
    
    #header2 {
    width: XXpx;
    height: YYpx;
    background: url(header_image2) no-repeat center scroll;
    }
    .
    .
    .
    #header20 {
    width: XXpx;
    height: YYpx;
    background: url(header_image20) no-repeat center scroll;
    }
    Last edited by Major Payne; 09-01-2010 at 07:52 PM. Reason: Hopefully, to clarify and get it right. :P
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •