By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,494 Members | 1,957 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,494 IT Pros & Developers. It's quick & easy.

Centering an Image bigger than the screen

P: n/a
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
Share this Question
Share on Google+
6 Replies


P: n/a
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

P: n/a
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

P: n/a

"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

P: n/a
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

P: n/a
> > > 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

P: n/a
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.