Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 1, 2017 at 12:49 am #770212
    jdbrunet

    I am working on an existing site (www.thelastpig.com) and many of the pages use the transparent header and have a full page background image. What I would like to do for some of the interior pages is to have a background image in ONLY the header and then a color for the body of the page. I have been trying to figure this one out but simply can’t seem to do it. I wish I could get into the code, because I could do this pretty quickly in HTML if it wasn’t a WordPress site. I’m figuring there MUST be a way to do this.

    Hoping you can help! Thanks!

    April 1, 2017 at 6:47 am #770237
    John Torvik

    Hey jdbrunet,

    Please, may you specify your question? Attach some screenshots, please.

    Best regards,
    John Torvik

    April 1, 2017 at 4:41 pm #770361
    jdbrunet

    Hi John,

    Thanks for the response. I am including a link to screenshots of: existing page with image background, existing page with white body background and black header, mockup of the header that I want to make for the pages without an image background.
    I hope this helps to make my request more clear.

    Thanks!

    April 1, 2017 at 11:47 pm #770456
    jdbrunet

    Perhaps this is a related question: how do I create a full page background image? On some of the pages the previous Admin makes it appear as though the page has a background image but he used the Color Section instead. The content inside the color section vertically aligns in the middle. What I want is a page with a full page background image and the content aligning to the top. See http://www.thelastpig.com/join-the-herd/

    This page uses the transparent header and the page content is inside a Color Section. The “Join The Herd” header is inside a Special Heading block. I don’t want all the space between the header and the menu bar.

    Thanks!

    April 4, 2017 at 2:54 pm #771803
    Victoria

    Hi jdbrunet,

    Here is the code to change the header of your page, you can put it in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#header { background-image: url(your image url); }

    If you already have a page set up, you can send us the link and we will give you the code to work just for that page, since you don’t want this on all pages.

    And this code

    
.av-special-heading {
  margin-top: 0px;
}

    will remove the space you don’t want on the page http://www.thelastpig.com/join-the-herd/

    Best regards,
    Victoria

    April 5, 2017 at 11:17 pm #772881
    jdbrunet

    Hi Victoria,

    Thanks for the assistance. I will want to do this only on specific pages. Right now those pages are:

    Support

    FACTS

    Spread The Word

    Screenings

    I assume that I can also add code for adjusting the position and behavior of the image as well, correct?

    Thanks!

    April 7, 2017 at 5:41 pm #774092
    Victoria

    Hi jdbrunet,

    So to target a specific page you modify the code adding the body page-id class (this is for support page foe example):

    
#top.page-id-2702 #header { background: url(your image url) no-repeat top left; }

    And here is more on background properties.
    If you need further assistance please let us know.
    Best regards,
    Victoria

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