I have an html page services.html
with two images on it. One image, placeholder.jpeg
lies partly on top of another image physiotherapy-06.peg
and I have applied css styling to the placeholder.jpeg
image with border: 10px solid gray;
. But only part of this image has its border rendered, the part that doesn’t lie on the physiotherapy-06.jpeg
image. How do I get the border to render fully around the edge of the placeholder.jpeg
image?
Here is my services.html
file;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> -->
<meta name="robots" content="index, follow" />
<title>JU Physiotherapy - Services</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header class="services-header">
<img class="services-title-image" src="images/physiotherapy-06.jpeg" alt="">
<img class="services-logo-image" src="images/placeholder.jpeg" alt="">
</header>
</body>
</html>
Here is my styles.css
file;
.services-header {
border: none;
}
.services-title-image {
width: 100%;
}
.services-logo-image {
width: 30%;
display: block;
border: 10px solid gray;
margin: -15% auto 0;
}
try position:relative to image
…or
isolation:isolate
add position:relative to this class .services-logo-image
Yes! position: relative works! Thanks!