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
Dekin O'Sullivan
10,749 PointsBackground image size issues
Hello community,
I have an issue with my background images on my site: www.rothornpartners.com
As you can see if you go on the website, the view of the background image changes as the screen size changes. You can see this if you play around with the browser size.
This is particularly troubling in the "Partners" and "Contact" pages. For ex. in "Partners" the top of the mountain and sky above it are cut off when viewed on a big, wide PC screen. The picture looks great though on smaller devices/browser screen sizes. The picture on the "Partners" page is 2074 x 1556, so size is not an issue...
Here is my code:
#header_partners {
url('../img/rothorn.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
If I try putting "contain" instead of "cover" the image just reduces to a square and doesn t fill the screen width anymore... If I try "100% 100%;" instead of "cover" then the picture is stretched out... I don t know what to do...
Here is what I would like it to look like, the home page of this website: http://www.greenhavenroad.com/
If you play around with the size of the browser on that site, you will see that the background image adjusts perfectly to all sizes and never changes (always the full picture)... HOW DID THEY ACHIEVE THAT???!!!
Looking forward to hearing your ideas hopefully very soon!
Many thanks
7 Answers
Dave McFarland
Treehouse TeacherHi Dekin,
It may simply be your image choice that's causing the problem -- here's the image on the greenhavenroad.com site: http://static1.squarespace.com/static/5498841ce4b0311b8ddc012b/t/54ada399e4b0a1ab2d31a3f6/1391287287792/?format=2500w
On their home page, I the tops of the mountain DO disappear as the page gets larger and the bottom DOES get clipped off too at certain dimensions -- it's just that the focus is on the person standing on the tree stump and because she's positioned near the bottom (but not exactly at the bottom) she stays the focus most of the time.
If you look at another page on the Greenhavenroad site -- http://www.greenhavenroad.com/philosophy/ -- you'll see that both the mountains and people get cut off at different points -- this is an image that doesn't work as well as the one they used on their home page.
I think a media query solution is a good one. Personally, I think your homepage looks great and that the different views of the mountain and fog at different screen widths all look good and evoke a strong feeling. Web design is often about Zen-like acceptance and being comfortable with the different looks you'll get at different resolutions / screen widths / operating systems / browsers.
You should also check out Guil Hernandez's new CSS calc() workshop. He actually has a specific video on how to use calc() to control background position offsets. You'll probably find a good answer there.
Best of luck and let us know what you end up with.
Julian Aramburu
11,368 PointsHey! Did you solve it? Because it looks fine in my browser :D!!!
Julian Aramburu
11,368 PointsI should add that I'm not using full hd resolution so maybe the problems comes using those resolutions and not with smaller ones like 1366x768
Dekin O'Sullivan
10,749 PointsHey Julian,
No it is not solved for me... Are you looking at the "Partners" page on a big screen or a small (phone or ipad) one? Can you see that on a big screen the top of the mountain is cut off? but if you make the browser size smale (like the smallest possible) the image shows nice (whole image, mountain peak showing, etc.).
Julian Aramburu
11,368 PointsIm using 1366x768(19" monitor) atm I have no available full hd monitor in here but the image is looking nice, without cut offs...
Dekin O'Sullivan
10,749 PointsAh ok Julian, yes that is precisely the problem: pic looks nice on small screens but not on big ones... Yet this is a big picture so I should not logically have this issue... :(
Julian Aramburu
11,368 Pointswhat about not using background-position?
Dekin O'Sullivan
10,749 PointsThen I only get the very top of the picture... :(
Julian Aramburu
11,368 PointsI can't test it myself since I dont have a fhd monitor in here but I guess you can try something like "center top" combination or anything like "x% y%"
Dekin O'Sullivan
10,749 PointsSure, tried that but the problem with simply moving the image around is that i still to much of the image is cut out... So for example I only get the top but lose the bottom etc. I need a way to scale the picture smaller when in "cover"... Could it be the resolution of the picture which is too high? Could having a pic with less quality or smaller size work?
Dave McFarland
Treehouse TeacherThe problem is in the background-position option -- background-position: center; -- this centers the background image in the center both horizontally and vertically. If you do background-position: top center; the image will always be at the top of the screen. This would mean cutting out some of the top of the image so that the mountain would always sit on top of the page.
Dekin O'Sullivan
10,749 PointsHi Dave,
Many thanks for your answer. Your solution worked great for my "Partners" page (please see my website: www.rothornpartners.com). I used it in conjunction with a media query for large screens (so the image goes back to just "center" when on smaller screens). This picture's resolution is 1486 x 703 px by the way. I think the general composition of the picture makes your solution work well.
However it works less well with the picture on my "Contact" page. You can see the full original picture size when reducing the browser window. However, when using full screen on a desktop, the image is zoomed in too much and much is lost. If I use "top" then I completely loose the bottom of the pic. So I decided to use "bottom" in conjunction with a media query. The result is that you get the nice full original image with small screens and only the bottom part of the picture on big wide ones. The result is still ok but obviously not fully satisfactory. Is there any other way you can think of to fix this? That picture's dimensions are 1296 x 826 px by the way, so quite large...
Are there for example pic resolutions that could work better than others? (meaning some picture formats simply do not work as they force "cover" to zoom in too much?) Are there solutions using different more advanced programming languages than CSS and HTML? A website like http://www.greenhavenroad.com/ have exactly the same header image setup but don't have this problem (the image is whole and perfect whatever the screen size). Are they using more advanced programming techniques or simply better picture formats?
Many thanks
Dekin O'Sullivan
10,749 PointsDekin O'Sullivan
10,749 PointsWaow, many thanks Dave! Great answer and fantastic analysis of the greenhavenroad website! Those details had eluded me. I will communicate your answer to Rothorn Partners (I am interning with them. I designed and programmed their website from scratch using what I had learnt on Treehouse!). They are very happy with the website but I wanted to get some closure on this issue. Great to know I did the best I could do with what I had and know!
This is my 1st semi-professional website so I am very proud, happy and thankful to the whole team at TeamTreeHouse for making it possible. I am looking forward to continuing to learn with you and improve my skills! I will definitely check out Guil's new workshop!
Best