Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

SchneiderMan

macrumors G3
Original poster
May 25, 2008
8,332
202
So i made my background static with some code, but now i can see it tile a little on some screens when it should not. I don't know if it's a size issue or not, i need to know how i can have this centered and even on all display screen. Can you guys help me please?
Using iWeb. Everything looks great on my screen and evenly aligned on both side. 21.5" display using Safari and SL.
Code i used:
Code:
<script language="JavaScript" type="text/javascript">
<!--
 
parent.document.body.style.backgroundImage='url(http://schneidersstudios.com/2010background1.png)';
parent.document.body.style.backgroundRepeat='no-repeat';
parent.document.body.style.backgroundAttachment='fixed';
parent.document.body.style.backgroundColor='#555555';
 
// -->
</script>

Background image size: 1920x1080
 
There's probably a iWeb setting for telling it not to repeat. I don't use iWeb though so not sure where it is.

As far as your JavaScript here is some simplification,
PHP:
var body = document.getElementsByTagName('body')[0];
body.style.background = '#555 url(http://schneidersstudios.com/2010background1.png) no-repeat fixed top center';
 
There's probably a iWeb setting for telling it not to repeat. I don't use iWeb though so not sure where it is.

As far as your JavaScript here is some simplification,
PHP:
var body = document.getElementsByTagName('body')[0];
body.style.background = '#555 url(http://schneidersstudios.com/2010background1.png) no-repeat fixed top center';

angelwatt to the rescue, again!;)
 
I did set it to not tile on iweb but when i use the code i think i override the setting because the background is pulled from somewhere else i.e my idisk storage.

I'll try out this code too, thanks.

Edit: I tried your code and is does not show the background for some reason

Now how would i optimize the background to fit like it fits my screen size to others?
 
Some screen shots may help. I don't know that I'm following what you're wanting to do. Also, if the site is live somewhere, can you give a link to it?
 
Some screen shots may help. I don't know that I'm following what you're wanting to do. Also, if the site is live somewhere, can you give a link to it?

Here you GO

My background is static, however it only shows that it's correctly in place and aligned on both sides (text graphics) of the site's body on my display, on other display sizes it shows tiled a little and not in place.
 
Set the background's position to "center top" that seems to work when I use it with Firebug in Firefox. I had the center and top backwards earlier. So background CSS would be,
Code:
background: url(http://schneidersstudios.com/2010background1.png) no-repeat fixed center top #555555;
 
Set the background's position to "center top" that seems to work when I use it with Firebug in Firefox. I had the center and top backwards earlier. So background CSS would be,
Code:
background: url(http://schneidersstudios.com/2010background1.png) no-repeat fixed center top #555555;

Alright, so should i remove my code and just use this? Thanks for your help
 
Alright, so should i remove my code and just use this? Thanks for your help

I don't think iWeb lets you edit the CSS directly. If you go the JavaScript route you can just adjust the .style.background part and use everything after the : above as the value for background. Should work in theory.
 
I don't think iWeb lets you edit the CSS directly. If you go the JavaScript route you can just adjust the .style.background part and use everything after the : above as the value for background. Should work in theory.

This is a code i use and input into seo tool and publish. So im not sure, but i ask some friends and they still report that the background is not centered.
Code:
<script language="JavaScript" type="text/javascript">
<!--
 
parent.document.body.style.backgroundImage='url(http://schneidersstudios.com/2010background1.png)';
parent.document.body.style.backgroundRepeat='no-repeat';
parent.document.body.style.backgroundAttachment='fixed';
parent.document.body.style.backgroundAttachment='top center';
parent.document.body.style.backgroundColor='#555555';
 
// -->
</script>

This is how it should look like:

screenshot20100223at611.png
 
The "top center" is the position, not the attachment.

Code:
parent.document.body.style.backgroundImage='url(http://schneidersstudios.com/2010background1.png)';
parent.document.body.style.backgroundRepeat='no-repeat';
parent.document.body.style.backgroundAttachment='fixed';
parent.document.body.style.background[B]Position[/B]='center top';
parent.document.body.style.backgroundColor='#555555';
 
The "top center" is the position, not the attachment.

Code:
parent.document.body.style.backgroundImage='url(http://schneidersstudios.com/2010background1.png)';
parent.document.body.style.backgroundRepeat='no-repeat';
parent.document.body.style.backgroundAttachment='fixed';
parent.document.body.style.background[B]Position[/B]='center top';
parent.document.body.style.backgroundColor='#555555';

Alright, i updated it but im not sure if it's working correctly still, if i use my 15" laptop's screen the background image is way off and most of the text is not visible, in what way can i fix this problem?
 
Alright, i updated it but im not sure if it's working correctly still, if i use my 15" laptop's screen the background image is way off and most of the text is not visible, in what way can i fix this problem?

Which browser? On Windows with Firefox, Safari, and IE8 it all looks the same, and I think it looks the way you want. I can't view the image you linked of how you want it to look because that site is blocked for me. I'll attach what I see.
 

Attachments

  • schn.png
    schn.png
    118.6 KB · Views: 93
Which browser? On Windows with Firefox, Safari, and IE8 it all looks the same, and I think it looks the way you want. I can't view the image you linked of how you want it to look because that site is blocked for me. I'll attach what I see.

Awesome that's how it should look like yeah, i guess the code part you gave me worked, thanks!

btw what is your screen size?
 
btw what is your screen size?

At work I use a 24" wide-screen, which is where I did the screen shot (at home a 13" MBP). Though, I don't use my browser (or any app) at full screen. It's way too overpowering. That screen shot was taken at about 60% width of my screen. On my MBP I probably couldn't have tested this out because the layout likely would have taken up the full width of my screen.
 
At work I use a 24" wide-screen, which is where I did the screen shot (at home a 13" MBP). Though, I don't use my browser (or any app) at full screen. It's way too overpowering. That screen shot was taken at about 60% width of my screen. On my MBP I probably couldn't have tested this out because the layout likely would have taken up the full width of my screen.

Allright thanks :)
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.