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
Brady Jones
13,119 PointsHi, im working on my portfolio site, it's another site template im editing. Theres a few issues Im having...
im having trouble filling the image container. Not sure what to do. Here is my code:
<section class="contact-section bg-dark-alfa-60 parallax-2" data-background="images/full-width-images/section-bg-5.jpg" id="about" style="height: 550px; background-image: url("images/full-width-images/section-bg-5.jpg"); background-repeat: no-repeat; overflow: hidden; background-size: cover; background-position: center center; min-height: 100%;"> <div class="container relative">
3 Answers
Abdul Zainos
4,938 PointsHi Brady,
It looks like you're adding styling directly inside your HTML. The community highly recommends you do your best to separate styling from structure; however, sometimes it is necessary.
Since I can't really see your issue I have to go based off of what I think your code would have rendered. The code you currently have up would have rendered an image that has an absolute height of 550px, with a min height of 100% to make sure the image doesn't skew. So I get it. To fill a container you'd have to first define the container with a height and width. If the container you are using to contain the image is too big (bigger than the picture), you'll need to either find a different picture or include "background-image: cover" in your styling.
Hope this gets you going in the right direction.
Brady Jones
13,119 PointsThank you both for the answers. Im using sublime text for my coding, ive just taken a screenshot of my issue but im unsure how to then send it to you guys...??
Thanks
Steven Parker
243,656 PointsScreenshots only illustrate the problem, but the solution will normally be found using the code. Besides workspaces, code can be shared via Github repo's, Codepen projects, JSbin or JSfiddle (or other similar online REPOs), or by posting it here — but be sure to quote it properly using Markdown if you do that.
Brady Jones
13,119 PointsBelow is the code
<section class="contact-section bg-dark-alfa-60 parallax-2" data-background="images/full-width-images/section-bg-5.jpg" id="about" style="height: 550px; background-image: url("images/full-width-images/section-bg-5.jpg"); background-repeat: no-repeat; overflow: hidden; background-size: cover; background-position: center center; min-height: 100%;"> <div class="container relative">
Steven Parker
243,656 PointsThat appears to be the same snippet from the original question, which is clearly not enough of the code to illustrate the issue.
And the instructions for formatting are in the Markdown Cheatsheet pop-up found below the "Add an Answer" area.
Steven Parker
243,656 PointsSteven Parker
243,656 PointsThis is a case where you might want to make a snapshot of your workspace and post the link to it, to allow folks to try it out and see issue.