Background help

HTML-CSS
1

My page here

If you make your way down to line ‘149’ in my CSS you will see my 'bg-footer.top-mobile ’ has a curvy background on top.

At <350px the curvy background sits nicely on top with no gaps, however the background ‘leaks’ out to the right. I can stop this ‘leak’ by adding 100% width but then the background leaves a gap on top.

How do I get around this?

Thanks

desktop-preview
desktop-preview900×660 36.8 KB

2

Bump, still stuck on this one

3

You only have that problem because you’ve set the image to position:absolute, is there a reason for it? You can either adjust the top property to something like -5% (-8% for very small viewports, you’d have to find the exact value), but I think it would be much simpler to not take the image out of the flow of the document, and instead put it between the footer and the section above. If that causes a little white gap, set it to display:block.

2 Likes
4

Thanks jsdisco.

I chose position:absolute as I assumed that this was the only way to place the background without effecting the other elements.

But as you’ve just shown, moving the img between the footer/sections worked perfectly! Even the technique of using ‘block’ to close the gap is a wonderful tip I’d never have though of.
I want to do the same for the other backgrounds but I have a problem, the sections all have a top/bottom margin.

At line: 66, if you disable:
section {
margin: var(–margin-section);

The background is where I want it but if I want the margin to remain, what would be best?

Thank you

5

One of the first lessons I’ve learned in CSS - images are set to display:inline by default, which can cause that little gap, and it’s a difficult bug, if you don’t know where it’s coming from. I struggled for days with it… ever since, I set all images to display:block at the top of my CSS.

I’d put the images inside the sections, not outside of them. You might have to make some adjustments with an extra div for the background-color like this:

<footer class="i-have-no-background-color-but-a-margin-top-or-bottom">
  <img class="curvy-background" />
  <div class="i-have-the-background-color">
    <div>content</div>
    <p>more content</p>
  </div>
</footer>
2 Likes
6

Awesome tips, will use that global image method. Inline/block is still something I struggle with but I’m getting there, would never have guessed it for the image though.

Will give your div-background-color method a go.

Thanks once again!

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.