Background-image and border
Question
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:
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...
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 ?
3 answers
solution1
3 ACCPTED 2018-09-26 23:56:34
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>
solution2
1 2018-09-27 00:33:06
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;
}
solution3
1 2018-09-27 06:07:12
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.