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

HTML

Posted by Unsubscribed User
Unsubscribed User
17,284 Points

Problem with responsive body background in foundation framework

I'm putting together a website using foundation frame work and I'm having a hard time getting the body BG to line up properly. I figured how to make it responsive but now it's pushing my slider below it. The slider is suppose to sit in between the flames. This is the HTML that makes the BG responsive.

<!DOCTYPE html>

<div class=" bg-img"><img data-interchange="[http://www.ghostxray.com/RRC/img/bg.jpg, (only screen and (min-width: 1px))], [http://www.ghostxray.com/RRC/img/bg.jpg, (only screen and (min-width: 1280px))]"></div>

 </html>

Site:

http://randysrodandcustom.com

Joe Bruno
Joe Bruno
35,909 Points

In your css, try 

.bg-img { position: absolute; }

4 Answers

Unsubscribed User
Unsubscribed User
17,284 Points
Unsubscribed User
Unsubscribed User
17,284 Points

Man, I've been struggling with this for hours...thanks.

Unsubscribed User
Unsubscribed User
17,284 Points
Unsubscribed User
Unsubscribed User
17,284 Points

Although this solution just makes the BG image shrink behind the slider as you decrease the view port, is there a way to keep it on the sides of the slider ?

Joe Bruno
Joe Bruno
35,909 Points
Joe Bruno
Joe Bruno
35,909 Points

Absolutely. You are going to have to use media queries for this, but the in short, in your css:

.orbit-container {

      max-width: 600px;
      display: inline-block;

}

on the div above .orbit-container (.large .hide-for-small), you are going to want to add another class- perhaps name "center" or something to that effect and add

.center {text-align: center; }

Unsubscribed User
Unsubscribed User
17,284 Points
Unsubscribed User
Unsubscribed User
17,284 Points

Thanks again, I'll give this a try.