Background image that overflows beyond the content area

  • I am trying to position a spiral as background image that “floats” outside the boundaries of the page width. I have positioned it using css with a negative margin, but the part of the image that is outside the page width doesn’t show up.

    I have created a child theme that’s based on the twenty eleven theme. The body and the #primary div already have different background images so I have been trying to position the spiral using the #page div.

    I have thought about floating the spiral, but I need it to be a background image layered above the #primary layer, but below the content of the posts.

    My site is bodysacred.sezgintester.us and an image of what I am trying to achieve is located here: https://www.susansezgin.com/Clients/BodySacredSample.html. The green spiral on the left side of the page is the image I am trying to position.

    Thanks in advance for the help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter msusans

    (@msusans)

    The link to my site is: https://bodysacred.sezgintester.us

    You might need to add another wrapper around the whole page and put the spiral image as the background in that div? And then using a transparent image as the background for the primary div so the spiral shows through?

    Thread Starter msusans

    (@msusans)

    I thought about trying to do that, but I’m relatively new to WordPress and php and I wasn’t sure in which files I would put the opening and then the closing tags for a wrapper…. header.php for the opening tag and footer.php for the closing ones?

    Yep, that’s exactly right — you’d just need to get them in the right places — if you haven’t made changes to those files, this should work:
    for the header.php file

    <body <?php body_class(); ?>>
<div id="wrapper">
<div id="page" class="hfeed">

    and in the footer.php

    </footer><!-- #colophon -->
</div><!-- #page -->
</div><!-- #wrapper -->

<?php wp_footer(); ?>

    Find the lines that I copied above in the files and add the new lines accordingly. Be sure that you are putting copies of these two file into the child theme and making changes there.

    Then you’d add CSS using the “wrapper” id:

    #wrapper {
   background:.......  ;
   other styles.....  ;
}

    Thread Starter msusans

    (@msusans)

    So I finally got back to this and was able to successfully place the wrapper in the header and footer, and have the image show up outside the edges of the wrapper, but now the image inside the wrapper is buried under the header (and maybe some other layers too).

    I actually tried this on a different site I’m working on, not the one I first referenced…. empoweringlife.sezgintester.us.

    I know that z-index does soemthing with layers but I’m not really sure how to use it, and I don’t know if it would work the same in WordPress anyhow.

    Thanks for the previous help, WPyogi!

    Thread Starter msusans

    (@msusans)

    Actually, I take that back… it’s not overflowing properly. It turns out that I had the margins on the wrapper wider than the page so it appeared that the negative margins were working, but it was actually just showing in the overflow. I am using a fixed width, centered layout. I guess I could make the wrapper a fixed width wider than the page and put the image in there. It seems like there should be a proper way to do it though.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Background image that overflows beyond the content area’ is closed to new replies.