#How do I position text to be fixed on top of image ?

3 messages · Page 1 of 1 (latest)

hollow phoenix
#

Hi all, I am working on restaurant ordering app of module 5 and I want to personalize it, but I got stuck at positioning the text on top of the image. As I change the size of viewport my text either get out of image or cramped on top. Could anyone help on how I should align it. Thanks in advance.

image.png image.png image.png image.png
inland atlas
#

Hi @hollow phoenix ,
I would remove .header-inner, it's not doing much.
I would use the image as a background-image on the header, not as an <img>.

unique rapids
#

Hello @hollow phoenix,
Would you please share the full code?
Try this css code:
`body {
margin: 0;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
}

.image {
max-width: 100%;
height: auto;
}

.text {
position: absolute;
top: 50%; /* Adjust for vertical alignment /
left: 50%; / Adjust for horizontal alignment */
transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
/* Adjust text positioning or size for smaller screens */
}`