Static image location on all devices

Hi everyone
I have a page with this background


and I want to place an avatar image inside the white circle on top
the problem is the location is different on each device (iphone, ipad, galaxy etc…)
this is my current html

<ion-navbar>
    <ion-title>Edit Profile</ion-title>
</ion-navbar>
<div class="row">
    <ion-avatar item-left>
        <img class="avatarImg" src="assets/img/marty-avatar.png">
    </ion-avatar>
    <span>Change photo</span>
</div>
<button ion-button block class="appColorsLeft appButton">{{ 'buttonUploadText' | translate }}</button>

and this is my current scss

page-editProfile {

ion-content {
    background: url('../assets/img/bg3.png') no-repeat center center fixed;
    background-size: cover;
    text-align: center;
}
.row {
    height: 70%;
    .avatarImg {
        margin: 0 auto;
        margin-top: 16%;
        border-radius: 50%;
        width: 30%;
        border: 4px solid white;
    }
}

}

any ideas how to keep the image in same location for all devices?

thanks

This is how it should be done, and all locations should be the same. Which devices does it work on? Does it work in the browser? Do you get any errors? Did you put the picture in the www/assets/img folder, instead of src/assets/img? You should put them in the latter.

When you build the app, the CLI copies the files automatically to the www folder.
You can reach all assets by this path: assets/img/your_image.png

I think the path in your SCSS file is wrong. Try it with assets/img/bg3.png

That’s the picture that was loading though, assuming I understood OPs post correctly. Since paths in CSS files are relative to the CSS file itself, not the document it’s included in, it should be fine. The CSS file would be in build/main.css, so it should be correct to write ../assets/img/file.png in the CSS :slight_smile:

https://www.w3.org/TR/REC-CSS1/#url

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

The path he wrote in the HTML should also be correct, so I’d assume that the file is completely missing on the device, possibly because of it being placed in the www/ folder, though I’d find it odd if he put one file in the www/ folder and another in the src/ folder :stuck_out_tongue:

Perhaps we need OP to clarify which picture wasn’t loading haha

I apologize if I was miss understood
the code works and I get no errors.
I’m running the app on android / iphone / tablet devices and the background and the
avatar image both appear.
the problem is in galaxy s4 the avatar image is exactly inside the white circle of the background
while in iphone 4 it’s a bit below the white circle and in iphone 6 it’s a lot below
it seems like each device places the image in different location, and I was wondering how
to make it stay in the same place across all devices?

Thanks

Oh, so that location… Okay, well, in that case I’d recommend removing the white circle from the background itself, and apply the following style to the avatar:

.avatar {
    position: absolute;
    top: 80px; /* Change this as needed */
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50%;
    border: 5px solid white;
}

Assuming the parent is full width. I think you need to be careful when you use ion-avatar, maybe just throw that away. I’m not entirely sure what function it has or how the “Change photo” is supposed to look. Maybe also a box-shadow, but that’s your call :wink: