I have an image on top of which is a semi transparent text box covering 50% of the image width.
I want the image to align to the right but keep the text box aligned left.
If I use a float the alignment of the box doesn’t work.
This is for a website using Bootstrap 4 and my code is below.
<div class="mainimgcontainer">
<picture>
<source
media="(max-width: 576px)"
srcset="img/fitted-bedroom-furniture-576.jpg">
<source
media="(max-width: 800px)"
srcset="img/fitted-bedroom-furniture-820.jpg">
<source
media="(max-width: 1200px)"
srcset="img/fitted-bedroom-furniture-1200.jpg">
<img src="img/fitted-bedroom-furniture.jpg"
alt="Photo of fitted bedroom furniture">
</picture>
<div class="mainimgtxt d-flex h-100">
<div class="text-center-left justify-content-center align-self-center">
<h1>FITTED BEDROOM FURNITURE</h1>
<p class="lead white">Some more text will go here.</p>
</div>
</div>
</div>
It’s not quite clear what you are attempting as I would assume that the transparent overlay should cover half the image so in essence the image doesn’t need to be aligned anywhere?
I’ve put your code into a bootstrap codepen and it seems to be doing what I would expect with a couple of small changes.
(Click ‘Edit on codepen’ to see full layout)
Maybe you can fork the codepen and add any missing code so we can see what we are dealing with. For example I don’t know if your codes is inside the main container or not or inside a fluid-container at full width…
Also note that height:100% only works on elements who have an unbroken chain of parents that all have a height defined (right back to :root) other than auto height. Or if they are part of a flex/grid construct designed in the correct manner.
The problem I have is that the image concerned is showing a product on the right hand side and I need to make sure the product is shown in its entirety in all screen sizes.
Why then are you placing an overlay on top of it? I’m a little confused
If you want them separate then that’s just 2 basic bootstrap columns with text in one and the image in the other?
If the image has to be shown in full then you can’t scale it to match the height of the text because that would break aspect ratio. You can make the text box as tall as the image as long as the text isn’t greater than the image.
Here’s another codepen of that in action.
If that’s not close to what you want then you will need to explain in detail the behaviours that you require bearing in mind that an image must retain its aspect ratio at all times.
You don’t do anything to make the image stretch so it stays where it is. On my screen there is a massive gap to the right of the image because the image doesn’t fit my screen.
Try the following code as a quick fix:
.mainimgcontainer img{
width:100%;
height:auto;
}
That should give you roughly what you are asking for.
I should at this point refer you to the bootstrap documentation as rows should not be direct children of the body as they should be inside a container of some sort. Rows have negative margins which form the crux of the bootstrap grid and they are offset by padding on their parents container. Without a container you get an element that’s too large and that’s why you have hide to hide the overflow on the body which is a big accessibility fail and will (most likely) create a wobble on small screens.
Also as mentioned the height:100% on your columns does nothing and is not necessary.
