<html>
<head>
<style>
/* Add some styling for the webpage */
body {
margin: 0;
padding: 0;
}
.header {
background-image: url('https://picsum.photos/id/237/1600/900');
height: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.header .text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 36px;
}
.container {
display: flex;
}
.column {
flex: 33.33%;
padding: 10px;
}
</style>
</head>
<body>
<div class="header">
<div class="text">Header with Image and Text</div>
</div>
<div class="container">
<div class="column">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis, purus et tincidunt facilisis, metus metus malesuada ante, a malesuada odio purus et lorem. Mauris congue enim non dui scelerisque pretium. Curabitur porta, libero vel varius facilisis, velit velit iaculis nisl, a ultricies lacus tellus eu ipsum.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis, purus et tincidunt facilisis, metus metus malesuada ante, a malesuada odio purus et lorem. Mauris congue enim non dui scelerisque pretium. Curabitur porta, libero vel varius facilisis, velit velit iaculis nisl, a ultricies lacus tellus eu ipsum.</p>
</div>
<div class="column">
<h2>Column 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis, purus et tincidunt facilisis, metus metus malesuada ante, a malesuada odio purus et lorem. Mauris congue enim non dui scelerisque pretium. Curabitur porta, libero vel varius facilisis, velit velit iaculis nisl, a ultricies lacus tellus eu ipsum.</p>
</div>
</div>
</body>
</html>
