how I can insert a border with background white 50% inside an image and 50% outside an image?

[johannes999]

Hello,
I want to insert a border or box with width 92% and height 220px on the bottom of my website home image . the border has to be 50% inside the image and 50% ouside the image.I want to insert text in this white background border.
I treid everything I made border in photoshop with background white with 0.1px solid black line . but it is not working . inside the image the section that has to be white it is standing in its origin color.
I searched in google and in youtube but I couldn’t find any solution or answer.
can some one tell me how I can solve this problem.
I saw some websites using even 4 boxes with width of 20% and height of 500px with white background and inserting some text in it.
please see my website:https://webdesignleren.com/ to understand what I mean.
thanks

[dsonesuk]

You can't! img element is void element its unable to hold any content. Best you can do is use use block or inline-block element such as div or figure element https://www.w3schools.com/TAgs/tag_figure.asp and use margin or padding to give you spacing you need.

[johannes999]

thank you very much,

I saw that the class has to be inside the site-header like this in my case :

<div class="site-header">        <!-- site-header --> 
	
			<div class="site-title ">		  
	X Auto Service</div> 
     


	  <div class="header-menu">					
			<ul>				
				<li><a href="http://webdesignleren.com/" > Home </a> </li>
				<li><a href="http://webdesignleren.com/onderhoud/" > Onderhoud </a> </li>
				<li><a href="http://webdesignleren.com/banden/" > Banden </a> </li>
				<li><a href="http://webdesignleren.com/apk/" > APK </a> </li>
				<li><a href="http://webdesignleren.com/contact/" > Contact </a> </li>	
						
				
		  </ul>  </div> 
		 
			
		
		
		<message>
	<h1>  <span>FULL</span>   <span>SERVICE</span>   <span>OF</span>  <span>AUTO</span>   <span>REPAIR</span>
  <span>And</span>  <span>Maintenance</span>  <span>PROFESSIONAL</span> <span>HELP</span>   <span>AND</span>
  <span>DURABLE</span>  <span>REPAIR</span>  <span>SERVICE</span>  <span>place</span>  <span>on</span>   <span>your</span>   <span>own</span>   <span>thinking.</span>
</h1>
	
			</message>     		
		
		<div class="box">   <div class="box-item1"> hello 	</div>  
			<div class="box-item2">  hello   </div>     <div class="box-item3">  hello   </div>  
		</div>                              
	
	</div>

and the CSS:

.box {
display:flex;
width:92%;
float:left;	
margin-left:4%;
border:0.1 solid;
box-shadow: 0px 0px 2px 2px #C8C8C8;  
box-sizing:inherit;
	/*-moz-box-sizing: border-box; 	*/
background-color:red; 

height:200px;
margin-top:26rem;	
}
.box-item1{

color:black
	
}

.box-item2{
justify-content:center;
color:black	
}

.box-item3{
	color:black;
	justify-content:flex-end;
	
	
}

you can see on :https://webdesignleren.com/

it is succeded . it can not be outside the  div class of the site-header also flex is causing problem . I used percentages.

thank you for usefull information