0

I'm trying to add an image for a logo on top of a background image.

The background image resizes but the logo doesn't.

Any tips as to where I've gone wrong?

Thanks

<body>
<div class="background">
    <img src="Images/logoPlain.png" class="img-fluid" alt="logo">
</div>

.background
{
background-image: url('Images/architecture.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Jacob
  • 9
  • 1
  • 4
    Why don't you add width and height attributes to it? – Solar Sep 18 '20 at 14:25
  • if you add `min-width: 100%;` to your `img` element, the image will be fluid even if it's original size is less than it's container. – Evgeny Melnikov Sep 18 '20 at 14:38
  • @EvgenyMelnikov I tried min-width, it does resize down a little, but will not go smaller than 50%? – Jacob Sep 18 '20 at 14:53
  • If you want this image to behave like your background, you can specify as the background. Background can have multiple values and will stack each specify background. https://developer.mozilla.org/en-US/docs/Web/CSS/background – SeeoX Sep 18 '20 at 14:53

0 Answers0