[Resolved] background image in section won't position to bottom

[Elizabeth]

Hi there,

I’m using CSS to put a small image in the background of one of my home page sections (NOT using the background image in the section settings) and for some reason can’t get it to sit at the bottom of the section. What am I missing? It’s the image of the guy in the “contact a rep” section…

.rep.background {
background-image: url(https://theimagelink.png);
background-repeat: no-repeat;
background-size: 30%;
background-position: 20% 0%;
}

[Leo]

Hi there,

Not sure if I fully understand.

This is what I’m seeing:
https://www.screencast.com/t/79xa6QzZ

The background-position setting is definitely what you need to adjust to reposition it.

This is a good article:
https://css-tricks.com/almanac/properties/b/background-position/

[Elizabeth]

Hi Leo,

Your screenshot is the correct section and image I’m struggling with- but did you notice it won’t sit at the bottom unless the screen is stretched really wide? I have background position indicated with CSS – but whether I use 0% or the bottom keyword it still won’t sit at the bottom (unless the screen is stretched really wide). Otherwise it floats right at the top edge. I have the bottom margin for that section at 0, but can’t think what else must be interfering? So frustrating!

[David]

Hi there,

instead of:

background-size: 30%;

try:

background-size: contain;

[Elizabeth]

Hi David,

Tried that but it enlarged the image on desktop, and still gave a gap on tablet and mobile. I have switched background-size to auto and also jet tried background-origin and background clip to no avail… something is up and I can’t figure it out.

[Tom]

What if you turn off the parallax option and then set your background position to left bottom?

[Elizabeth]

Yay, that worked, thanks! Before I close this topic, can you share the css for how to hide this background image element on tablet and mobile please?

[Tom]

You could try this:

@media (max-width: 1024px) {
   .rep.background {
        background-image: none;
    }
}

Let me know 🙂

[Elizabeth]

Excellent, thanks again!

[Tom]

You’re welcome 🙂

[Author]

Posts