1354
Views
4
Comments
Solved
Position Text Over an Image
Question

Hello,

I am creating an application and I need to put text and other widgets inside an image. 

How can I do it?

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP
Solution

Hi Sara,

To add text on top of an image do this:

CSS:

  1. Enclose the image in a Container
  2. Make sure to set the Container width to the Image width
  3. After step 2 set the width of the Image to Full. 
  4. Add the class image-width-text to the container.
  5. Add an Expression (if data is variable) or a Text widget in the container.
  6. Add the class text-overlay to the Expression or Text widget. 
  7. Use the top or bottom and left or right properties to position the text over the image on the position you want
.image-with-text {
    position: relative;
}
.image-with-text > .text-overlay {
    position: absolute;
    top: 3px;
    left: 3px;
}



For the input widget you can do something similar, place the input widget inside the container, and add a new class to it, and set the top/bottom left/right properties of that class to position the input.

Regards,

Daniel

UserImage.jpg
Sara Silva

Daniël Kuhlmann wrote:

Hi Sara,

To add text on top of an image do this:

CSS:

  1. Enclose the image in a Container
  2. Make sure to set the Container width to the Image width
  3. After step 2 set the width of the Image to Full. 
  4. Add the class image-width-text to the container.
  5. Add an Expression (if data is variable) or a Text widget in the container.
  6. Add the class text-overlay to the Expression or Text widget. 
  7. Use the top or bottom and left or right properties to position the text over the image on the position you want
.image-with-text {
    position: relative;
}
.image-with-text > .text-overlay {
    position: absolute;
    top: 3px;
    left: 3px;
}



For the input widget you can do something similar, place the input widget inside the container, and add a new class to it, and set the top/bottom left/right properties of that class to position the input.

Regards,

Daniel


Hi! Tks!

It Works :)

2019-06-15 21-39-22
Afonso Carvalho
 
MVP

Hi Sara,

It depends - do you need to do this as a way to present something to the user? You could achieve this with CSS properties like position.

Do you need to manipulate what you're placing over the image? Loading and storing it? You might need to resort to Javascript and SVG elements to draw over it.

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP
Solution

Hi Sara,

To add text on top of an image do this:

CSS:

  1. Enclose the image in a Container
  2. Make sure to set the Container width to the Image width
  3. After step 2 set the width of the Image to Full. 
  4. Add the class image-width-text to the container.
  5. Add an Expression (if data is variable) or a Text widget in the container.
  6. Add the class text-overlay to the Expression or Text widget. 
  7. Use the top or bottom and left or right properties to position the text over the image on the position you want
.image-with-text {
    position: relative;
}
.image-with-text > .text-overlay {
    position: absolute;
    top: 3px;
    left: 3px;
}



For the input widget you can do something similar, place the input widget inside the container, and add a new class to it, and set the top/bottom left/right properties of that class to position the input.

Regards,

Daniel

UserImage.jpg
Sara Silva

Daniël Kuhlmann wrote:

Hi Sara,

To add text on top of an image do this:

CSS:

  1. Enclose the image in a Container
  2. Make sure to set the Container width to the Image width
  3. After step 2 set the width of the Image to Full. 
  4. Add the class image-width-text to the container.
  5. Add an Expression (if data is variable) or a Text widget in the container.
  6. Add the class text-overlay to the Expression or Text widget. 
  7. Use the top or bottom and left or right properties to position the text over the image on the position you want
.image-with-text {
    position: relative;
}
.image-with-text > .text-overlay {
    position: absolute;
    top: 3px;
    left: 3px;
}



For the input widget you can do something similar, place the input widget inside the container, and add a new class to it, and set the top/bottom left/right properties of that class to position the input.

Regards,

Daniel


Hi! Tks!

It Works :)

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Cool!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.