469,352 Members | 1,697 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

Centering an Image bigger than the screen

I thought I had seen this done on another site but I can't find it. I want
to have a header at the top of the page, centered, no matter the resolution.
I got it working with an ugly scroll bar at the bottom. The image is 1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:

http://members.optusnet.com.au/spike...ions/test.html

and the css I used is here:

#header {
position: absolute;
top: 0px;
left: 50%;
margin-left: -800px;
}

--
-Robert Smith
----------------------------------------------------------------------------
---------------------------------
Remove 'nospam.' from my email address if you wish to reply via email.
Jul 20 '05 #1
6 4529
Robert Smith wrote:
I thought I had seen this done on another site but I can't find it. I want
to have a header at the top of the page, centered, no matter the resolution.
I got it working with an ugly scroll bar at the bottom. The image is 1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:

http://members.optusnet.com.au/spike...ions/test.html

and the css I used is here:

#header {
position: absolute;
top: 0px;
left: 50%;
margin-left: -800px;
}


Set the image as a background-image in the CSS file. Don't forget
suitable ALT text, of course.
Matthias

Jul 20 '05 #2
Matthias Gutfeldt wrote:
Robert Smith wrote:
I thought I had seen this done on another site but I can't find it. I
want
to have a header at the top of the page, centered, no matter the
resolution.
I got it working with an ugly scroll bar at the bottom. The image is
1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:

http://members.optusnet.com.au/spike...ions/test.html
and the css I used is here:

#header {
position: absolute;
top: 0px;
left: 50%;
margin-left: -800px;
}

Set the image as a background-image in the CSS file. Don't forget
suitable ALT text, of course.


Gobbledygook :-). Naturally there's no ALT text when the image is a
background-image. What I meant is provide some useful content that is
visible when the image is not displayed (usually because CSS is turned off).
Matthias

Jul 20 '05 #3

"Matthias Gutfeldt" <sa************@gmx.net> wrote in message
news:2i************@uni-berlin.de...
Matthias Gutfeldt wrote:
Robert Smith wrote:
I thought I had seen this done on another site but I can't find it. I
want
to have a header at the top of the page, centered, no matter the
resolution.
I got it working with an ugly scroll bar at the bottom. The image is
1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:

http://members.optusnet.com.au/spike...ions/test.html

and the css I used is here:

#header {
position: absolute;
top: 0px;
left: 50%;
margin-left: -800px;
}

Set the image as a background-image in the CSS file. Don't forget
suitable ALT text, of course.


Gobbledygook :-). Naturally there's no ALT text when the image is a
background-image. What I meant is provide some useful content that is
visible when the image is not displayed (usually because CSS is turned

off).

Then I can't make the image a link :(
Jul 20 '05 #4
Els
Robert Smith wrote:
"Matthias Gutfeldt" <sa************@gmx.net> wrote in message
news:2i************@uni-berlin.de...
Matthias Gutfeldt wrote:
Robert Smith wrote:

I thought I had seen this done on another site but I can't find it. I
want
to have a header at the top of the page, centered, no matter the
resolution.
I got it working with an ugly scroll bar at the bottom. The image is
1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:
http://members.optusnet.com.au/spike...ions/test.html

and the css I used is here:

#header {
position: absolute;
top: 0px;
left: 50%;
margin-left: -800px;
}

Set the image as a background-image in the CSS file. Don't forget
suitable ALT text, of course.


Gobbledygook :-). Naturally there's no ALT text when the image is a
background-image. What I meant is provide some useful content that is
visible when the image is not displayed (usually because CSS is turned
off).


Then I can't make the image a link :(


Not for real, but you can set a transparent 100% wide pic
over it, which you make is clickable.

I think there's another way though: put the pic inside a div
with overflow:hidden in the style, and no scrollbar will be
caused by the header.
Make sure the div is seperated from the content, or else
your text will also be hidden in smaller windows.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #5
> > > Robert Smith wrote:

> I thought I had seen this done on another site but I can't find it. I> want
> to have a header at the top of the page, centered, no matter the
> resolution.
> I got it working with an ugly scroll bar at the bottom. The image is
> 1600px
> because that is the maximum resolution I want it to work at. Any
> suggestions? The site is here:
>
>

http://members.optusnet.com.au/spike...ions/test.html
>
>
> and the css I used is here:
>
> #header {
> position: absolute;
> top: 0px;
> left: 50%;
> margin-left: -800px;
> }
Set the image as a background-image in the CSS file. Don't forget
suitable ALT text, of course.


Gobbledygook :-). Naturally there's no ALT text when the image is a
background-image. What I meant is provide some useful content that is
visible when the image is not displayed (usually because CSS is turned

off).

Then I can't make the image a link :(


Not sure, but this might work:

HTML:
<div id="header">
<a class="headA" href="./">&nbsp</a>
</div>

CSS:
a.headA {
background: url(header_extended.gif);
padding: 0; margin: 0; border: 0;
height: [the height of "header_extended.gif"];
width: 100%;
}

Would this do it?
Jul 20 '05 #6
Robert Smith wrote:
I want
to have a header at the top of the page, centered, no matter the resolution.
I got it working with an ugly scroll bar at the bottom. The image is 1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:

http://members.optusnet.com.au/spike...ions/test.html

and the css


#header { overflow:hidden; }

Stupid idea. Make background and text different images.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin tyt
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

19 posts views Thread by George Ziniewicz | last post: by
2 posts views Thread by Ryan W Sims | last post: by
17 posts views Thread by Applebrownbetty | last post: by
14 posts views Thread by D. Alvarado | last post: by
6 posts views Thread by Jerry Camel | last post: by
3 posts views Thread by =?Utf-8?B?SlIx?= | last post: by
1 post views Thread by alokw | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.