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 Darren Healy
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Need some help with background-images

Hi there,

I have just launched a new WordPress site for a client - but there's some issues surrounding background images - only on tablet and mobile screen sizes.

If you visit - http://www.billingtonsoflenzie.co.uk/ - on a desktop you should see the background images on the homepage and on the menus page display fine. But when viewed from a mobile it's as if the images are not sizing to the container. I'm not entirely sure why.

This is the CSS I am using for all give or take a few extra tweaks on positioning for the particular image: 

.jumbotron.home {
    margin: 0;
    background: url("images/billingtonsshopfront.jpg") no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 500px;
    color: #FFF;
}

Do you see anything?

Bogdan Cabaj
Bogdan Cabaj
16,349 Points
Bogdan Cabaj
Bogdan Cabaj
16,349 Points

Looks like you have fixed the issue. I do not see any issues on the website.

1 Answer

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points
Darren Healy
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

I think I did - thank you for the reassurance. The issue was with the background-attachment: fixed; property - that seemed to be causing the issue.