Web Analytics Made Easy -
StatCounter Background image not lining up with content. - CodingForum

Announcement

Collapse
No announcement yet.

Background image not lining up with content.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Background image not lining up with content.

    Ok so im building a mock site for a friend and i have created a bg image and stretched it accross the page and have just used a single slice image to show example content.

    all is well untill i preview the site. (using dreamweaver btw) the bg image is fixed however the single image im using to show where the content headers etc etc will go has justted down about 10 px or so. Im a relative newbie to css and have looked at it and its displays the following for the (main_image) tag

    main_image {
    position:fixed;
    top:-50px;
    }


    i have included an image of what is happening so you guys could maybe help.



    thanks

    Ando

  • #2
    An image doesn't show your code.......

    A link to your site would be much better.
    Teed

    Comment


    • #3
      sorry,,

      here is the site on my test folder.

      http://venturidesigns.co.uk/cssforum/test/index.html

      Comment


      • #4
        Originally posted by Ando1 View Post
        sorry,,

        here is the site on my test folder.

        http://venturidesigns.co.uk/cssforum/test/index.html
        Well I guess a quick fix would be to give #main_image a negative top margin of 8px.

        margin-top: 8px;

        Seems to work.

        I have to ask though, are you working on a huge resolution computer? When I view your page, I can just barely see your menu before the page fold. I mean you created that image with 1066 x 1530 dimensions, which is rather large. Something you might want to address.
        Teed

        Comment


        • #5
          Thanks i will try this..

          i have used photoshop to design it and my computer resolution is 1280x800
          How would i fix this? i thought it was rather enlarged when i view it.

          ps.. im using a resolution of 72 in photoshop

          maybe ive been doing it all wrong lol!

          and you are right i did set to those sizes.. what would you recomend?
          Last edited by Ando1; Aug 25, 2011, 02:44 PM.

          Comment


          • #6
            an even quicker fix would be:

            [code]
            body {
            margin: 0;
            }
            [code]
            Add that to your body style.

            for sizing...keep in mind that most people's monitor resolution will fit 960 px and no higher in width. If the photo is the most important piece for the client, i think you're OK. If not, you can remove some of the space at the top and shrink the image so that the text become "above the fold", however, the fold is so arbitrary that it's hard to ascribe it to websites anymore.
            WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

            Comment


            • #7
              Originally posted by resdog View Post
              an even quicker fix would be:

              [code]
              body {
              margin: 0;
              }
              [code]
              Add that to your body style.

              for sizing...keep in mind that most people's monitor resolution will fit 960 px and no higher in width. If the photo is the most important piece for the client, i think you're OK. If not, you can remove some of the space at the top and shrink the image so that the text become "above the fold", however, the fold is so arbitrary that it's hard to ascribe it to websites anymore.
              Might be somewhat arbitrary in todays web, but I certainly wouldn't wany my main site navigation to be hidden below the first fold. Thats like having a branding logo hidden behind another page element.
              Teed

              Comment

              Working...
              X