How Do I Set text on an Image and use the image as a border?

StrawberryMilk_Jr · Mar 16, 2023

Hello Everyone!
I am trying to build an art website to serve as a gallery first then maybe expand to shop for work. I am working on CodePen and running into this issue with my design. I have my welcome text that I want to stay on top on an image but the text will shift and change depending on the screen size. I don't want to use an image with the welcome text since I might add or change information. Also, I would like the text and the image it is on top of be able to adjust to different screen sizes without losing form.

I guess the solution is having the image be the border of the text but is that possible with the image and text I have? But I don't know how to go about it.

What would you guys recommend? Open to suggestions.

The welcome text is marked as "intro" and the image is labeled as "welcome". I am using HMTL and CSS for this page specifically.
Here is the link to CodePen : CodePen Link Here feel free to look at the code

Thanks guys! I appreciate any and all help ▼・ᴥ・▼

FResher · Mar 17, 2023

Hello,

you have a HTML with error
basics are following :

It's to avoid 'weird/random' display.

HTML:

<html>
    <head>
        meta tags here
    </head>
    <body>
        structure of your page here ( all displays tags)
    </body>
</html>

keep in mind that between all versions of Html, your web browser can display anything, so 'errors' too.
It's 'quirk mode' !

for your answer, as a web page is created with 'layers' , you can use the css 'z-index' parameter,
to make your welcome section above all the other, It's a great help to display 'pop-up area'.

z-index start at : z-index:0;

to have another layer upon the level 0,
choose another integer : z-index: 10; or z-index:5000;
( the value you want )

c1lonewolf · Mar 18, 2023

Are you attempting to do a windows dialog display using graphic titlebar and borders?

BigDady · Mar 18, 2023

There are a number of things wrong with your code. You are using DIVs for markers or headers of code section, Like <div class="row2">
with no closing tag and no styling. I think there is an easier way of doing what you want for web design. It would help if you looked at https://www.w3schools.com/ to refresh your coding knowledge.

As for your question - You start with a DIV and place your image in it - then use position: absolute; to take both the image and paragraph out of it. Always use positioning with care and very sparingly. You can margins and padding to obtain most positions. And that would work for you.

The image you are using has an invisible top area and the same under it. You might want to look into that.

StrawberryMilk_Jr · Mar 28, 2023

c1lonewolf said:
Are you attempting to do a windows dialog display using graphic titlebar and borders?

I am trying to do that but I am using instead a windows dialogue display image and trying to position the text on top.

StrawberryMilk_Jr · Mar 28, 2023

BigDady said:
There are a number of things wrong with your code. You are using DIVs for markers or headers of code section, Like <div class="row2">
with no closing tag and no styling. I think there is an easier way of doing what you want for web design. It would help if you looked at https://www.w3schools.com/ to refresh your coding knowledge.

As for your question - You start with a DIV and place your image in it - then use position: absolute; to take both the image and paragraph out of it. Always use positioning with care and very sparingly. You can margins and padding to obtain most positions. And that would work for you.

The image you are using has an invisible top area and the same under it. You might want to look into that.

Ohhh okay. I'll check my code out. I actually have used w3schools before but there is definitely more I need to learn about all of this.

StrawberryMilk_Jr · Mar 28, 2023

FResher said:
Hello,

you have a HTML with error
basics are following :

It's to avoid 'weird/random' display.

HTML:

<html> <head> meta tags here </head> <body> structure of your page here ( all displays tags) </body> </html>

keep in mind that between all versions of Html, your web browser can display anything, so 'errors' too.
It's 'quirk mode' !

for your answer, as a web page is created with 'layers' , you can use the css 'z-index' parameter,
to make your welcome section above all the other, It's a great help to display 'pop-up area'.

z-index start at : z-index:0;

to have another layer upon the level 0,
choose another integer : z-index: 10; or z-index:5000;
( the value you want )

I see. I should use more css code then. I may have rely too heavily on HTML . I'll give this code a try! Thanks

VBService · Jul 19, 2023

In this case IMO, a better way is to treat the image as the background for <div>

e.g. [ on-line ]

HTML:

<body>
  <div class="welcomebox">
    <div class="content">
      <p>
        Welcome to my <span class="color-1">Art Gallery.</span><br> It is a pleasure to have you.
      </p>
      <p>Take your time exploring the galleries. Some of the artworks may appear similar in subject, but each gallery offers a unique exploration of the physcial, emotional and social aspects of the subjects.
      </p>
      <p>
        To visit the digital galleries, just click on the Gallery Icons on the left. :)<br>
        <br><span class="color-2">New Galleries are Coming Soon.<br>Stay Tuned!</span>
      </p>
      <p> See something (or someone) you like or have any questions, feel free to contact me through the "Martinez Caudillo" Dialogue Box.
      </p>
    </div>
  </div>
</body>

CSS:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background-image: url(
    "https://i.postimg.cc/W49NC1yK/Website-Background-Edited.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}
.welcomebox {
  position: relative;
  margin: 2rem;
  width: 400px;
  height: 550px;
  background-image: url("https://i.postimg.cc/fW1wTHxy/welxomenotepad.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}
.welcomebox .content {
  position: absolute;
  inset: 3.15em 3.3em;
  padding: .5em;
}
.welcomebox .content p {
  font-size: 1rem;
  font-family:Times Roman;
}
.welcomebox .content .color-1 {
  color: #5807a1;
}
.welcomebox .content .color-2 {
  color: #f65bda;
}

Flip-Cards with Local Images	1	Mar 27, 2023
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
I need help fixing my website	2	Oct 15, 2023
Slideshow not working properly	2	Jan 7, 2023
Help with my responsive home page	2	Dec 14, 2022
Gallery - mosiac/grid layout with filtering and information page popup	1	Apr 13, 2020
HTML Aligning social media icons	2	Dec 6, 2020
SendGrid email issue in responsive Gmail	1	Nov 4, 2021

How Do I Set text on an Image and use the image as a border?

StrawberryMilk_Jr

Attachments

FResher

c1lonewolf

BigDady

StrawberryMilk_Jr

StrawberryMilk_Jr

StrawberryMilk_Jr

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads