As mentioned before, the correct way to do this currently, would be via CSS or JS, rather than replacing the image

On 12/2/2025 at 9:31 AM, Marc said:

As mentioned before, the correct way to do this currently, would be via CSS or JS, rather than replacing the image

I would disagree that doing a switch in the DOM after load is the correct way to do it. The correct way, in my opinion, is to load the correct asset on load, which should be a part of the Theme and not a general asset ;)

The way it is suggested, when the correct way is denied, is to rewrite the DOM is what I think you mean in this case :)

There is a reason why you have the image being shown as an asset in the image tag and not in CSS; otherwise, you would have it in the CSS connected to a class to begin with. It is strange to suggest that we upload an image and use CSS to hide the asset and then force the uploaded image in its place instead of just allowing that uploaded image to be used as the asset to begin with.

It is also strange that I have to have the same image for all themes if I don't hide and add a new image using CSS overrides.

Is there a reason for this that I am missing?

Nothing you are missing. By "correct way", I mean at present, this is the only way in which to do it using the software. So therefore from the point of view of issuing support, thats the only 'correct' manner in which to do this, as we dont advise changing things directly within the file system

On 11/20/2025 at 10:06 AM, Ehren said:

Sure. This will replace the default_photo.png image with your own. Add to your Custom CSS area:

/* Replace default_photo.png avatar */.ipsUserPhoto:has([src$="default_photo.png"]){
    background-image: url("https://site.com/avatar.png");
    background-size: cover;
}
	.ipsUserPhoto:has([src$="default_photo.png"]) img{
	    display: none;
	}

Hi, @Ehren is it possible to get the CSS code to also change the default profile cover photo?

I modified your code above as shown below, but I can't get it to work. Thanks

/* Replace default_photo.png avatar */.ipsCoverPhoto__container:has([src$="default_photo.png"]){
    background-image: url("https://site.com/avatar.png");
    background-size: cover;
}
	.ipsCoverPhoto__container:has([src$="default_photo.png"]) img{
	    display: none;
	}

54 minutes ago, beats23 said:

Hi, @Ehren is it possible to get the CSS code to also change the default profile cover photo?

I modified your code above as shown below, but I can't get it to work. Thanks

/* Replace default_photo.png avatar */.ipsCoverPhoto__container:has([src$="default_photo.png"]){
    background-image: url("https://site.com/avatar.png");
    background-size: cover;
}
	.ipsCoverPhoto__container:has([src$="default_photo.png"]) img{
	    display: none;
	}

Apparently, the cover photo is much easier to change with this CSS.

.ipsFallbackImage::before {
  background-image: url('https://yoursite.com');
  mix-blend-mode: inherit;
}

Edited December 5, 2025Dec 5 by beats23

Don't forget to reset the opacity too:

.ipsFallbackImage::before{
	background-image: url('https://site.com/image.jpg');
	mix-blend-mode: normal;
	opacity: 1;
}