Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

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

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.