# transparrent bg

**URL:** <https://forum.kirupa.com/t/transparrent-bg/634430>\
**Category:** web dev\
**Created:** [April 4, 2016, 5:38am UTC](https://forum.kirupa.com/t/transparrent-bg/634430 "2016-04-04T05:38:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Muhammad\_Uzair](https://avatars.discourse-cdn.com/v4/letter/m/e95f7d/32.png) [@Muhammad\_Uzair](https://forum.kirupa.com/u/Muhammad_Uzair)\
**Post date:** [April 4, 2016, 5:38am UTC](https://forum.kirupa.com/t/transparrent-bg/634430/1 "2016-04-04T05:38:15Z")

</div>

my div backgroun is transparrent opecity 0.5 but in the div data not show  
with transparrent  
i want to only div bg opecity

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 4, 2016, 2:31pm UTC](https://forum.kirupa.com/t/transparrent-bg/634430/2 "2016-04-04T14:31:59Z")

</div>

The `opacity` property applies to everything. If you want to only affect the background, then you have to explicitly set your background to be transparent. For solid colors, you can use a format like `rgba()` which includes an alpha channel value. So red would be `rgba(255, 0, 0, 0.5)`. If you have a background image, you can add transparency to that image itself (as a PNG), or you can use a separate HTML element in the HTML to represent the background and set `opacity` to that. There’s a trick you can do with that using the `::after` pseudo element in css that prevents you from having to add that to the HTML yourself. The CSS will add one for you. Here’s an example:

```
div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

```

source: [https://css-tricks.com/snippets/css/transparent-background-images/](https://css-tricks.com/snippets/css/transparent-background-images/)

---

<div class="post-metadata">

**Author:** ![Muhammad\_Uzair](https://avatars.discourse-cdn.com/v4/letter/m/e95f7d/32.png) [@Muhammad\_Uzair](https://forum.kirupa.com/u/Muhammad_Uzair)\
**Post date:** [April 5, 2016, 3:23pm UTC](https://forum.kirupa.com/t/transparrent-bg/634430/3 "2016-04-05T15:23:40Z")

</div>

ok i use background repeat in no use opecity