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 Andres Aguilar
Andres Aguilar
3,803 Points

background-size: cover behaving strange?

https://incaviking.github.io/International-Languages/

This is the website I'm working on.... on the "Insights" section, there's a background image I'm using that won't fill the space of the div with background-size: cover.

I threw some background colors and borders around the divs to illustrate my issue. I'm completely stuck on this. I've consulted some buddies who are senior devs but they didn't understand what the issue was either.

I just want the background-size: cover to fill the div! What am I doing wrong???

Here's a screenshot of the problem image in its current state:

screenshot 1

Here's a reference of the designs:

screenshot 2

Here's the relevant CSS....

.section5 { width: 100%; padding-top: 6rem; border: 1px green solid; }

.section5b { width: 55%; position: relative; z-index: 1; border: 1px solid green; }

.blog-image-home-1 { background-image: url(./assets/img/pexels_photo_407237@2x.png); background-size: cover !important; background-position: center; background-repeat: no-repeat; border: 3px orange solid; width: 100%; height: 300px; background-color: teal;

Here's a screenshot of the HTML:

screenshot 3

anyone got any advice?

2 Answers

Tyler Duke
Tyler Duke
4,344 Points
Tyler Duke
Tyler Duke
4,344 Points

Hey,

So the dimensions of the image are something to take into consideration. There a few things you could try. The simplest would just be setting the width and height like so:

background-size: 930px 500px

background-size: contain will stretch the image as much as it can without cropping or deforming it, but it won't fill the background

background-size: 100% 100% will force it to stretch but will cause deformation without cropping it

Andres Aguilar
Andres Aguilar
3,803 Points

Thank you for taking the time to respond. I appreciate it. The .png image had some transparent margins around it and nowwww this will never happen to me again. haha learning moment.

Andres Aguilar
Andres Aguilar
3,803 Points
Andres Aguilar
Andres Aguilar
3,803 Points

YOOOO nevermind. I had some transparent margins around the image I was using. Problem solved.

Tyler Duke
Tyler Duke
4,344 Points

There ya go. I was thinking there were margins around it, but I couldn't seem to find anything of the sort in the inspector. Glad you figured it out.