Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #610723

    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, 8 months ago by rwwood.
    #610756

    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

    #610779

    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

    #610946

    Hi,

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

    Regards,
    Rikard

    #610972

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

    Thanks.

    #611160

    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

    #611234

    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, 8 months ago by rwwood.
    #612026

    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

    #612105

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

    Thanks.

    #612130

    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

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