Is there a way to align the image centered with the ticker box there?
Is there a way to position the image centered?
https://jsfiddle.net/rswjq81g/
There’s no ticker box in that demo?
When you say ‘centred’ do you mean ‘not centred’ in the red outlined box but centred vertically in the available space above the ticker?
Which effectively means it won’t be centred in the video and that also means the play button would need to be moved?
Can you clarify and post a demo with the ticker in place so I can see it 
My bad: here: https://jsfiddle.net/5u6fryw3/3/
I was only referring to the image, but now that you brought up the play.
Any of that able to be done?
Know of any good x y pos generators?
The image is background-position: 188px 48px;
But that doesn’t help with centering it.
That is close: https://jsfiddle.net/v28Lo9xj/1/
background-position: 188px 35px;
That won’t work thought because image doesn’t stay centered.
The ticker is 28px tall so you can position video-one:after 28px up from the bottom.
.video-one::after{bottom:28px}
That will center the image in the available space.
If you do the same for .play it should stau in sync.
.play{bottom:28px;}
1 Like
I thought you could work that out for yourself. The height is reduced by 28px so the background-size of the image would be changed accordingly.
e.g.
41.25% 79.52%
If my math is correct,
How come the image looks stretched here? https://jsfiddle.net/xvro2k9f/’
What should the math have been? 360% is wrong?
background-position: center;
background-size: 56.25% 360%;
background-repeat: no-repeat;
z-index:-1;
It doesn’t look like this:
360 / 640 = .5625 = 56.25%
360 / 360 = 1 = 100%
i.e. 56.25% 100%
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.