Background image

Hi,

Edit the header.php file, look for the body tag around line 54. Below, add this container.

<div id="main-background"></div>

In the Quick CSS field, use this css code to apply a background image to the container. Adjust the image url.

#main-background {
    width: 100vw;
    height: 100vh;
    background: url('ADJUST IMAGE URL');
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
}

The theme sets a default background color to the sections so you have to set it to 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, .main_color .av-hotspot-fallback-tooltip-inner, .main_color .av-hotspot-fallback-tooltip-count {
background-color: rgba(255,255,255,.2);
color: #666666;
}

#main, .avia-msie-8 .av_header_sticky_disabled#header {
background-color: transparent;
}

Best regards,
Ismael