Now how I changed the images. Using the 5 sizes on the simulator I chose the following dimensions.
background: 800x1280
header 1: 367x76
header 2: 800x44
- Bold is what the app specifics the height to be.
- The other numbers are based on the largest device.
- Small images will repeat to fill the empty space. i.e. when rotating the device.
- Smaller screens will just crop the images
Background image:
.user-menu { background: none; }
#main-wrapper { background: #1997d7 url(******); }
header 1:
.user-menu header { background: rgba(1, 65, 113, 0.7) url(******); }
header 2:
.header-main { background: rgba(1, 65, 113, 0.7) url(******); }
****** is the code provided by Base64 File Encoder.