Create Scrolling Custom Background Image for stretched layout - Support

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
January 10, 2014 at 12:25 am #207696

erikkIsrael
Participant

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

January 10, 2014 at 11:31 am #207924

Ismael
Moderator

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

January 10, 2014 at 8:47 pm #208155

erikkIsrael
Participant

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.

January 10, 2014 at 9:34 pm #208184

Devin
Inactive Moderator

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

January 10, 2014 at 9:37 pm #208188

azsupergirl
Participant

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!

January 10, 2014 at 10:50 pm #208225
Yigit
Keymaster
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
January 10, 2014 at 11:14 pm #208242

erikkIsrael
Participant

Thanks everyone,

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

Thanks

January 10, 2014 at 11:53 pm #208266

Devin
Inactive Moderator

This is the gist of what you would be done: http://premium.wpmudev.org/blog/customizing-your-wordpress-theme-using-firebug/

January 11, 2014 at 12:16 am #208272

azsupergirl
Participant

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?

January 11, 2014 at 3:06 am #208291
Ismael
Moderator
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
January 11, 2014 at 4:30 am #208320
azsupergirl
Participant
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, 11 months ago by azsupergirl.
January 11, 2014 at 5:51 am #208325
Ismael
Moderator
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
January 11, 2014 at 6:15 am #208334

azsupergirl
Participant

Thanks! That did it! :-)

January 11, 2014 at 6:32 am #208345

azsupergirl
Participant

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

January 11, 2014 at 7:05 am #208352

Ismael
Moderator

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
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Create Scrolling Custom Background Image for stretched layout’ is closed to new replies.