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

Grace Faires
Grace Faires
5,435 Points
Posted by Grace Faires
Grace Faires
5,435 Points

Background image not scaling correctly since changing to PNG

hey :)

I have a few divs on my page where I had used SVGs as background images, but I decided to switch them out for a different file type as it wasn't a necessity and PNGs would work fine, except when I changed the file path to the PNG, the background image no longer scales or responds to any of the media queries.

The PNGs are direct exports from the same Ai file as the SVGs, so the file is the same height and width, and I have changed nothing else within my code. I have other PNGs on the page which are responsive and work with the media queries, so is it just something to do with swapping the files?

Is there something I'm missing? why is this happening?

thanks in advance! this is driving me crazy!

1 Answer

Julie (Howard) Lewis
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Julie (Howard) Lewis
Front End Web Development Techdegree Graduate 25,921 Points
Julie (Howard) Lewis
.a{fill-rule:evenodd;}techdegree seal-36
Julie (Howard) Lewis
Front End Web Development Techdegree Graduate 25,921 Points

Are your image links in the CSS or the HTML? Can you paste a code snippet? It sounds like there's just something you need to tweak with how your PNGs are being selected and styled in the CSS.

Grace Faires
Grace Faires
5,435 Points
Grace Faires
Grace Faires
5,435 Points

My image links are in the CSS...

<div class="profile grid_6 alpha">
    <p class="grid_10"> text here></p>
    <a href='#!' class='button'> Click Here</a>
</div>

<div class="profile2 grid_6 alpha">
    <p class="grid_10"> text here></p>
    <a href='#!' class='button'> Click Here</a>
</div>

.profile {
    background-image: url('../img/'profile.png');
}

.profile2 {
    background-image: url('../img/'profile2.png');


}

...that's essentially it, literally all I have changed is the file from '.svg' to '.png' and it breaks the layout.

The other thing I've noticed is that if I set this width to 100%, it also breaks the layout and the div spans the full width of the grid, instead of staying within the 'grid_6' class that's assigned to it... could that be something to do with it?