So I’m nearing finishing a first try of my portfolio page but there are some image problems that are giving me a hard time. The background image has that gap that is preventing it from filling the screen, which is showing the color of . Secondly, the image in the card is not showing up, just the alt text.
https://codepen.io/mikebly/pen/bdcfc5061413d8d58b1ff4d4b9f8fd6a/?editors=1100
Hello Mikebly.
Concerning the portfolio image that doesn’t show up, you simply forgot an " = " before the src in the image tag.
For the background-image, it comes from a bad pacing, your background div does not fit the whole screen. Try to delete the background-image and add “background-color : red;” to CSS to see what I mean.
Good luck !
I feel a little silly about the card images, staring at the screen for so long! I still want to improve how they look but at least the picture is there. Thank you!
I noticed that the image wasn’t stretching. I’ve tried moving around the placement but I cant seem to find something that works…Whenever I try to move the div.bg-img things seem to get worse haha, I’ve gotten it to overlay everything and not show at all. To try to force the size, I put everything between the and in a div.page-content so the images width & height attribute would be 100% of that div’s dimensions since that is the parent. I checked in developer tools to make sure page content is the right height and it is. I can add top padding to the image until the space goes away but I’m pretty sure there is a better way 
. Is there some padding or margin default I’m not thinking of? Some answers I’ve seen online point to setting the and with height = 100% but this did not work here.
Whenever you want to use a background image, you have to nest everything inside the div that has the said image as a background.
Exemple :
<div class = "background">
<div class = "stuff"></div>
</div>
that’s why it’s not working.
If you nest your whole portfolio inside the ng-image div than the image fits finely, but then you’ll have a depth problem.
That is what I thought and tried first, but when I had that basic layout as you have above, it moves the footer? If I move the footer inside the background div the gap is still there.
Edit: I found a fix that worked, though I am not sure why it had to be used in order for things to work? I noticed looking through Chrome’s dev. tools that both the body and html tags were not taking up the entire screen for some reason. I looked into this online and people said to set min-height: 100%. This made that gap go away and the image fit nicely…why would I have to set a min height for those tags in the first place?
