Programming Help

Web Development



What's Here?

  • Members: 150,396
  • Replies: 508,439
  • Topics: 80,153
  • Snippets: 2,669
  • Tutorials: 709
  • Total Online: 1,036
  • Members: 75
  • Guests: 961

Welcome to Dream.In.Code
Become an Expert!

Join 150,396 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,036 people online right now. Registration is fast and FREE... Join Now!




Huge image as canvas

 
 Reply to this topicStart new topic

Huge image as canvas, I am trying to use a 3000 X2500 px image as body (or wrapper)
Goyo
6 Mar, 2008 - 08:12 AM
Post #1

New D.I.C Head
*

Joined: 13 Feb, 2008
Posts: 6
I am trying to use a 3000 X2500 px image as body (or wrapper)
background and I need the image to load centered horizontally in the
browser window so it can be scrolled left and right. I have not found
any references so far and I wonder if someone would have any ideas.
Thanks a million.

Goyo
User is offlineProfile CardPM
+Quote Post

thehat
RE: Huge Image As Canvas
6 Mar, 2008 - 08:49 AM
Post #2

D.I.C Head
Group Icon

Joined: 28 Feb, 2008
Posts: 217


Dream Kudos: 100
My Contributions
Do you need the whole image to be visible, or just to the limits of the browser? If it's the latter, this should sort you out:

css

body {
     background: #ffffff url(someimage.jpg) center top no-repeat;
}
User is offlineProfile CardPM
+Quote Post

Goyo
RE: Huge Image As Canvas
6 Mar, 2008 - 10:16 AM
Post #3

New D.I.C Head
*

Joined: 13 Feb, 2008
Posts: 6
QUOTE(thehat @ 6 Mar, 2008 - 09:49 AM) *

Do you need the whole image to be visible, or just to the limits of the browser? If it's the latter, this should sort you out:

css

body {
     background: #ffffff url(someimage.jpg) center top no-repeat;
}



Hi there thanks a million for the above. Perhaps I should have explained more in detail.

The position for the image "center top no-repeat" does indeed center the image however there is no way to scroll left so teh rest of the image is revealed.

By the browsers default, , background images get positioned with their left margin to the left side of the browser. So wen the site loads you can scroll to the right to see more of the image but not left (does it make sense?). That is not what I need, I wander if CSS can make the image to load so that part of the image (center or so) shows so I can put there the content of the site (aprox 800px x 650px) and more of the image can be scroll to right and left.

Thanks any help on this.

Goyo

Massachusets
USA
User is offlineProfile CardPM
+Quote Post

thehat
RE: Huge Image As Canvas
6 Mar, 2008 - 12:17 PM
Post #4

D.I.C Head
Group Icon

Joined: 28 Feb, 2008
Posts: 217


Dream Kudos: 100
My Contributions
Yes, I thought that might be too simple a solution.

I'm sorry, but I don't know if what you want is even possible with css. In order to make the browser display a horizontal scroll bar, you will either have to set the width of the div holding the image, or actually put the image into the document with html. In both these cases, the page is going to open in the top left, and as far as I know you'd have to use javascript to move the viewport to the middle of the page.

Somenoe else may know more, and I'm interested too now!
User is offlineProfile CardPM
+Quote Post

Goyo
RE: Huge Image As Canvas
6 Mar, 2008 - 12:50 PM
Post #5

New D.I.C Head
*

Joined: 13 Feb, 2008
Posts: 6
QUOTE(thehat @ 6 Mar, 2008 - 01:17 PM) *

Yes, I thought that might be too simple a solution.

I'm sorry, but I don't know if what you want is even possible with css. In order to make the browser display a horizontal scroll bar, you will either have to set the width of the div holding the image, or actually put the image into the document with html. In both these cases, the page is going to open in the top left, and as far as I know you'd have to use javascript to move the viewport to the middle of the page.

Somenoe else may know more, and I'm interested too now!


Thanks again,

My client asked me to try this and said "it will be cool right?".

Of coarse, it will be "cool" I thought.

Alas, I posted the problem on another forum and no response so far.

Will see...
User is offlineProfile CardPM
+Quote Post

Glasseater
RE: Huge Image As Canvas
10 Mar, 2008 - 09:52 PM
Post #6

New D.I.C Head
*

Joined: 15 Jun, 2007
Posts: 46


My Contributions
If I understand correctly, you could just set the background normally (positioned to the top left corner) and create a giant div to stretch the boundaries of the window. Then you could create a javascript function to scroll to the content of the page to be run 'onload'.

Hope that helps.

P.S. This link may help http://www.mediacollege.com/internet/javas...age/scroll.html
User is offlineProfile CardPM
+Quote Post

Goyo
RE: Huge Image As Canvas
11 Mar, 2008 - 05:42 AM
Post #7

New D.I.C Head
*

Joined: 13 Feb, 2008
Posts: 6
Glasseater,

Thank you so much.....

It seams that this will do it. Just I need to find the way to make the scrolling horizontal instead of vertical as it is in the code sample now.

I appreciate your time. icon_up.gif

I put this questions in three forums and your response is the only one that actually shows that it may be possible. I am kind of a new coder I though I was making a fool of my self with this question. (insecurities)

Thanks again.
User is offlineProfile CardPM
+Quote Post

thehat
RE: Huge Image As Canvas
11 Mar, 2008 - 06:27 AM
Post #8

D.I.C Head
Group Icon

Joined: 28 Feb, 2008
Posts: 217


Dream Kudos: 100
My Contributions
Hi Goyo,

The javascript scroll() function moves the viewport to a specific point, and it receives two arguments, x and y. The tutorial you followed was positioning to the y, but you want the x, so your call will look like:
CODE

window.scroll(yourNumber,0);


Don't forget that in order to center accurately, you will have to find how wide the users viewport is then perform your scroll accordingly. That means that the value for yourNumber in the above example would be (container / 2)-(viewport width / 2).

If you have any trouble, post your code back and we'll help you out.

This post has been edited by thehat: 11 Mar, 2008 - 06:28 AM
User is offlineProfile CardPM
+Quote Post

Goyo
RE: Huge Image As Canvas
11 Mar, 2008 - 06:34 AM
Post #9

New D.I.C Head
*

Joined: 13 Feb, 2008
Posts: 6
Hi thehat,

This is great, I will work on this and post the code.

Thanks
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/9/09 06:24PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month