# How to create an image in css

**URL:** <https://community.glideapps.com/t/how-to-create-an-image-in-css/43668>\
**Category:** Ask for Help\
**Created:** [June 29, 2022, 3:34pm UTC](https://community.glideapps.com/t/how-to-create-an-image-in-css/43668 "2022-06-29T15:34:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [June 29, 2022, 3:34pm UTC](https://community.glideapps.com/t/how-to-create-an-image-in-css/43668/1 "2022-06-29T15:34:53Z")

</div>

Hi

How to create a css for this.Have use the one in notion but it’s not coming like this.how to do this.

 ![IMG_20220629_205452](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/0/e01f2d638f73a0b2797c32adca89b7b952949c83.jpeg)

---

<div class="post-metadata">

**Author:** ![antoniedik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antoniedik/32/44061_2.png) [@antoniedik](https://community.glideapps.com/u/antoniedik)\
**Post date:** [June 29, 2022, 5:07pm UTC](https://community.glideapps.com/t/how-to-create-an-image-in-css/43668/2 "2022-06-29T17:07:07Z")

</div>

please open this link and learn.

`https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2`

if you want to change the code, go to `codepen.io` to see firsthand the results of writing the css code.

# experimenting is fun 😆

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [June 29, 2022, 6:20pm UTC](https://community.glideapps.com/t/how-to-create-an-image-in-css/43668/3 "2022-06-29T18:20:40Z")

</div>

Can you tell me which one should use in the notion link. Tell me heading or that particular link.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [July 1, 2022, 12:22pm UTC](https://community.glideapps.com/t/how-to-create-an-image-in-css/43668/4 "2022-07-01T12:22:36Z")

</div>

```auto
</div></div></div>
<div style="background-image: url(COVER-IMAGE-URL);
   -moz-border-radius: 50%;
   -webkit-border-radius: 0%;
   width:120%;
   height:200px;
   background-attachment:scroll;
   background-size: cover;
   background-position: center center;
   position: relative;
   z-index:1;
   opacity:1;
   transform:translate(-50%,-55%);
   left:50%;
   margin-top: 12px; border: 3px solid #c3c3c3; background-color:red;"></div>

<pre><span><style>
[data-test="glide-app-bar"] :nth-child(1) {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
}

#app-root [opacity='1'] {
color: transparent;
}

[data-test="nav-bar"] >div +* {
  color: transparent !important; 
}

```

@Manikandan_R Try this one ☝

> 📌 Replace **COVER-IMAGE-URL** for the column of hte image.