Placing Background Image in a Rhombus Shaped Container Is Causing the Container to Lose Its Shape

div {  display: inline-block;  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}

<div>  <img src="http://www.fillmurray.com/400/400" />  </div

How to center image inside diamond shape div? - CSS, HTML

1. How can I center image inside diamond shape div? This is because the image must be changed in the CMS by the customer.

You are already do this with transform-origin: left center; Is there a different way you want this centered?

2. How can I center text/title in diamond shape div? Also has to be changed by customer.

Please see the CSS below to see the changes I made to your CSS class.

3. Is it possible to zoom out image a bit?

I zoomed out the image by changing the height of the image. I added some margin to the top of the image to center the image vertically. The issue with centering images vertically and horizontally inside of custom divs is not knowing the size of the image that one of your customers will be uploading. I do not know what CMS you are using but if there is a way to crop the image via code or prompt the user to upload a picture with a certain dimension it will be easier for you to design this element of the site.

.wrap {
  display: inline-block;
  overflow: hidden;
  width: 150px;
  height: 150px;
  margin: 25px;
  transform: rotate(45deg);
}

.wrap img {
  display: block;
  transform: rotate(-45deg);
  transform-origin: left center;
  height: 300px;
  margin-top: 15px;
}

.title-wrap {
  width: 100%;
  text-align: center;
}

.travel-title {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  color: red;
  font-weight: bold;
  font-size: 30px;
  transform: rotate(-45deg);
}

<div class="wrap">
  <img src="https://farm3.staticflickr.com/2178/3531465579_8bff044e9b_z.jpg?zz=1" />
  <div class="title-wrap">
    <div class="travel-title">Title</div>
  </div>
</div>

.container {  width:300px;  height:300px;  margin:auto;  position:relative;  overflow:hidden;}.container > div {  position:absolute;  width:100%;  height:100%;  border-radius:80px;  transform-origin:top left;  transform:translateX(-20%) rotate(-45deg);  overflow:hidden;}.container > div:before {   content:"";   position:absolute;   width:calc(100% * 1.4);   height:calc(100% * 1.4);   transform:rotate(45deg);  transform-origin:top left;   background:    linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),    url(https://picsum.photos/300/300?image=1069) top/cover;}

<div class="container">  <div></div></div>

.box {  width: 150px;  height: 150px;  margin: 60px;  /* this is your border*/  outline: 2px solid;  outline-offset: 15px;  /**/  overflow: hidden;  display: inline-flex;  align-items: center;  justify-content: center;  transform: rotate(45deg);}
.box::before {  content: "";  display: block;  width: 141%;  height: 141%;  flex-shrink:0;  background: center/cover;  background-image: inherit;  transform: rotate(-45deg);}
body {  background: yellow;}

<div class="box" style="background-image:url(https://i.picsum.photos/id/1003/800/800.jpg)"></div>
<div class="box" style="background-image:url(https://i.picsum.photos/id/1074/800/800.jpg)"></div>