Background Design

I want to create a background like this. But I don’t know how to do it. Anyone plz help.

1 Like

First, good luck on this.

I would look at Ionic Grid and CSS Backgrounds as the foundations to solve this design. Remember, Ionic is built on the web, so see of there an existing tutorial or design that might serve as a starting point.

You might need to engage a web designer to work through this, as I suspect there may also be other functionality that exists on this screen that would need to be accounted for.

Hi Vishal.

I think you should look at an easier way of accomplishing this for now, seeing that there would be some dev work needed as mentioned by Chris.

I would make the buttons as images in a grid/div column. Change the grey graphic loop design to maybe an arrow and include that within the image that you load to the grid.

However, a div column layout should accomplish the layout, as the columns have no padding - set image to 100% and the page setting to now padding.

An easy way of accomplishing this, without working in code view only, is the HTML component.

Drag HTML Component in and paste the following code:

<div class="row">
  <div class="col col-50">  <a href-inappbrowser="#">
    <img src="https://s3.amazonaws.com/ionic-io-static/UsoO1TxTc2WJGym7zXaI_ailogo.jpg" style="display:block;width:100%;height:auto;">
  </a></div>
  <div class="col"><a href-inappbrowser="#">
    <img src="https://s3.amazonaws.com/ionic-io-static/UsoO1TxTc2WJGym7zXaI_ailogo.jpg" style="display:block;width:100%;height:auto;">
  </a></div>
</div>
<div class="row">
  <div class="col col-50">  <a href-inappbrowser="#">
    <img src="https://s3.amazonaws.com/ionic-io-static/UsoO1TxTc2WJGym7zXaI_ailogo.jpg" style="display:block;width:100%;height:auto;">
  </a></div>
  <div class="col"><a href-inappbrowser="#">
    <img src="https://s3.amazonaws.com/ionic-io-static/UsoO1TxTc2WJGym7zXaI_ailogo.jpg" style="display:block;width:100%;height:auto;">
  </a></div>
</div>
<div class="row">
  <div class="col col-50">  <a href-inappbrowser="#">
    <img src="https://s3.amazonaws.com/ionic-io-static/UsoO1TxTc2WJGym7zXaI_ailogo.jpg" style="display:block;width:100%;height:auto;">
  </a></div>
  <div class="col"><a href-inappbrowser="#">
    <img src="https://s3.amazonaws.com/ionic-io-static/UsoO1TxTc2WJGym7zXaI_ailogo.jpg" style="display:block;width:100%;height:auto;">
  </a></div>
</div>