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

Joined
Mar 15, 2023
Messages
5
Reaction score
0
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 ▼・ᴥ・▼
 

Attachments

  • websiteview 1.JPG
    websiteview 1.JPG
    106.1 KB · Views: 10
  • websiteview 2.JPG
    websiteview 2.JPG
    64.2 KB · Views: 10
Joined
Sep 4, 2022
Messages
129
Reaction score
16
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 )
 
Last edited:
Joined
Nov 13, 2020
Messages
302
Reaction score
38
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.
 
Joined
Mar 15, 2023
Messages
5
Reaction score
0
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.
 
Joined
Mar 15, 2023
Messages
5
Reaction score
0
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 :)
 
Joined
Jul 4, 2023
Messages
375
Reaction score
42
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;
}

Bez tytułu.png
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,790
Messages
2,569,637
Members
45,346
Latest member
EstebanCoa

Latest Threads

Top