SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    center background image

    So I have a background image and the code for it is

    body {
    background-image:url(image/Bingham%20Dental%20body%20background%20image.jpg);
    margin:0 auto;
    width:100%;

    }

    The problem is that the image is wider than my screen the image is starting on the left portion of the screen verses cutting off the left portion and centering the background. Is that even possible? The reason I want it to cut some off on smaller monitors is that the image does not repeat well in the x-axis direction.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Code css:
    body {
      background: transparent url(image/Bingham%20Dental%20body%20background%20image.jpg) 50% 0 no-repeat;
      margin:0 auto;
      width:100%;
    }
    background-position is what you're looking for.
    In the background shorthand syntax the x position is first, y position section after the image url.

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Location
    Sydney, Australia
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to add on to what markbrown4 said, you can also use the shorthand:
    background-position:center;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •