SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble with background image property!

    I decided to try and do a custom WP login form and after awhile I think I almost have it. However, if I adjust the size of my browser window then the image moves and is no longer centered behind the login form. I tried setting the image as the form background but its getting masked out somehow. Im new at CSS so heres what I have...
    Code CSS:
    body.login{background:url([url]http://ytango.com/wp-content/uploads/2012/02/login.png[/url]) fixed 40% 20% no-repeat;}
    Here is the site: http://ytango.com/wp-login.php
    Can anyone help me learn how to keep the image centered behind the form when its scaling without any crazy java?
    Thanks,
    Scott

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try something like this:

    Code CSS:
    body.login{background: url(/wp-content/uploads/2012/02/login.png) center top no-repeat;}

    You'll have to reposition your form container to match up. If you use percentage positioning on a background image you'll see it drift around as the browser resizes.

    As for using WordPress for a dating site.... I guess that's off-topic.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well your problem is that the elements of the page move around when resized. Unlses you are using a pixel perfect (and even then that's not 100% guarenteed to work in all scenarios) design, when you resize the page, or even with different resolutions, things will move around due to %'s giving off different values based on width factors.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by raw10 View Post
    Try something like this:

    Code CSS:
    body.login{background: url(/wp-content/uploads/2012/02/login.png) center top no-repeat;}

    You'll have to reposition your form container to match up. If you use percentage positioning on a background image you'll see it drift around as the browser resizes.

    As for using WordPress for a dating site.... I guess that's off-topic.
    Whats wrong with building it on wordpress?

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks raw10 and Ryan. That did exactly what I wanted!


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
  •