CODEWITHSUNDEEP
htmlcss
anais
anais

Reputation: 111

Background-image and border

I have a background image and I will wish add a border and a background white with a width of 18cm.Here is below an exemple:

enter image description here

We have the background image with a border and a background white inside..

Here is my realization below... My result is still mediocre I know but how to do to create the same thing? I search to create a border with a background white...

enter image description here

HTML

<div class="img_reg">
        <div class="contenair_reg">
            <span class="regtxtcolor"><i class="far fa-address-card"> Personal Information:</i></span>
            <p>Please use English letters and numbers in all field for registration before creating an account.</p>
        </div>
    </div>

CSS

.contenair_reg{
  padding-top: 60px; 
  padding-left: 320px;


}

.regtxtcolor{
  font-size: 26px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: bold;

}

Is it my HTML blocks are OK ?

Upvotes: 0

Views: 112

Answers (3)

Jerdine Sabio
Jerdine Sabio

Reputation: 6130

hi what I did was enclosed the < p > element in a div with class .reg_content_container so I could add a border below it. Please run snippet, thanks.

body{
  height:100%;
  background:url('https://edmontongazette.com/wp-content/uploads/2018/07/California.jpg');
  background-size:cover;
}

.body_padding{
  padding:60px 30px 0px 30px;
}

.contenair_reg{
  padding:15px;
  background-color:white;
  border-radius:5px;
}

.regtxtcolor {
  font-size: 26px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: bold;
}

.contenair_reg p{
  margin-bottom:8px;
}

.reg_content_container{
  border-bottom:3px solid #C22312;
}
<html>

<body>
  <div class="body_padding">
    <div class="contenair_reg">
      <span class="regtxtcolor"><i class="far fa-address-card"> Personal Information:</i></span>
      <div class="reg_content_container">
      <p>Please use English letters and numbers in all field for registration before creating an account.</p>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 3

Asiya Fatima
Asiya Fatima

Reputation: 1438

.box{
  background:url('https://preview.ibb.co/kv4XHU/66.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  height: 300px;

}

.box { padding: 150px 35px 0 35px; }
.box-content {
  padding:15px;
  background-color: #ffffff;
  border-radius: 5px;
}
.box-icon {
  font-size: 24px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: 700;
}
.box-content p { margin-bottom: 12px; }
.box-text{  border-bottom:3px solid #C22312; }
  <div class="box">
    <div class="box-content">
      <span class="box-icon"><i class="far fa-address-card"> Personal Information:</i></span>
      <div class="box-text">
      <p>Please use English letters and numbers in all field for registration before creating an account.</p>
      </div>
    </div>
  </div>

Upvotes: 1

Enrico Tenca
Enrico Tenca

Reputation: 94

You probably need to set a background-color and a margin. Use the padding for the background, not for separate from it's container.

.contenair_reg

Also you need a border bottom to the p tag, try something like this codepen

.img_reg {
  background-image: url(https://static1.squarespace.com/static/5459ec52e4b04d305f68f1ed/t/548a8e17e4b0dd3cb0247e7b/1418366488991/?format=2500w);
  width: 100vw;
  height: 100vh;
}

.contenair_reg{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 20%;
  padding: 30px;
  background-color: white;
  transform: translate(-50%, -50%);
  border-radius: 6px;

}

.regtxtcolor{
  font-size: 26px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: bold;

}

p{
  padding-bottom: 5px;
  border-bottom: 2px solid #C22312;
}

Upvotes: 1

Related Questions