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

CSS

Posted by Mathias Szanto
Mathias Szanto
3,256 Points

background-image messed up when website reduced to the maximum

Hello :)

My english is not perfect as i'm french, sorry.

Thank to Treehouse, i have been able to made my own portfolio, and the result has been shared on some showcase websites. Today, cssauthor posted it, and took a full screenshot.

http://www.cssauthor.com/wp-content/uploads/2014/07/Lion-d’Oc.jpg?150c27

(it's http://www.liondoc.fr)

As you can see, the Infos and Outils (tools) section repeat one time the background.

But when i reduce the website myself, the background-size: cover; do the job and the photo take the whole width, without any problem.

http://tof.canardpc.com/view/c35dcc40-6a7d-477b-954e-bdf0e3a58560.jpg

What would you do? add a background-repeat: none; ? add a background-height: 100%; ? something else?

Thank you :)

2 Answers

Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

That's a great looking website!

You could set a maximum width for your website, but that would spoil the nice effect of the background images. I would not worry about screens with a resolution as high as in the screenshot. If you want to make your website suitable for very wide screens, I would create a special layout for that with lage text and images.

You can add some extra code for displaying background images on an iPhone. The background-size: cover does not work well on iPhones. I found that using background-size: auto; works better. 

/*small screens*/
@media only screen {
  .workspace {
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    background-position: 0px 0px;
  }
}
/*Larger screens*/
@media only screen and (min-width: 40.063em) {
  .workspace {
    background-size: cover;
  }
}
Mathias Szanto
Mathias Szanto
3,256 Points
Mathias Szanto
Mathias Szanto
3,256 Points

Thank you Sander :) yes i'm very happy with Treehouse, as they allowed me to create this, and build my own enterprise in the south of France. And trust me, there is a lack of websites here !

Thank's a lot for your advices and code, i will try this asap. :)