Member Avatar for phphp

Sir I have these codes

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

* { margin: 0; padding: 0; }

.box
{
    margin:auto;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:20%;
    height:200px;
    border:1px solid silver;
    padding:30px;
    position:absolute;
    box-shadow: 0px 0px 10px 10px #72B3D3;
}

.fit
{
        background-size:contain;
        background-repeat:no-repeat;
        background-position:center center;
        opacity:0.5;
}

.image1{
    background-image:url(accountsBG.jpg);
}

</style>

</head>

<body>

<div class="box image1 fit">
<h1> 1)Opacity must be applied only on background image <br> 2)Padding also does not work</h1>
</div>

</body>
</html>

Untitled.png

Opacity must not applied on whole div,
Opacity should be applied only on background image. Other contents must be remain normal.
Padding also does work.

Please

  • 2 Contributors
  • 3 Replies
  • 266 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for gentlemedia

If you set an opacity to an element then that element and its child elements will get that opacity.
So either set an opacity on that image in Photoshop or whatever photo editor you use or you can use a pseudo element (::before or ::after) for that background-image and set an opacity on that pseudo element.
You will get then something like this:

.box {
    margin:auto;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:20%;
    height:200px;
    border:1px solid silver;
    padding:30px;
    position:absolute;
    box-shadow: 0px 0px 10px 10px #72B3D3;
}

.box::before {
    content: ' ';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(accountsBG.jpg) no-repeat center / contain;
    opacity: .5;
}

And as far I can see of that image of yours the 30px padding is just there. The h1 is 30px of the edges. If you want the background image 30px of the edges, then you will have to set a background-origin: padding-box on that .box::before first in order to set a padding: 30px.

.box::before {
    content: ' ';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(accountsBG.jpg) no-repeat center / contain;
    opacity: .5;
    background-origin: padding-box;
    pading: 30px;
}
Member Avatar for phphp

Thanks for reply, actuall there are 10 boxes for that I want to use separate images. In this case how to use box::before?

You example will work only for one box, should I define separate boxes and box::before for all 10 boxes or something else?

Please

Member Avatar for gentlemedia

Just use .box::before for the base styles for the background image and then give all the boxes a unique class such as .box-1, .box-2, .box-3, etc. which you then can use for the seperate background images on .box-1::before, .box-2::before, .box-3::before, etc.

<div class="box box-1>box 1</div>
<div class="box box-2>box 2</div>
<div class="box box-3>box 3</div>
<div class="box box-4>box 4</div>
<div class="box box-5>box 5</div>
<!-- etcetera -->

Also you actually don't need in this situation the background-origin: padding-box for the 30px padding, you can create that with the top, right, bottom and left properties as well.

/* these .box styles/positioning are from my demo,
  * but you shoud just use your own styles and
  * positioning of course
  */

.box {
  position: relative;
  width: calc((100% - 20px * 5) / 5);
  height: 200px;
  margin: 10px 10px 20px;
  border: 1px solid #999;
  font-size: 150%;
  text-align: center;
  text-transform: uppercase;
  line-height: 200px;
}

.box::before {
  content: ' ';
  position: absolute;
  z-index: -1;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .5;
}

.box-1::before {
  background-image: url(box-1.jpg);
}

.box-2::before {
  background-image: url(box-2.jpg);
}

.box-3::before {
  background-image: url(box-3.jpg);
}

.box-4::before {
  background-image: url(box-4.jpg);
}

.box-5::before {
  background-image: url(box-5.jpg);
}

Little demo: http://codepen.io/gentlemedia/pen/pNXrmQ

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.