Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 24, 2016 at 9:38 pm #703445
    1lizcollins

    Hi there,

    I’d like to have a different body background image for each main menu item on my site. I’ve tried the suggestions I’ve seen in other posts for adding an image to a single page and so far it’s applying the image to the boxed content area, not the body. Can you help me apply the image to the correct location? And can you help me apply those guidelines to main menu parent items? I’m using the most-up-to-date versions of WP & Enfold. Thank so much!

    October 25, 2016 at 12:40 am #703497
    1lizcollins

    Realized it might be helpful if I list the code I’m using. Here’s the code for the homepage:

    .page-id-5 .bg_container { 
    background-image: url("mylinkhere");
}

.bg_container {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: #ffffff;
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-size: cover;
}
    October 25, 2016 at 12:44 am #703500
    Vinay

    Hi,

    Glad this is sorted for you and Thank you for sharing your solution.

    If you have more questions please feel free to ask us via new ticket.

    Thank you for using enfold :)

    Best regards,
    Vinay

    October 25, 2016 at 1:30 am #703515
    1lizcollins

    No, it’s not sorted. This code doesn’t work :( If you follow the link to my site you’ll see that there’s no background image, just white space. Can you help?

    October 25, 2016 at 9:57 am #703686
    Nikko

    Hi,

    Try to use this code:

    .page-id-5 {
    background: url('image.jpg') !important;
    background-attachment: fixed !important;
    background-clip: border-box;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    width: 100% !important;
    max-width: none !important;
}

.page-id-5 #wrap_all {
    max-width: 90%;
    width: 1375px;
    margin-left: auto;
    margin-right: auto;
}

.page-id-5 #main, .page-id-5 .main_color, .page-id-5 #footer, .page-id-5 #socket {
    background: transparent !important;
}

    Hope this helps :)

    Best regards,
    Nikko

    October 25, 2016 at 12:27 pm #703735
    1lizcollins

    Thanks Nikko! Because I want my content area to stay white, with my background image only showing on either side of the content area, I adjusted the code you provided (deleted the last section). Works great.

    My next question is: How can I apply one page background to a parent menu item and all it’s children without having to code each one separately? Because child pages will be added and deleted with frequency this is important. Super appreciate your help!

    October 27, 2016 at 5:33 pm #704943
    Nikko

    Hi,

    You can use same code above but just change the page id of parent is 7 the parent page will have this class .page-id-7 and the all the child pages will have this class in common .parent-pageid-7. Let us know if this helps :)

    Best regards,
    Nikko

    November 1, 2016 at 3:28 am #706526
    1lizcollins

    Thank you! This works perfectly on all pages, but not on the blog or event pages. Any thoughts on how to do this for those pages?

    November 2, 2016 at 12:11 am #706903
    Nikko

    Hi,

    Here’s the list:
    blog (parent) – #top.category-blog
    blogs (single post) – .single-post

    event (parent) – #top .post-type-archive-tribe_events
    events – .single-tribe_events

    Best regards,
    Nikko

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