It has been a while since I stretched my HTML/CSS legs and am trying to figure out how to build something. Basically I want a single row (using divs) that has a gray text box with a transparent image overlaying the box. The gray box does not go all the way across the div, but the image does overlay part of it. I want to achieve this with HTML and CSS. I have attached a crude image of what I am trying to achieve. I also need this to be responsive in mobile where the text box fills the first row, and the image drops below the text box.
Any help would be greatly appreciate
https://ztgd.com/images/test_web.jpg
Full Version: Question about building a specific web page design.
Hi there kmckown,
coothead
and a warm welcome to these forums.
Here is an example...
HTMLCODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<h1>Test Page</h1>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non porttitor lacus. Sed vestibulum felis orci. Cras risus massa, ultricies id efficitur nec, hendrerit semper odio. Ut eget ultricies nisl. Etiam non placerat ipsum. Cras tincidunt, lacus nec iaculis vestibulum, orci arcu pellentesque ex, eu iaculis urna orci id sem. Donec congue, est hendrerit congue vehicula, augue velit convallis erat, nec placerat ante lectus id est. Etiam scelerisque, enim a malesuada malesuada, dolor lorem mattis urna, non venenatis lacus libero non turpis. Morbi nec rutrum ante, ut malesuada est. Sed suscipit turpis nec urna luctus euismod. Ut eu rutrum odio, feugiat feugiat odio. Morbi ullamcorper ornare accumsan. Proin id lacus maximus, finibus odio eget, blandit sapien.
</p>
<img src="https://dummyimage.com/400x248/fd6767/000000&text=image" alt="test image">
</section>
</body>
</html>
CSS - screen.cssCODE
body {
padding: 1em;
background-color: #f9f9f9;
background-image: linear-gradient( to bottom, #eee, #888 );
background-attachment: fixed;
font: normal 1em / 1.5 arial, helvetica, sans-serif;
}
h1 {
font-size: 2em;
color: #555;
text-align: center;
}
section {
padding: 1em;
border: 1px solid #000;
border-radius: 1em;
background-image: url(https://dummyimage.com/400x248/fd6767/000000&text=image);
background-position: calc( 100% - 1em ) 1em;
background-size: 25em auto;
background-repeat: no-repeat;
background-color: #fff;
}
section p {
width:calc( 100% - 26em );
min-height: 16em;
}
section img {
display: none;
}
@media ( max-width: 50em ) {
section{
background-image: none;
}
section p {
width: 100%;
min-height: 100%;
}
section img {
display: block;
margin: auto;
}
}
@media ( max-width: 31em ) {
section img {
width: 100%;
}
}
View the result here...
https://codepen.io/coothead/full/qBzKpOR
coothead
Thanks so much for the welcome, and thanks for the code snippet, this is very close, but I think my mock was bad, this is more what I am trying to achieve. I want the image to overlay the text box in normal mode.
Hi there kmckown,
coothead
check out the attachment to see a working example.
Click to view attachment
coothead
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.