Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 10, 2016 at 5:50 am #610723
    rwwood

    I want to set an image for the background using a fixed-frame layout, in other words one that is behind all the content, fills the page and doesn’t scroll when the page is scrolled. I would also like to set the frame width to 100 px or a percentage on the sides and to 0 on the top and bottom. I’m not sure to which elements I should apply the css or how to do it so as not to break the responsive nature of the layout.

    Thanks.

    • This topic was modified 8 years, 7 months ago by rwwood.
    April 10, 2016 at 10:00 am #610756
    Vinay

    Hi rwwood!

    You can add a custom ID to the color section and some custom CSS to achieve it but it’s not entirely clear what you are trying to do please provide us a mockup of what you want it look like or to explain what you are exactly trying to achieve? so we can help you with it.

    Cheers!
    Vinay

    April 10, 2016 at 1:47 pm #610779
    rwwood

    In the image, the areas marked by red arrows should be 100px wide and show the background image. The areas marked with green arrows should not show at all or be substantially smaller, say 5px.

    layout screenshot

    April 11, 2016 at 5:11 am #610946
    Rikard

    Hi,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    April 11, 2016 at 6:01 am #610972
    rwwood

    Actually, it was visible in the screenshot I posted, but it’s richardwwood.com.

    Thanks.

    April 11, 2016 at 12:06 pm #611160
    Vinay

    Hi!

    Please use the below CSS in Quick CSS in Enfold > General Styling

    
   html.html_av-framed-box .av-frame {    
    height: 5px!important;
}

html.html_av-framed-box .av-frame {
    width: 100px!important;
    }

    Regards,
    Vinay

    April 11, 2016 at 1:31 pm #611234
    rwwood

    That didn’t work.
    screenshot

    Ir made the header full width and didn’t change the height of the fixed box. Can I accomplish what I’m trying to do by using a different layout? What about setting the background image on this layout?

    This is the look I’m trying to get:
    boxed layout

    I used the boxed layout with maximum container width = 80% and content + sidebar width set to 100%, however that results in a large amount of white space to the left of the content text and to the right of the sidebar column. If I negate the 80% width in developer as shown by the red line in the screenshot, the content and sidebar white space disappear leaving me with what I want, but I don’t know how to accomplish the same in quick css or elsewhere.

    Thanks

    • This reply was modified 8 years, 7 months ago by rwwood.
    April 12, 2016 at 5:00 pm #612026
    Andy

    Hey!

    then just use this code with your red line inside your Quick CSS field, so use this:

    .responsive .container {
max-width: 50%;
}

    and adjust 50% as needed.

    Best regards,
    Andy

    April 12, 2016 at 7:03 pm #612105
    rwwood

    Yeah, I arrived at that finally. I’m always cautious for fear of breaking the responsive nature of the theme.

    Thanks.

    April 12, 2016 at 8:40 pm #612130
    Basilis

    Hi!

    GLad you got it solved.
    I will do close the ticket, please feel free to open a new one, with what you need.
    Thanks a lot

    Regards,
    Basilis

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘[RESOLVED] Background image for fixed-frame layout’ is closed to new replies.