CODEWITHSUNDEEP
htmlcssauthenticationinterface
n00b
n00b

Reputation: 51

HTML Elements inside an image?

i made a container for my login page that is composed of 3 images

    frost_frame_top.png
    frost_frame_body.png
    frost_frame_bottom.png

and it appears like this

enter image description here

i done it by doing this in its .css

    #loginframe_top, #loginframe_center, #loginframe_bottom
    {
        vertical-align: bottom;
    }

i like to add some elements like textbox, buttons and labels inside the image. how can i do this ? i am new to web development and hope i can find some answers. thank you

Upvotes: 1

Views: 5998

Answers (4)

Yra Sabat
Yra Sabat

Reputation: 51

If u need contain your html-element(s) inside of image u can do like this:

            <div>
                <img src={item.photo}
                     alt={item.name}
                     width={"100%"}
                />
                <div style={{ left: "80%", bottom: "80%", position: "relative", zIndex: 100}}>
                    Text or icon
                </div>
            </div>

Upvotes: 1

Robin
Robin

Reputation: 87

Maybe you can create a div with the image as a background and inside the div you use the elements.

<div class="container">
<input type="text" />
<input type="submit" />     
</div>

.container {
height:346px;
width:678px;
background:url(https://i.sstatic.net/ZsWHu.png) no-repeat;

}

http://jsfiddle.net/0jvhzo6g/

Upvotes: 0

Shahar
Shahar

Reputation: 2347

You cannot nest other elements inside an <image> tag. Even if it somehow works in one browser, it will likely fail in other browsers because it's a self-closing tag.

Instead, use the correct elements for your purpose: textarea, Button and Label. It sounds like you need to nest them all inside a form to make it work in a simple way (if you are not going to useg javascript for validation, for example).

Upvotes: 1

himanshu
himanshu

Reputation: 1797

create a div"container" in which you want to add textbox, buttons and labels and give position absolute to it

.container{position absolute; top:0px;}

and put both images div and container div in a parent div and give it position:relative

Upvotes: 0

Related Questions