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

Tom Nunn
Tom Nunn
16,333 Points
Posted by Tom Nunn
Tom Nunn
16,333 Points

Best Practice for Background Properties in Media Queries?

Hi all,

I was wondering what would be best practice, when it comes to resizing and re-positioning an image for tablet and mobile devices?

.main-header {
    background: #fff url('../img/bg.jpg') no-repeat center;
    background-size: cover;
}

I would assume something like:

@media only screen and (max-width: 800px) {

    .main-header {    
        background-size: ?
    }
}

Many Thanks, Tom

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

I use the same as it resize anyway : p

Tom Nunn
Tom Nunn
16,333 Points
Tom Nunn
Tom Nunn
16,333 Points

Konrad Pilch I've just noticed my issue, maybe it's not possible as the content within the div where I have the background image responds so the height of this section expands, which almost pixelates the image in question.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Oh , i remembered, maybe set 100% height and width and maybe theres something wrong with ur divs.

1 Answer

Germán Campos
Germán Campos
18,374 Points
Germán Campos
Germán Campos
18,374 Points

It really depends on the situation itself. There are many ways or rather, situations in which you resize the background image of an element. These determine how you want to 'handle' them inside a media query.

I find myself using background-size:100% auto; or the reverse (and many variations in percentage values) depending on the challenge at hand. I don't like when my images get stretched in both directions and lose their aspect ratio (which makes them look odd or warped).

G

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

It depends Also what's the purpose of the image. And you can resize it on the break points Too.