Need some help with background sizes

Discussion in 'Web Design and Development' started by SchneiderMan, Feb 22, 2010.

  1. SchneiderMan macrumors G3

    SchneiderMan

    Joined:
    May 25, 2008
    Location:
    Apple state
    #1
    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
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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';
     
  3. jo0 macrumors regular

    Joined:
    Nov 25, 2009
    Location:
    Seattle, WA
    #3
    angelwatt to the rescue, again!;)
     
  4. SchneiderMan thread starter macrumors G3

    SchneiderMan

    Joined:
    May 25, 2008
    Location:
    Apple state
    #4
    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?
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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?
     
  6. SchneiderMan thread starter macrumors G3

    SchneiderMan

    Joined:
    May 25, 2008
    Location:
    Apple state
    #6
    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.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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;
     
  8. SchneiderMan thread starter macrumors G3

    SchneiderMan

    Joined:
    May 25, 2008
    Location:
    Apple state
    #8
    Alright, so should i remove my code and just use this? Thanks for your help
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    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.
     
  10. SchneiderMan thread starter macrumors G3

    SchneiderMan

    Joined:
    May 25, 2008
    Location:
    Apple state
    #10
    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:

    [​IMG]
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    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';
     
  12. SchneiderMan thread starter macrumors G3

    SchneiderMan

    Joined:
    May 25, 2008
    Location:
    Apple state
    #12
    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?
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    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.
     

    Attached Files:

    • schn.png
      schn.png
      File size:
      118.6 KB
      Views:
      38
  14. SchneiderMan thread starter macrumors G3

    SchneiderMan

    Joined:
    May 25, 2008
    Location:
    Apple state
    #14
    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?
     
  15. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #15
    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.
     
  16. SchneiderMan thread starter macrumors G3

    SchneiderMan

    Joined:
    May 25, 2008
    Location:
    Apple state
    #16
    Allright thanks :)
     

Share This Page