WordPress.org

Ready to get started?Download WordPress

Forums

Calling all WordPress Experts (4 posts)

  1. linenlogon
    Member
    Posted 2 years ago #

    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!!!

  2. Steffen Jørgensen
    Member
    Posted 2 years ago #

    You can not have 2 background images on one element (well, using CSS3 you can, but it's not very supported in all browsers).

  3. linenlogon
    Member
    Posted 2 years ago #

    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!

  4. akerbak
    Member
    Posted 2 years ago #

    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:

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

    Hope this helps :)

Topic Closed

This topic has been closed to new replies.

About this Topic