Hi there,

My question is kind of 2 questions in 1...

I have a container and I have added a background image to it and set Repeat <off> and Size <contain>.

I'd like to know if there's a way to have this image centred within the container and also, when I alter the screen size, for it to automatically adjust the size of the image to always be centre. What's happening with me at the moment is that the image is always to the left, and then when I decrease the image size, the image disappears so I have to add it again to that screen size, then when I decrease the screen to a lower breakpoint, the image disappears, and I have to add the image again... I thought that with At Breakpoint set to <no breakpoint - all widths>, logically, that means the image will always be present, I shouldn't need to add it for each breakpoint.

So I guess, my question is; how do I get an image I insert to appear at ALL breakpoints (adjusted in size of course), and how do I centre the image? I think the next follow on question would be, I want to add a paragraph container over the image but it would be a smaller width so that the text always appears in the centre of the image with the image always appearing in the centre of the screen.

Thank you ...

RSD v5 build 3470

Hi
In the background image thingy (display new image)there is just above the bit "Contain" there are is a bit "POSITION"
2 adjustments horizontal, vertical

open the dropdown there you will see the position center for the horizontal (along with others)

You must remember to start "MOBILE FIRST and adjust the width ao the container accordingly in order for the background image to look ok

You need to set breakpoints to Default then start MOBILE FIRST, that way you don't have to keep changing the image

Hi Wayan,

Thank you very much for that. I'll try that and hopefully that should work and will let you know.

Maz

if not then there may be some more tweaking to do, which means sending the project file so that we can have a bo-peep as to what's going on, background image positioning/size etc are a bit of a pain in the posterior to get right

Yep... the image is now centred, excellent. Is there a similar thing for a text box or paragraph container? I've tried the margins and padding as you can see from the attached image and when I alter the screen size in preview, the grey highlighted box automatically remains in the centre but the problem is, I can't remember how I did this!

The orange-shadowed text above it (just test text) remains left and I want to centre this as well. When I set the right hand margin to 25%, it centres, but this is the wrong way obviously because as I change the screen size, the 25% isn't uniform in its displacement.

So ideally, if there's a similar thing as in centring the image, it would be great.

BTW, what's weird is that when I adjust the screen size, the greyed out box remains centred but the orange-shadowed text box moves out of centre as I reduce the screen size. A global setting (as in the image one) is what I'm looking for.

Thanks again... Maz

Is the text within a container of its own?
if yes then you can FLEX it
(MOBILE FIRSTthat way you shouldn't need to keep adjusting or altering it)

or flex the whole container to
column then all items = center

Hi,

I think I've sussed it.

I added a container over the image and made the width 90% and then found the ALIGN SELF=CENTRE in the Flex and Block settings which both seemed to work.

I can then add a paragraph box in the container and it should solve my problem I think. Will try that tomorrow.

Thanks, Maz

If you struggle and you don't want the whole world to see your project file yet then you can just send it ti my email (address is in my profile) vial youtransfer,com I can then do a video thingy showing a how to watch listen & learn demo ,