Full sized BG image not appearing

HTML & CSS
1

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-page-background-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

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

The path to the image is wrong. Instead of

body {
  background-image: url("[COLOR="#FF0000"]image/bg.jpg[/COLOR]");
  color: #444444;
  font: 14px/21px 'Neuton',serif;
}

try

body {
  background-image: url("[COLOR="#FF0000"]/test/images/bg.jpg[/COLOR]");
  color: #444444;
  font: 14px/21px 'Neuton',serif;
}

(Notice your image folder is called “images”, not “image”.

4

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

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

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:

[url=https://skitch.com/ajrdesign/812uh/public-dropbox]Click for large view - [color=#A7A7A7]Uploaded with [url=http://skitch.com]Skitch[/color]

7

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.


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

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. :rolleyes:

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. :slight_smile:

9

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

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

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 :wink: You may also try background-size:cover; (along withthe smaller image, maybe recalculating it to a 1:1 ratio)