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 Molly Christison
Molly Christison
4,882 Points

Image Background Issues

I can't seem to get the background behind my third image to disappear behind the image like it does for the others. Any advice for how to do this would be greatly appreciated!

Molly Christison
Molly Christison
4,882 Points

Here's my code:

https://w.trhou.se/eqmh4j2fmf

Frances Parkin
Frances Parkin
7,760 Points

it would be more helpful if you posted code to codepen ( http://codepen.io/ ) or somewhere similar as I can't see how to preview your work on the treehouse workspace.

Instead of posting the whole page, isolate the problem and just post the problem to codepen (or somewhere similar) as ppl who help prefer for you to make it easy for them to identify the problem

A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

Frances, you can preview if you fork the workspace to your own Workspaces. (Why you can't preview from someone else's Workspace is weird, though.)

Molly, if I understand your problem, the issue is that your image is a certain fixed size, and the <li> element should be the exact width of the image, so there's no extra space left and right - it sits flush like the others.

(Edited out stuff that wasn't correct...)

OK, had a look at it, it's actually your HTML. From what I could see, it was two things:

1) The image was narrower than the li. As a quick fix, applying width=100% to the img element made it take up the appropriate width, although it is very tall, so the row is now a bit unbalanced. There are ways to fix this but you'd need to use a div and set its background-image properties instead of merely including the image directly in the li.

The sample images were pre-sized for the project, whereas in a real site, they will either need to be cropped or otherwise altered using CSS to fit in a grid layout.

2) The image's <a> tag wasn't closed properly, as far as I could see. Closing the tag helped.

Have a look at my edited version here: http://port-80-iplog0dsa8.treehouse-app.com/portfolio.html

Frances Parkin
Frances Parkin
7,760 Points

Thanks for the tip A J Kandy. I managed to fork the workspace now.

2 Answers

Perry Eising
Perry Eising
12,663 Points
Perry Eising
Perry Eising
12,663 Points

Molly - the issue here is that you are using a portrait-oriented image for the third image as opposed to a landscape formatted image. The code here only works if the image is wider than it is high.

You could crop your image so that it has the same proportions that the other images use, or, I you can change the code to wrap the image in another tag and set that tag's background to white (or the color if your background if you change it from white to somehting else):

Change your html like so:

<li id="clay">
    <a href="http://sixtyfivebooks.tumblr.com/post/67665600877/11-the-amazing-adventures-of-kavalier-and">
        <div><!--this div has a style that will set its background to the same as the page-->
    <img src="img/clay.jpg" alt="Book cover: The Amazing Adventures of Kavalier and Clay">
        </div>
    <p>A book review from my personal <a href="http://sixtyfivebooks.tumblr.com/">blog.</a></p>
    </a>

and your css like so: 

#clay div{
 background-color:white; 
 border: 1px solid red; 
}

the border is really just there to see how the box works. you should remove it.

hope this helps.

-perry

Molly Christison
Molly Christison
4,882 Points

Thanks Perry!

Is there any way to set the code so that it naturally flexes around whatever type of image I choose to use? Not all of my portfolio images will be uniform, so I'm wondering if there's a way to make the code adapt to the image size.

A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

The only way to make a layout that flexes to adapt to different image widths and heights is to use a Javascript-based solution called 'Masonry' layouts, so called because it tiles images together like bricks. Different solutions sometimes reduce all images to the same width and then fit them in (for example, Archive view on a Tumblr blog does this), others keep the images as-is and then calculate where to lay out images based on free space.

With basic HTML/CSS, you can either hardcode things around the widths of your images (not recommended) or use different kinds of structures.

A more advanced solution than simply inserting the image inside the list item would be to use a div, and set the div's background to the image; then using a property like background-cover to "fill" the div (cropping the image somewhat). This is overly simplified, but there are many ways to "crop" images using CSS.

Frances Parkin
Frances Parkin
7,760 Points
Frances Parkin
Frances Parkin
7,760 Points

The problem is that when you look at responsive.css you see

gallery li {

    width: 28.33333%;
}

thus all the gallery items are set to a fixed width in desktop view and are unresponsive to changing image sizes.

Perhaps you could try nesting the image and text in a div and styling the div so that the div styling will respond to different widths? Obviously the div would have to sit within gallery li.... Also note that you'd have to think about your mobile view styling in main.css also

Please bear in mind that I'm just a student too so its just an idea. Let me know how you get on.