Issue
I have the following HTML/CSS code for displaying an image and a block of text side by side over a full-width background image.
<section style="position: static; background-color: black; margin: 0; padding: 0; width: 100%; background-image: url("background.jpg"); background-repeat: no-repeat; background-size: 100%;">
<img style="float: left; width: 50%; margin: 1%;" src="overlay-image.jpg" alt="Image overlaid on background image.">
<p style="color:white;">Text overlaid on background image.</p>
<section>
The trouble is, only the top portion of the background-image that is overlaid by the text shows.
Is it possible to make the background image show its vertical portion as much as the overlaid image height?
I've tried "background-size: cover". In Google Chrome Version 107.0.5304.88 (Official Build) (64-bit), and Mozilla FireFox 106.0.5 (64-bit), the result is the same as above; only the portion of the background image overlaid by text, not image, show.
Solution
You are using float and floated elements do not add to the height of the container/parent element, hence your section background is depending on your p tag height, either add a static height to the section or remove the float property and use flexbox instead.
Answered By - 18jad
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.