PDA

View Full Version : Background issue in Chrome


Finland Blue
04-03-2012, 03:16 PM
I'm working on the following web site :

www.travel-experience.net

The background image on it shows a white 1 pixel border on the left side of my screen in Chrome.

I don't see this issue on other web sites --- eg, http://www.laplandsafaris.com/

Can anyone see why this might be, so I can correct it? I'm viewing this issue in Chrome, but not in Firefox or IE.

Thanks for any feedback.

gentleone
04-03-2012, 03:57 PM
It looks good in my Chrome on the Mac... i don't see a white border.

By the way... the site has become really nice, Finland Blue. Good job ;)

I did see a little thing in your source which you might want to fix,

<h3>
<p>Our unique self-guided cycling tour visits the stunning islands of the Finnish archipelgo. Read more ...</p>
</h3>

It's not allowed to have paragraph tags in between heading tags. It's pointless anyway, because it's a heading what you declare in the first place.

domedia
04-03-2012, 04:18 PM
Looks *great* here as well. In chrome, hit CTRL+0 just to make sure you're zoom level is not off. I'm not seeing any white line.

I'll be in Finland this summer, but your web site makes me want to go now! :)

Finland Blue
04-03-2012, 04:32 PM
Thanks for the nice comments - that's really nice to hear :-)

Thanks for the tip on the heading tags ... I missed that ... still learning ...

I'm now on a PC (laptop closed) and in Chrome I'm not getting the white border, so maybe it is something to do like you say with the zoom - I try that CTRL+0 next time I power it up, and see if that clears it. Thanks for checking. (Finland is looking quite nice now - still lots of snow around but longer days and sun, could be worse :-)

Did you notice the page taking a long time to lead ... those backgrounds, they are maybe quite large, I'm trying to keep them small enough to load reasonably quickly, but large enough to keep their quality ...

gentleone
04-03-2012, 05:35 PM
That background image is big (126kb), but for the dimensions it is, you optimized it pretty well. You can get a bit more off with http://www.jpegmini.com/
I got it to 111kb with that service.

Otherwise look into the CSS3 background-size property. You can make than the dimensions smaller around a 1440px wide, so that the bytes will be lesser than how it's now.
Another thing is that you will have to create a fallback solution for IE8 and below with some browser sniffing and inject the background image with javascript as an img tag into the DOM and fake it as a background with some CSS tricks.

It's more work to do it like this, but the performance/speed will be better and that's what's count.

Corrosive
04-04-2012, 09:45 AM
Agree with the others. Cracking job on that website, good skills :)

Finland Blue
04-04-2012, 02:13 PM
Hei Domedia, I tried the Chrome zoom thing - I was at 100%. I noticed that I get the white line at 100%, zomming to 110% I didn't get the line anymore, but zooming to 125% it came back again! Similarly zooming the other way, I didn't get the line at 90% but I DID at 75%! Bit bizarre!
Maybe its a Chrome thing, maybe its a laptop thing? But given that other pages with background did not show same issues, I'm still baffled ... but if there is not error in the coding, then I guess its not an issue I can correct that way.

Finland Blue
04-04-2012, 02:14 PM
Agree with the others. Cracking job on that website, good skills :)
Thanks - its really nice to hear these comments, really appreciated :-)

domedia
04-04-2012, 03:02 PM
The funny thing is I've been thinking about doing a company like this (destination marketing and -activities) in northern Norway for a while.