Support » Themes and Templates » Calling all WordPress Experts

  • Let’s see who is clever.

    I have 2 backgrounds. 1 is a nice carbon-fiber pattern. The other is a wide picture that takes up the top part of the page. How do I have both backgrounds on!!!!!!???

    I know if I had a BG Color of #fff and a picture it would be fine. But I have a background pattern .gif file and would like to also display a nice big background picture on the top part of the page?

    Tricky question is it not!!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You can not have 2 background images on one element (well, using CSS3 you can, but it’s not very supported in all browsers).

    So how do these wordpress templates do it. You often check out a car template which has a beautiful metallic background but a image of a racing car in the background of the top part of the page.

    Maybe.. we can use a image and spread it all over the div tag? don’t know there must be a way!

    The cross-browser supported way of doing this would probably to have the carbon fiber background as the background image repeating in the body-tag.

    Then, place a div of 100% height and width as the first element in your html, where you put the large image as a background image positioned top and center. Then this image would place above the carbon fiber pattern, and it would float accordingly to browser width.

    Sample code for CSS:

    body { background: #fff url(images/carbon-fiber.png) top left; }
    div#large-image { width: 100%; height: 100%; background: transparent url(images/large-image.png) top center no-repeat; }

    Change paths to images accordingly.

    Sample code for HTML:

    <head><!-- all your header stuff here --></head>
    <div id="large-image">
    <!-- all your site's structure and content here -->
    </div><!-- end #large-image -->

    Hope this helps 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Calling all WordPress Experts’ is closed to new replies.