How do I make the background image full size and use the entire browser space? - Support

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

September 22, 2014 at 3:25 am #322736

Hey!

Try adding this code to the Quick CSS:

html.html_boxed {
    background-size: cover;
}

Cheers!
Josue

September 29, 2014 at 5:16 pm #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?

September 29, 2014 at 6:36 pm #326712

Yigit

Keymaster

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

September 29, 2014 at 6:53 pm #326727

You are the man Yigit! Looks great.

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

September 29, 2014 at 7:07 pm #326732

Yigit

Keymaster

Hey!

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

Regards,
Yigit

September 29, 2014 at 8:23 pm #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?

September 29, 2014 at 9:23 pm #326812

Hi!

You can control the header bg transparency with this:

.header_bg{
opacity: 0.4;
}

Regards,
Josue

September 30, 2014 at 12:45 am #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

September 30, 2014 at 2:14 am #326916

Hi!

Add this too:

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

Cheers!
Josue

September 30, 2014 at 10:31 pm #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!

September 30, 2014 at 10:43 pm #327672

Hi!

Try with this:

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

Best regards,
Josue

September 30, 2014 at 10:50 pm #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?

September 30, 2014 at 11:41 pm #327727