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

General Discussion

Posted by Alexis Grizos
Alexis Grizos
3,907 Points

Responsive/scalable background image

Hello, i want to create a background which will be resised according to the dimensions of the screen. I am using bootstrap for a test project i am creating. So far i am using something like

body { background: url('../img/background.png'); background-size: cover; background-repeat:no-repeat; display: compact; font: normal 1.5em/2 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; margin: 0; }

but it seems that is doesn't work like i want to.

Any suggestions

Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

How is it working now, what is it you don't like about that, and how do you want it to work differently?

4 Answers

Alexis Grizos
Alexis Grizos
3,907 Points
Alexis Grizos
Alexis Grizos
3,907 Points

It seems that below the px of a media query i have created the image stops scaling, although i am not transforming the body tag should i include something in order to continue the scaling of image?

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

My thought would be that if it's no longer working below that media query point, than some code in the query must be affecting it. Can you post the code under the query?

Alexis Grizos
Alexis Grizos
3,907 Points

Hello Emma,

Thnx for answer, here is the code of the media query

@media (max-width: 768px) { .mainlogo, .main-nav, .main-nav li, .col { display: block; width: initial; height: initial; margin: initial; } .main-nav { padding-left: initial; } .main-nav li { margin-top: 15px; } .main-banner { display: none; } }

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

I'm not sure what's going on. I created a simple page with nothing on it and used the same css code. My image keeps scaling down until the browser can't go anymore, which is about 2 inches wide. :-(

Alexis Grizos
Alexis Grizos
3,907 Points
Alexis Grizos
Alexis Grizos
3,907 Points

Ok np emma, thanx for bothering to answer, i 'll run some tests in order to find out what is going on. Thnx again!!