[Resolved] Background Image Overlay Wrapper CSS

Home Forums Support [Resolved] Background Image Overlay Wrapper CSS

Home Forums Support Background Image Overlay Wrapper CSS

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #195080
    Garth Dryland

    Hey Tom

    Over the last couple of days I’ve been looking into moving this site into WordPress and have 90% of the theme sorted using GeneratePress but for the life of me I cant work out if there’s a way within GP to include the background wrapper as shown below?

    If you inspect the code from the background or header area you will see the css wrapper id. You should see css (below) from this site for the background (img01.jpg) and background wrapper (img02.jpg)

    /* Body */

    body {
    margin: 0;
    padding: 0;
    background: #F7F7F7 url(../images/img01.jpg) repeat left top;
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 14px;
    color: #5A554E;
    }

    #wrapper {
    margin: 0px;
    padding: 0px;
    background: url(../images/img02.jpg) repeat-x left top;
    }

    As you will see, the background image img01.jpg repeats in both directions (x and y)
    Whereas the background image img02.jpg repeat-x direction starting in the left top across the page overlaying the img01.jpg background image.

    Is there a css class id I can use to include a wrapper so i can utilize these images which match the header image perfectly?
    I searched the GP forum and found reference to .site-wrapper but it didn’t help me.

    Cheers

    #195254
    Tom
    Lead Developer
    Lead Developer

    Hmm tough one.

    I would probably try to attach the top image to the .site-header element, and the bottom image to the .site-footer element.

    Does that not work?

    #195278
    Garth Dryland

    Hi Tom

    I tried that but it just inserts the images into the header and footer area respectively.

    After a lot more searching I found this css3 layout (as shown below) on the internet standards site W3 Schools.

    /* Body */
    body {
    background: url(../wp-content/uploads/2016/05/img02.jpg) left top repeat-x, url(../wp-content/uploads/2016/05/img01.jpg) left bottom repeat;
    }

    I should be all good now.

    Cheers.

    • This reply was modified 5 years, 2 months ago by Garth Dryland.
    #195283
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad it’s working 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.