19 replies [Last post]
farseen
Offline
newbie
Canada
Last seen: 14 years 14 weeks ago
Canada
Joined: 2007-08-28
Posts: 10
Points: 0

Hey Guys,

I'm new to these forums :blushing: so give me a bit of a break, haha.

Basically, I design myspaces, and I'm not asking how to -- I fully know how. What I'm trying to do is extend my knowledge of CSS in a fixed environment, like myspace.

So check it -- heres my question.

I have an image I want as a header, and I've done it before here: http://www.myspace.com/campcrystallakeband

What I have this time though, is an image that extends past the resolution of the majority of people's screen's to the left and right, so I can no longer position the image using pixels from the left, or by percentage. What I need is the center of the header, centered in the middle of the screen. Now I know how to center backgrounds, so they stay in the middle of the screen regardless, but I can't figure this one out.

So check it -- here is the myspace I'm trying it out on, and you can see the image I'm trying to center, but obviously failing at, haha. You have to scroll down to see it.

http://www.myspace.com/geoffwatsondesignband

Anyway, if anyone has any idea how, please let me know! If anyone doesn't understand what I'm asking, ask me, but here, i'll sum it up.

I need that big image centered on the top of the screen so the middle of it is in the middle of the screen regardless of resolution.

Thanks guys,

Farseen

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

Don't put it in the HTML,

Don't put it in the HTML, add it as a background-image and then center it with background-position.

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

farseen
Offline
newbie
Canada
Last seen: 14 years 14 weeks ago
Canada
Joined: 2007-08-28
Posts: 10
Points: 0

Can you have more then one

Can you have more then one background image though? How would I do that? I already have a full length background image that will be covering the background. But I need that one clickable as well -- it will contain links.

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

If you need more than one

If you need more than one bg-image then you need to attach them to different elements. If there are links involved, then just put them inside the element with the bg-image (although I suspect you're going to need to explain better what you're trying to do).

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

farseen
Offline
newbie
Canada
Last seen: 14 years 14 weeks ago
Canada
Joined: 2007-08-28
Posts: 10
Points: 0

Hmm -- do you think I can

Hmm -- do you think I can e-mail you my style sheet? That way you can see how I've centered the previous images, and maybe you'll understand how I want to be able to center this one.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

No, but you can just as

No, but you can just as easily use the provided <code> tags

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

farseen
Offline
newbie
Canada
Last seen: 14 years 14 weeks ago
Canada
Joined: 2007-08-28
Posts: 10
Points: 0

<style

body {
background-position:top center;
background-color:transparent;
background-image:url(http://www.captive-audience.net/CCL_background.jpg);
color:FFFFFF;
background-repeat:no-repeat;
background-attachment:fixed;

}

.division {width: 1500px; height: 694px; position: fixed; vertical-align: middle; top: 509px; background-image: url(http://www.creativequotient.com/web/scott/Header.jpg); left: -20%}

body table {color:FFFFFF; margin-top:800;}



That is how I'm trying to do it now. I want that image that is fixed on the page, to be fixed at the top, exactly like it looks now, so that you don't have to scroll left or right due to its extreme width -- but i want it to go up when the user scrolls down, you know?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Remove the attachment:

Remove the attachment: fixed.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

farseen
Offline
newbie
Canada
Last seen: 14 years 14 weeks ago
Canada
Joined: 2007-08-28
Posts: 10
Points: 0

www.myspace.com/geoffwatsonde

www.myspace.com/geoffwatsondesignband

look what happends when I remove the attachment : fixed

the image drops into the "About Me" section and no longer stays at the top of the page.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Did you also remove the

Did you also remove the positioning values, top center?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

farseen
Offline
newbie
Canada
Last seen: 14 years 14 weeks ago
Canada
Joined: 2007-08-28
Posts: 10
Points: 0

no i didn't remove the value

no i didn't remove the value top-center. if I do, won't that throw it off even more?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 17 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Try it, and see what happens

Try it, and see what happens Wink

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Well, when I looked earlier,

Well, when I looked earlier, they weren't there. When re-applied, all was well.

Right now, I see:

body {
	background-position:top center;
	background-color:transparent;
background-attachment: fixed;
	background-image:url(http://www.captive-audience.net/CCL_background.jpg);
	color:FFFFFF;
	background-repeat:no-repeat;
		
	}

Is that the image you're talking about? With "fixed top center" removed, it will naturally be centered both directions, as I saw it.

Do this:

body {
  background: white url(http://www.captive-audience.net/CCL_background.jpg) 
              top center no-repeat:
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

farseen
Offline
newbie
Canada
Last seen: 14 years 14 weeks ago
Canada
Joined: 2007-08-28
Posts: 10
Points: 0

hmmm ok I've confused

hmmm ok I've confused you!

That background image of the entire page works just as I want it. The image I want centered and fixed is the one you see when you scroll down a lot....that says "GOODNIGH GOTHAM"

you see usually I can center my header images by using a percentage such as margin-left: 50% or something. But this time, the image is wider then the whole screen, so I can no longer center it based on percentage...see what I mean? Let me know if you understand.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

OK, first, you have

OK, first, you have this:

… background-image: url(http://www.creativequotient.com/web/scott/Header.jpg); left: -20%; background-attachment:scroll; background-attachment:fixed;}

and it's covered by the same image in the foreground.

A table's cells expand as needed to enclose their content. That makes for problems I don't even want to get into.

Since I wouldn't accept this design on contract, I'll bow out unless your designer comes to his senses. There is no sane reason for a 1500px wide image, especially in this usage. Half that or smaller would indicate some rationality.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

farseen
Offline
newbie
Canada
Last seen: 14 years 14 weeks ago
Canada
Joined: 2007-08-28
Posts: 10
Points: 0

I am the designer,

I am the designer, haha.

What you don't understand is that the image has to be 1500px wide. It works just like the primary background image does. It has to extend well past the viewer`s monitor size in the event they maximize their resolution. I also like the design as it extends outwards.

It is not enclosed inside a table cell, but rather is just a hovering image. I know there is a way to do it....

arghh

farseen
Offline
newbie
Canada
Last seen: 14 years 14 weeks ago
Canada
Joined: 2007-08-28
Posts: 10
Points: 0

http://myspace.com/geoffwatso

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

It's not aligned properly

It's not aligned properly with the rest of the background, at least not in FF. I don't know why you ignored the suggestion I made with the very first reply in this thread; that's the way you need to do it. Take the link portions of the image out of the main background-image, create them as separate elements and layer them over the top.

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

farseen
Offline
newbie
Canada
Last seen: 14 years 14 weeks ago
Canada
Joined: 2007-08-28
Posts: 10
Points: 0

I didn't ignore it -- i

I didn't ignore it -- i don't know how to do that! Like, how to have two background images, one that will stay put, and the other that will scroll up when scrolled with.

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

I don't know how much

I don't know how much control you have over HTML or CSS in MySpace, but for what you describe, the fixed bg-image has to go on the body cos it's the only element that supports position: fixed in all browsers. Then the other bg-image you'd put on some other element, probably one that contains the whole layout.

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