469,294 Members | 1,730 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,294 developers. It's quick & easy.

How to change position of background image?

This is in the body.
Expand|Select|Wrap|Line Numbers
  1. <div id="bgfig" style="position:absolute; z-index: 1; left: 10px; top: 10px; visibility:visible"><img id="bgfig" border="0" src="dot.gif" width="300" 
  2. height="300"></a>   
  3. </div> 
This is in the header.
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css"> 
  2. #bgfig {
  3. background-image : url(map.gif);
  4. background-repeat : no-repeat;
  5. background-position : -50px -250px;
  6. background-attachment : fixed;
  7. margin : 0;
  8. </style>
This is the code.
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. x = "<?= $iloc ?>";
  3. y = "<?= $hloc ?>";
$iloc and $hloc come from a database which I successfully access.

I try to move the background image with a key and it doesn't move. The keys work. why doesn't the background image move? I don't get any error messages.
Expand|Select|Wrap|Line Numbers
  1. if (wkey==39) {
  2.     moveRight();
  3. }
  4. function moveRight( )
  5. {
  6.     x = parseInt(x) + 5;// move to the right
  7. document.getElementById("bgfig").style.backgroundPosition = x + 'px ' + y + 'px';
  8. } etc.....
Feb 28 '11 #1
5 2723
acoder
16,027 Expert Mod 8TB
The img and the div tags both have the same ID. Use unique IDs on any one page.
Feb 28 '11 #2
thanks for the advice. I changed the id's. Now the background image does not appear at all except for a tiny little square at the upper corner. I can see in that square that it is actually moving, but how do I get it to fill the 300 x 300 pixel space of the dot.gif image which is simply a dot in the middle of a transparent gif. The background image should appear under it.
Feb 28 '11 #3
This seems to have solved the problem. I needed to give the background a width and height as well as the image in front of it.
Thanks for your help on this. I can't believe how exacting php is. Things that work in javascript are nowhere near working in php. That's at least something I've learned so far.
Expand|Select|Wrap|Line Numbers
  1.  <style type="text/css"> 
  2. #bgfig {
  3. background-image : url(map.gif);
  4. background-repeat : no-repeat;
  5. background-position : -50px -250px;
  6. background-attachment : fixed;
  7. display: block;
  8. width: 300px;
  9. height: 300px; 
  10.  
Mar 1 '11 #4
acoder
16,027 Expert Mod 8TB
Glad you've solved the problem, but I should point out that you've hardly used PHP here. If you're going to "blame" something, it should perhaps be directed at CSS where you finally managed to solve the issue.
Mar 1 '11 #5
It's true, it's javascript in PHP. I don't know if there's a pure PHP way to do this that might be better. (It's a point representing a player moving across a map.) But what I meant was I used the original code in an html file and it worked just fine but when I made it php so I could access the database, it no longer worked until all these changes were made. Thus the CSS seems much more forgiving in html/javascript than it does in a php file.
If you know of a way to do this using php instead of javascript, I'd be very happy to learn about it, a reference perhaps. I did search the internet and in fact could find very little at all about changing the position of a background (most just talk about changing the background).
Mar 1 '11 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by zhoujie | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.