Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Joe Li
Joe Li
8,104 Points
Posted by Joe Li
Joe Li
8,104 Points

Display slider widget as background wordpress

Hey Guys,

I have a slider widget that i'd like to use as a background. Does anyone know any way of displaying this?

As in I guess you can't do this....

<div style="background:<?php dynamic_sidebar('home-slider'): ?>;">
<h1>The body</h1>
<button>Button</button>
</div>

Thanks for your help,

Joe

1 Answer

Brian Hayes
Brian Hayes
20,986 Points
Brian Hayes
Brian Hayes
20,986 Points

The problem with the method you just posted is that the style attribute is meant only for CSS style properties. That particular function outputs the markup of the widget area as it is defined by the value passed, which in this case is home-slider.

So, the only way to make this function in the same way a background property would, would be to have the markup of the slider end up in to template, and through some styling magic, making the content overlay over the top of the slider. A method very close, if not dead on, to this would be the new trend of using video elements as backgrounds.

Now, if these are simply images you want to run like a slideshow in the background, then I would suggest using some JavaScript and jQuery to modify the background property and actively update the background image value. Then with some CSS you should be able to add transitions.

If you are, however, dead set on making the background a widget area, then you could try something like what This Codepen has done. Just swap out the video part of it with your widget area, and update the CSS accordingly.

I do wonder how well this will work however, considering the slider may have its own styling and such, it may take a good bit of tweaking to work right.

I'd still say, the better method, both semantically, and for stability/reliability would be modifying the background image source property with javascript on a timer and loop with CSS transitions.