0

I have searched this problem a long time. Also have tried it many hours, so i ask help.

First, want get rid of those blurred borders of that div background image. Second, i want put that text div inside of that blurred background div. Cannot find the way. This is my HTML course practice.

This is HTML and CSS code:

.blurredback {
  background-color: #ffffff;
  background-image: url("../img/background.jpg");
  height: 200px;
  filter: blur(2px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-text {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}
<body>
  <div class="blurredback">
    <div class="bg-text">
      <h2>Blurred Background</h2>
      <h1 style="font-size:50px">Hello.</h1>
      <p>Welcome to the world!</p>
    </div>
  </div>
Ram Segev
  • 2,321
  • 2
  • 9
  • 23
Osmankaapa
  • 55
  • 5

1 Answers1

-1

give margin: 0 auto; to any of the main div here.

user3828351
  • 19
  • 4