Background image underneath div

Hi,

I have the following fiddle in which I am trying to get the background image to appear under the yellow div, but I can’t seem to work it out. I’ve tried playing with top but it doesn’t seem to work.

Does anyone know how I can achieve this?

Thanks!

The image seems to be in place ok ?

Ah sorry, I forgot to say this is on mobile. So the image would appear under the yellow box on mobile.

Try a z-index for the yellow div

Thanks, the z-index isn’t the issue, I mean like this:

So the image is under the yellow box

The ‘Enter Now’ image?

It’s the background image:

image

z-index is the only thing I can think of to display elements over or under another one, but @PaulOB knows best, as I don’t know what else to suggest :slight_smile:

Thanks. Sorry, it’s not the layers of them, its the location of the image, so having it directly under the yellow box, like they are stacked on top of each other. Not sure if I have explained this very well, sorry!

Nah, don’t worry :slight_smile: . I hope you can get it worked out soon. Good luck!

The image is underneath but if you want to show a bit more you will need some padding on the bottom or pad out that element with the text that’s already there.

If you want more of the image at the bottom you could use background-position and background-size to create an effect like this.

jsfiddle.net_toolman_6x4fuhcn_

e.g.

   .featured-competition-wrapper > .row{
     padding-bottom:100px;
     background-size:100% 200px;
     background-position:0 100%;
     background-repeat:no-repeat;
    }

Of course that will stretch the image so you may need to find a height that matches the aspect ratio.

2 Likes

That’s awesome, many thanks! I will need to play a bit with the padding to get the height etc.

Thanks again!

I have now added this live to this website:
https://www.bansteadlocal.co.uk/

Can i ask if anyone can test the yellow competition box on all devices to make sure it looks ok? I have a little bit of an issue when on mobile in which the background image moves upwards and cuts off a bit.

Many thanks :slight_smile:

You can check for yourself using dev tools in responsive mode and just drag the window smaller or larger or use the device setting. It’s a good rough guide.

Anyway here’s a screenshot from my iPhone.

Note that your animation at the top of the page (Discover …) causes the page to reflow and jump up and down when words break to a new line. You need to ensure that does not happen as it is very jarring and bad for users with visual disabilities.

Maybe set a smaller font size so the words don’t split and therefore don’t increase the height.

I can’t offer code as on a mobile at the moment and won’t be back at my desktop until tomorrow afternoon.

Many thanks for the reply.

Yes I do use the developer tools and scale down, but wondered what your opinion was of it. I still need to fix the rotating text on the banner so will take a look at that.

I’m wondering if the background image needs moving down on the mobile view.

There is an incredible amount of code for a fairly simple web page, also loading of 93 external resources.

No wonder Google Lighthouse gives a poor score for performance:

banstead

It’s a WordPress site so has lots of scripts. I will be optimising it before I launch it. I am still in the early stages of building it.

Your background is stretched over the whole element unlike the example I gave where it was resized and just placed at the bottom.

I would suggest that when you change the arrow to downwards that you remove the background image from the the parent element and apply it to the element that follows the arrow (you have an empty div there anyway). You could apply the background to that empty element and just give that a height and use background-size:cover for the image instead. You could use a negative margin-top to drag it under the arrow.

I also note that you have some magic numbers in there with massive margins to push elements down. That should be avoided at all costs and you need to find a method that doesn’t use those magic numbers because they only work if you never change anything,

1 Like

Thanks for the suggestion and that makes sense to do that which I have now done by adding the background image to the empty div. I have also removed the margins! :slight_smile:

Thanks again!

1 Like

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