#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2011
    Posts
    3
    Rep Power
    0

    Chrome firefox background image confusion


    Hi, okay I am working on a website for a friend, and it is peak-performance.biz I want the background image to fill up the page and be unscrollable. I made it work and look very good in chrome but it only takes up half the page in firefox. I was wondering if anyone have any ideas how to fix this. Thanks for your advice in advance.

    I have used

    html{
    background-color:#000000;
    background-image:url(images/background.jpg);
    background-repeat:no-repeat;
    background-size:1300px;
    height:1000px;
    background-attachment:fixed;
    }

    and

    html{
    background-color:#000000;
    background-image:url(images/background.jpg);
    background-repeat:no-repeat;
    background-size:100%;
    background-attachment:fixed;
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, marshalinsights.

    Firefox 3.6 requires the use of the vendor prefix for that property. Some other browsers require a vendor prefix too.

    Code:
    html {
      background: #000 url(images/background.jpg) no-repeat fixed;
      -webkit-background-size: 100% auto;
      -moz-background-size: 100%;
      -khtml-background-size: 100%;
      -o-background-size: 100%;
      background-size: 100%; /* the property without a prefix should come last */
    }
    Are you aware that many browsers don't support that property at all yet? Here's an alternative that will work in more browsers.

    P.S. It would be helpful if you put your code between [code][/code] tags in the future.
    Last edited by Kravvitz; March 6th, 2011 at 03:48 PM.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2011
    Posts
    3
    Rep Power
    0

    Thank You! 2 more questions :)


    Thank you so much! That works, I dont need to be embarrassed anymore!

    I have 2 more questions if you do not mind.

    1. In firefox there is a red outline around the images with links at the bottom. How do I not get the link color outline around images in firefox?

    2. how do I make my "wrapper" transparent without making the text transparent? I have seen in done in programs such as artisteer but i have not been able to figure by searching forums.

    Thanks alot!
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome. Follow up questions are a good thing in general.

    1) Add "border:0 none" to the "a img" rule (of "template.css") which is currently empty.

    2) Do you mean that you want it to be partially transparent? The way to do that is to use rgba() with a PNG fallback. If you don't want to create the PNG manually, you can use this: http://leaverou.me/rgba.php/

    To make it work in IE6, you would need a script like DD_belatedPNG.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2011
    Posts
    3
    Rep Power
    0

    Thanks so much!


    Thanks so much you are my hero! How do I buy you a drink?

IMN logo majestic logo threadwatch logo seochat tools logo