SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Battle Ground, Washington, United States
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Full sized BG image not appearing...

    Here is the website I'm working on: http://www.koolcollar4dogs.com/test/

    I'm trying to get a full size background image that is fixed and resizes to the browser size. I found a couple of sample codes here: http://css-tricks.com/perfect-full-p...kground-image/ but for some reason none of them are working... I got technique #2 to reveal the image but it was on top of the rest of the layout...

    Is there something in my CSS that is stoping this from happening?

    Thanks for your help.

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Battle Ground, Washington, United States
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I literally cannot get an image to be the background at all... Even just a static no repeat image... I don't understand what's happening.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    The path to the image is wrong. Instead of

    Code:
    body {
      background-image: url("image/bg.jpg");
      color: #444444;
      font: 14px/21px 'Neuton',serif;
    }
    try

    Code:
    body {
      background-image: url("/test/images/bg.jpg");
      color: #444444;
      font: 14px/21px 'Neuton',serif;
    }
    (Notice your image folder is called "images", not "image".

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Battle Ground, Washington, United States
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh.... That fixed it. It's always the little things. It really helps to have another set of eyes on these things! I was going crazy trying to figure it out.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Ha ha, no worries. With images, the first thing I always check is the file paths. Just remember that when this goes live, you'll probably need to change the paths. If this site will remain at this domain when finished, I'd recommend having the images folder where it will finally end up (in the root folder, for example) to avoid having to alter all of the links when you move everything. If you are building this site to sit on another domain, it would be better to develop it on a subdomain, so that, again, you won't have to alter all the file paths.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Battle Ground, Washington, United States
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That's good advice.

    So I got it to work on my laptop but it's not translating to mobile. Any ideas why? This is what I get when I pull it up on my iphone:

    Click for large view - Uploaded with Skitch

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Not sure, but firstly try putting the bg image on the body element rather than the html element. And try it not fixed, as the phone may have a roblem with that. If it does, then make it not fixed for that device via media queries. E.g.

    Code:
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    	body {background:  url("/test/images/bg.jpg") 50% 0;}
    }

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,436
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    Some phones - including mine - don't display background images. You may be able to change that in the preferences - I've never tried before, and I'm having trouble getting a connection just now to test it out.

    Edit: OK - I've managed to connect now. I'm using Opera Mini. If I have "Mobile View" on in my settings, it doesn't display background images; with "Mobile View" off, it does - and takes an eternity to load a page.
    Don't serve your porridge and then go out for a walk.

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Location
    Battle Ground, Washington, United States
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, Ok well I put the code into the body tag. It seems like it's actually just being stretched the ENTIRE hight of the website.

    But as TechnoBear says it'll probably take forever to load on mobile phones, I should probably just use a background color for the mobile version for speeds sake.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Yeah, people on mobiles don't really get much of an effect from the background image, and it's a courtesy to save them unnecessary downloads.

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    AJR, are missing a BASIC concept of responsive design. With an @media query you have RANGED the screen size of the targeted device. It would be most advantageous if you prepared alternate images congruent with this range. I mean It is really bad enough when you get a design that utilizes a full screen BG image whose source file is 2400px+ X 1200px+ ... but then to attempt to serve the same file to a mobile device, knowing the screen size is NEVER going to be bigger than 480px is just not clever You may also try background-size:cover; (along withthe smaller image, maybe recalculating it to a 1:1 ratio)


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
  •