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


StrawberryMilk_Jr

StrawberryMilk_Jr

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: 2
  • websiteview 2.JPG
    websiteview 2.JPG
    64.2 KB · Views: 2
Ad

Advertisements

F

FResher

Joined
Sep 4, 2022
Messages
30
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 )
 
Last edited:
BigDady

BigDady

Joined
Nov 13, 2020
Messages
236
Reaction score
30
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

StrawberryMilk_Jr

Joined
Mar 15, 2023
Messages
5
Reaction score
0
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.
Click to expand...
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.
 
Ad

Advertisements

StrawberryMilk_Jr

StrawberryMilk_Jr

Joined
Mar 15, 2023
Messages
5
Reaction score
0
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 )
Click to expand...
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 :)
 

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

Similar Threads

Having difficulty with the layout of these images / video for this web page 2
Slideshow not working properly 2
Help with my responsive home page 2
Gallery - mosiac/grid layout with filtering and information page popup 1
HTML Aligning social media icons 2
SendGrid email issue in responsive Gmail 1
Buttons lining up 1
Help needed with code 5

Top