CODEWITHSUNDEEP
htmlcss
Brandon
Brandon

Reputation: 319

How can I keep elements moving with the page as it resizes maintaing their position in relation to background image?

I have a page with a responsive background image. I have a text field I want to always maintain it's position in relation to a part of the background image's design. There's a drawing of a cat's paw in the background image that I will have a div overlaying. This div will have an event handler. What I need help with though, is getting the text field to keep it's position in relation to the paw drawing in the background image when resizing height or width or both. Here's the fiddle: http://jsfiddle.net/9ra5h/1/ Would appreciate your help.

<body>
<div id="wrapcontent">
<div id="bannerads">
</div>
<div id="txtFields" style="
height: 121px;
top: 280px;
width:60%;
position: relative;
left: 15%;">

<textarea id="bottomtxt" class="topcoat-textarea unselectable" rows="6" cols="36" placeholder=""></textarea>    
<div onclick="getAnswer();" id="submitbtn" class="unselectable"></div>  
</div>
</div>

Upvotes: 0

Views: 47

Answers (1)

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

more or less like this: http://jsfiddle.net/9ra5h/3/??

you have to use:

position: fixed;

then use a % for both left and top (or right and bottom) and experiment with the positioning till you find what you are looking for.

Upvotes: 1

Related Questions