CODEWITHSUNDEEP
htmlcss
Naju
Naju

Reputation: 1541

Different background position for Firefox and Chrome

I am using an image as background in a div,I want to use different postioning for Firefox and Chrome.

I want to use this one for Mozila:

background-position: left -14px bottom -1px !important;

I want to use this one for Chrome:

background-position: left -14px bottom -2px !important;

Is it possible ? Please advice me..

Upvotes: 0

Views: 3019

Answers (3)

enguerranws
enguerranws

Reputation: 8233

You can use specific selectors for FF and Chrome :

To target Chrome :

@media screen and (-webkit-min-device-pixel-ratio:0) {
   .yourElement {
     background-position: left -14px bottom -2px !important;
   }
}

To target FF :

@-moz-document url-prefix() { 
  .yourElement {
    background-position: left -14px bottom -1px !important;
  }
}

That is way better than using User Agent.

Upvotes: 3

l2aelba
l2aelba

Reputation: 22147

First : Try to reset your CSS before you code ?

I don't think they are different pixel things between Chrome and Firefox (but not IEs)

Soloution : Add a CSS reset stylesheet before your custom CSS

Example : http://necolas.github.io/normalize.css/

And re-check your positions agian

Good luck !

Upvotes: 1

edonbajrami
edonbajrami

Reputation: 2206

The code to check if browser is Chrome you can use:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

And firefox:

var FIREFOX = /Firefox/i.test(navigator.userAgent);

Upvotes: 0

Related Questions