How do I solve this layout with CSS in Ionic / Vue.Js? - html

Question

I’m currently trying to wrap my head around solving this layout with Ionic and CSS:
This is the result I achieve even after spending quite some time with it:
I've recreated the basic setup on the home page: here
The layout consists of a navbar, a fullscreen image and text-content below that. The gradient is constructed using a ::after attribute in CSS as I don't want to hard embedd the gradient in the image file with Photoshop and the likes. I had to construct the fullscreen image using a ‚position:absolute‘ attribute:
.happening-image {
top: 0;
right: 0;
bottom: 0;
left: 0;
position:absolute; }
because for reasons beyond my knowledge, not using ‚position:absolute’ results in the image not being displayed in fullscreen but being 2 or 3 pixels smaller than the total width and thus leaving a slim border of background color around the image:
Once I do use the ‚position:absolute’ attribute however my layout becomes a complete mess because the text content is being placed all over the image content.
This is where I'm struggling to come up with a solution that tidly places the text content below the fullscreen image. Using padding is, to my understanding, not possible as quick fix as I need the layout to be independent from the image content:
if I use padding based on the height of portrait sized images, the content gets too much offset when for landscape sized images and vice versa. I could try to target landscape and portrait images using different .css classes for each and setting and matching padding, I do however feel that using padding is not the best solution.
Can someone point me to my error or a robust, content-independent solution here that keeps Image and text content tidly in order while maintaining the layout?

Answer 1

According to your example, the border around the image is happening because of the padding attribute in the ion-content tag, here:
If you remove that padding the image will have no space around.
By the way, the position:absolute; did the trick, because it makes the image get out of the page flow, and so, it acted as a child of the body, which doesn't have any padding/margin around.
Edited
Also, you need to remove the position:absolute from your image and add padding:0; to the tag above it, as it is adding a little space around from padding.
And from what I understood, the image and text will behave as you wished.