How to achieve this in Ionic

1

I am not a CSS expert, but how would you go about implementing the top portion of this ui:

image
image.jpg333×588 35.1 KB

I am looking for:

  • background Image spans from edge to edge (not skewed when viewed on different device types), also blurred/darkened so light font shows up
  • circled bordered profile picture centered on top of background

These images will be dynamically pulled from backend.

2

Ok, there are 3 tasks there:

  1. The background properly display: use background-size: cover. It will automatically resize to cover all the space available, keeping aspect ratio.

  2. The blurring: owe this one for now

  3. The centered image: Just use text-align: center on the image’s parent

3

Thanks Sid - I will try that