customization/ use of mulitple header and backgrounds

  • Unknown's avatar
    liloveve · Member ·

    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: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    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.

  • Unknown's avatar
    liloveve · Member ·

    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:

    http://liloveve.com/jewelry-school/

    Thank you for your help!

  • Unknown's avatar
    designsimply · Member ·

    Your current http://liloveve.com/ 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.