customization/ use of mulitple header and backgrounds

  • Author
  • #1169542


    My business has three distinct areas under one umbrella – all related but each with their own specific audience. I want to use a different image header and background combo for each page – but the theme I have (twentytwelve) only lets me put one header and one background thoughout the entire blog/site. Can this be done with a widget? or other theme? Or should I consider using three separate websites linked together somehow?
    Thank you. Guidance appreciated, lots of ideas but less experience with web design and the options available.

    The blog I need help with is


    You could swap out the header image on a per-page basis. View the page source and look at the body HTML tag. Pick out one of the classes and use it instead of “.page-id-62” in the following example:

    .page-id-62 #masthead > a {
    	background: url('YOUR_IMG_URL') no-repeat;
    	display: block;
    	width: 100%;
    	height: 250px;
    .page-id-62 img.header-image {
    	display: none;

    Replace YOUR_IMG_URL with the link for the image you’d like to use on the page you’re targeting.



    Okay, I’m able to remove the set image with this but the new image does not show up…This is what I have now:

    Thank you for your help!


    Your current site doesn’t have any custom CSS saved, were you testing it in a preview? What did you replace YOUR_IMG_URL with from the example?

The topic ‘customization/ use of mulitple header and backgrounds’ is closed to new replies.