Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #207696

    Is there a way to create a scrolling custom background image for a stretched layout, so that, essentially, the content areas without a color section become ‘transparent’ and just revert to the entire site’s background? Please let me know if that’s not clear.

    Thanks

    #207924

    Hi erikkIsrael!

    I’m not really sure if I understand you correctly but do you want a full width background on a page? You can use this plugin: http://wordpress.org/plugins/wp-backgrounds-lite/

    Please post a screenshot.

    Best regards,
    Ismael

    #208155

    Thanks Ismael,

    Although that plug-in is very interesting, I’m not sure that’s what I’m going to need.

    Here’s the site http://dev2.israeliconference.net/

    You can see the main content background color is #fdf5d1. Instead of a color, I’d prefer it to be a scrolling background image, just like one you can include if you have a boxed layout rather than stretched one.

    #208184

    Hey!

    No, not with the theme options. It might be doable with a good bit of custom css to pick out the areas using color backgrounds but it will end up needing a lot of clean up as well.

    The theme elements and layout was not designed to have no background so there are quite a few areas where the elements have background colors that match the overall background and fake a full width or transparent effect.

    Best regards,
    Devin

    #208188

    Hello,

    I am using the Enfold theme with the boxed style. I have a custom fixed background in the back and I would like the boxed part of the website to be transparent so you can see through to the background. An example of what I am trying to accomplish can be found here: http://scandalesque.com/. This is my website: http://desertmiragemarketing.com/foxscabaret/. Please help me. Been trying to figure this out for hours! :-)

    Thanks!

    #208225

    Hi!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    #main, .footer_color, .alternate_color, .socket_color, #header_main,  { background-color: transparent; }

    Regards,
    Yigit

    #208242

    Thanks everyone,

    Is there any resource you can point me to where I can dig a bit deeper about achieving my goal?

    Thanks

    #208266
    #208272

    Hi Yigit,

    Thanks for your reply. I added that code to the Quick CSS in Enfold theme options under Styling tab and nothing changed. It didn’t make the background transparent. It still looks the same. http://desertmiragemarketing.com/foxscabaret/

    What else can I try?

    #208291

    Hey!


    @azsupergirl
    : Remove the main div background first, using this:

    #main, .html_stretched #wrap_all {
    background-color: transparent;
    }

    Then use this for the alternate background color:

    .alternate_color, .alternate_color .site-background, .alternate_color .first-quote, .alternate_color .related_image_wrap, .alternate_color .gravatar img .alternate_color .hr_content, .alternate_color .news-thumb, .alternate_color .post-format-icon, .alternate_color .ajax_controlls a, .alternate_color .tweet-text.avatar_no, .alternate_color .big-preview, .alternate_color .toggler, .alternate_color .toggler.activeTitle:hover, .alternate_color #js_sort_items, .alternate_color.inner-entry, .alternate_color .grid-entry-title, .alternate_color .related-format-icon, .grid-entry .alternate_color .avia-arrow, .alternate_color .avia-gallery-big, .alternate_color .avia-gallery-big, .alternate_color .avia-gallery img, .alternate_color .grid-content {
    background-color: rgba(255,255,255,.5);
    color: #7b7368;
    }

    And this for the main color background:

    .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 .big-preview, .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 {
    background-color: rgba(0,0,0,.5);
    color: #7c6853;
    }

    Change the rgba background color values. “.5” stands for transparency or opacity.

    Best regards,
    Ismael

    #208320

    Hi!

    Thanks again! We are almost there! That code you provided changed everything but the header, footer and the sockets. It only changed the background of the main content.

    http://desertmiragemarketing.com/foxscabaret/

    Tenisha

    • This reply was modified 10 years, 2 months ago by azsupergirl.
    #208325

    Hi!

    Change the header background using this:

    .header_color .header_bg, .header_color .main_menu ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div {
    background-color: rgba(255,255,255,.5);
    color: #988D81;
    }
    
    .header_color .container_wrap_meta {
    background-color: rgba(255,255,255,.5);
    }

    Footer:

    .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 .big-preview, .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 {
    background-color: rgba(0,0,0,0.5);
    color: #7b7368;
    }

    Socket:

    .socket_color, .socket_color .site-background, .socket_color .first-quote, .socket_color .related_image_wrap, .socket_color .gravatar img .socket_color .hr_content, .socket_color .news-thumb, .socket_color .post-format-icon, .socket_color .ajax_controlls a, .socket_color .tweet-text.avatar_no, .socket_color .big-preview, .socket_color .toggler, .socket_color .toggler.activeTitle:hover, .socket_color #js_sort_items, .socket_color.inner-entry, .socket_color .grid-entry-title, .socket_color .related-format-icon, .grid-entry .socket_color .avia-arrow, .socket_color .avia-gallery-big, .socket_color .avia-gallery-big, .socket_color .avia-gallery img, .socket_color .grid-content {
    background-color: rgba(255,0,60,.2);
    color: #988f81;
    }

    Best regards,
    Ismael

    #208334

    Thanks! That did it! :-)

    #208345

    One last question….

    Is there a way to make only the header and footer stretch completely across the page like it does in the stretch view?

    http://desertmiragemarketing.com/foxscabaret/

    Tenisha

    #208352

    Hi!

    No, that is not possible with boxed layout. You need a major css rewrite if you want to achieve that one. Please hire a freelance developer to help you.

    Best regards,
    Ismael

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Create Scrolling Custom Background Image for stretched layout’ is closed to new replies.