Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #322507

    How do I make the background image full size and use the entire space? See private info below for demo site.

    #322736

    Hey!

    Try adding this code to the Quick CSS:

    html.html_boxed {
        background-size: cover;
    }

    Cheers! 
    Josue

    #326687

    That worked great!

    Next, how would I make the main container and footer semi-transparent such that you can slightly see the background through them?

    #326712

    Hi!

    Please add following code to Quick CSS as well

    #main, .html_stretched #wrap_all { background-color: transparent; }
    .main_color, .main_color .site-background, .main_color .first-quote, .main_color .related_image_wrap, .main_color .gravatar img .main_color .hr_content, .main_color .news-thumb, .main_color .post-format-icon, .main_color .ajax_controlls a, .main_color .tweet-text.avatar_no, .main_color .toggler, .main_color .toggler.activeTitle:hover, .main_color #js_sort_items, .main_color.inner-entry, .main_color .grid-entry-title, .main_color .related-format-icon, .grid-entry .main_color .avia-arrow, .main_color .avia-gallery-big, .main_color .avia-gallery-big, .main_color .avia-gallery img, .main_color .grid-content, .main_color .av-share-box ul, #top .main_color .av-related-style-full .related-format-icon, .main_color .related_posts.av-related-style-full a:hover, .main_color.avia-fullwidth-portfolio .pagination .current, .main_color.avia-fullwidth-portfolio .pagination a { background-color: rgba(255,255,255,0.5); }
    .footer_color, .footer_color .site-background, .footer_color .first-quote, .footer_color .related_image_wrap, .footer_color .gravatar img .footer_color .hr_content, .footer_color .news-thumb, .footer_color .post-format-icon, .footer_color .ajax_controlls a, .footer_color .tweet-text.avatar_no, .footer_color .toggler, .footer_color .toggler.activeTitle:hover, .footer_color #js_sort_items, .footer_color.inner-entry, .footer_color .grid-entry-title, .footer_color .related-format-icon, .grid-entry .footer_color .avia-arrow, .footer_color .avia-gallery-big, .footer_color .avia-gallery-big, .footer_color .avia-gallery img, .footer_color .grid-content, .footer_color .av-share-box ul, #top .footer_color .av-related-style-full .related-format-icon, .footer_color .related_posts.av-related-style-full a:hover, .footer_color.avia-fullwidth-portfolio .pagination .current, .footer_color.avia-fullwidth-portfolio .pagination a {
    background-color: rgba(99,86,85,0.8); }

    Cheers!
    Yigit

    #326727

    You are the man Yigit! Looks great.

    And lastly, to make the header area semi-transparent?

    #326732

    Hey!

    Please refer to Josue’s post here – https://kriesi.at/support/topic/glassy-transparent-header/#post-310605

    Regards,
    Yigit

    #326785

    Is there a way to do it in CSS (the way you have above) so it does not get overwritten and I can control the % of transparency?

    #326812

    Hi!

    You can control the header bg transparency with this:

    .header_bg{
    opacity: 0.4;
    }

    Regards,
    Josue

    #326895

    Thanks Josue! There’s one more area – what about the line below the menu?

    See link for example:
    https://dl.dropboxusercontent.com/u/52916400/header.png

    #326916

    Hi!

    Add this too:

    .html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
            padding-top: 153px;
    }

    Cheers!
    Josue

    #327652

    Hi Josue and Yigit,

    It looks like you call the copyright footer something different so I failed to ask how to make that area semi-transparent. Can you take a look at my site and let me know? It’s looking great!

    #327672

    Hi!

    Try with this:

    #socket {
        background: rgba(0, 0, 0, 0.3);
    }

    Best regards,
    Josue

    #327681

    Lastly (for real!) when I turned off the sticky header, the transparency of that section stopped working.

    What is the css or setting is used to make it transparent if I don’t use the sticky header?

    #327727

    This:

    .html_header_sticky_disabled .header_bg {
    opacity: 0.8;
    }
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.