6 replies [Last post]
ghDoo
Offline
newbie
Last seen: 13 years 24 weeks ago
Timezone: GMT+2
Joined: 2009-11-23
Posts: 3
Points: 4

i have image 2050x768 size and i want, that page with this image will open in center of 1024x768 res and i can slide to left or right side.

i make it img not background because i need click on some area

html :

<img src="img/bg.png" alt="struciu ferma" width="2050" height="768" usemap="#Map" />
<map name="Map" id="Map">
...

i try to center that with css but i can make only fixed center position without sliding to left or right.

plz help! Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to describe the rest

You need to describe the rest of the layout better because I'm sure there's probably other ways of doing the layout without having the image in the HTML. Have you also thought about how long a 2000+ pixel image is going to take to download?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ghDoo
Offline
newbie
Last seen: 13 years 24 weeks ago
Timezone: GMT+2
Joined: 2009-11-23
Posts: 3
Points: 4

you right, it looks bad

you right, it looks bad loading all page like img. anyway i need that image so with css it mus be somethink like ( background-position: top center ) image in center looks ok but i need to scroll left and right, this one makes only image in center of the screen. i need that all page opens in center with scroll bar in the browsers bottom and i then can slide to left or right. its possible to do that?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I'm sorry you're probably

I'm sorry you're probably going to need to provide a visual representation of what you want because I didn't really understand what you just said.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 31 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I'd bet if you need

I'd bet if you need scrollbars to show all of the image, then you won't be able to center it always. At least, not with CSS.

I've seen ways to center stuff that go offscreen in both directions, but this caused the stuff on the left to be unreachable for those with browser windows that were too small (they could only scroll further to the right).

Possibly you could fake it with the home url actually going to a link in the middle-right of the page (yourdomain.com/thepage.html#middlelink). This would start people off with the browser (if too small) scrolled a bit to the right already, with the ability to scroll back to the left and get the whole map. Browsers are pretty good at scrolling up and down with #fragment urls, but they don't all act the same when going from left to right.

Likely Javascript will work better in starting folks out in the center, while the rest of us scriptless people just see the left side of the map on first load (no biggie).

I'm no expert, but I fake one on teh Internets

ghDoo
Offline
newbie
Last seen: 13 years 24 weeks ago
Timezone: GMT+2
Joined: 2009-11-23
Posts: 3
Points: 4

sry for my english its

sry for my english its terrible Smile anyway here is image 2050x768 size 514kb

my background code
html: css:

#bg {

background-image:url('bg.png');

background-position: top center;
}

after this my img is in center, but i cant see part of the left side and part of the right side of the image (i use 1280x1024 res). i want my img in center like this but only with possibility on lower resolution scroll horizontally to left and right to see all bg image. with this code i cant do that.

sry again for my english

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 31 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

If it's only the ostriches on

If it's only the ostriches on the sides, let them stay decorational. Besides the way it looks, does it matter if people cannot see the sides with smaller browser?

http://workawesome.com/
for example. Make your browser small. You cannot scroll to the left to see all the images, but that's okay, because you don't NEED to see them, they are only extra pretty.

Is your Ostrich image also only extra pretty? I thought you were talking about a map.

Also, as Tyssen mentioned, if we could see all the code or a link to the page it would help a lot.

I'm no expert, but I fake one on teh Internets