This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Change the size of the firefox logo

  • 10 replies
  • 1 has this problem
  • 1 view
  • Last reply by cor-el

more options

The Firefox logo on the Startpage is 97x97 pixels, I want to make it bigger but if I use a bigger image it gets cropped. How can I change the logo size with CSS please?

The Firefox logo on the Startpage is 97x97 pixels, I want to make it bigger but if I use a bigger image it gets cropped. How can I change the logo size with CSS please?

Chosen solution

jscher2000 said

Maybe you are enlarging the background image but not the height and width of the element that the background applies to??

Yes that was it. I changed the code to:

.logo {  
	background: url(Images/ff200.png) no-repeat center !important;
	background-size: 180px !important;
	position: absolute;
	margin-bottom: 100px;
	display: inline-block !important;
   	height: 200px !important;
    	width: 200px !important;
	}

and it finally worked. Thankyou so much for the help.

Read this answer in context 👍 0

All Replies (10)

more options

The CSS I am using for the Startpage is:

:root{
  scrollbar-color: #323639 #202125;
  scrollbar-width: 50px; }

@-moz-document url('about:home'), url('about:newtab') {
    body {
        background-image: url(Images/ff5.jpg) !important;
    }
}


@-moz-document url('about:home'), url('about:newtab') {#newtab-search-text {
	background-color: rgb(40,40,40) !important;
	border-radius: 10px 10px 10px 10px !important;      
	border-color: CornflowerBlue  !important;
	border-width: 2px !important;
	font-size: 16px !important;
	font-family: Arial !important;
	color: CornflowerBlue   !important;
}


	  
@-moz-document domain() {   
   .logo-and-wordmark {
	  margin-top: 140px;
	  height: 20px;
    }
	  
	.logo {  
	background: url(Images/logo3.png) no-repeat center !important;
	background-size: 95px !important;
	position: absolute;
	margin-bottom: 50px;
	display: block;
	}
	   
   .wordmark {
	visibility: hidden !important;  
	position: absolute;
	  margin-top:50px;
	  display: none;
   }
}

Modified by cor-el

more options

On this site you can put <pre> before and </pre> after your code snippets to prevent characters like # from being interpreted as wiki syntax. I think this empty domain() isn't helping:

@-moz-document domain() {   
   .logo-and-wordmark {
	  margin-top: 140px;
	  height: 20px;
    }
	  
	.logo {  
	background: url(Images/logo3.png) no-repeat center !important;
	background-size: 95px !important;
	position: absolute;
	margin-bottom: 50px;
	display: block;
	}
	   
   .wordmark {
	visibility: hidden !important;  
	position: absolute;
	  margin-top:50px;
	  display: none;
   }
}

Question: where is the Firefox logo you're referring to?

more options

Thanks for your help, the logo is on the StartPage albeit I removed the tiles and changed the logo to a darker version but even if I change the background size in the CSS it still crops the image. Do you think the domain() needs to be removed, if so how do I write it?

more options

Is that the Developer Edition start page??

Anyway, your other rules have this restriction:

@-moz-document url('about:home'), url('about:newtab'){}

so I think that probably is what you intended instead of domain().

more options

I got all the code from Google searches but here is the modified CSS

@-moz-document url('about:home'), url('about:newtab') {
    body {
        background-image: url(Images/ff5.jpg) !important;
    }
}

@-moz-document url('about:home'), url('about:newtab') {#newtab-search-text {
	background-color: rgb(40,40,40) !important;
	border-radius: 10px 10px 10px 10px !important;      
	border-color: CornflowerBlue  !important;
	border-width: 2px !important;
	font-size: 16px !important;
	font-family: Arial !important;
	color: CornflowerBlue   !important;
}
	  
@-moz-document url('about:home'), url('about:newtab') {   
   .logo-and-wordmark {
	  margin-top: 140px;
	  height: 20px;
    }
	  
	.logo {  
	background: url(Images/logo3.png) no-repeat center !important;
	background-size: 150px !important;
	position: absolute;
	margin-bottom: 50px;
	display: block;
	}
	   
   .wordmark {
	visibility: hidden !important;  
	position: absolute;
	  margin-top:50px;
	  display: none;
   }
}

but as you can see from the screenshot the background size increases the logo size but within a smaller container. I created the Startpage just to be different :)

more options

Maybe you are enlarging the background image but not the height and width of the element that the background applies to??

more options

Chosen Solution

jscher2000 said

Maybe you are enlarging the background image but not the height and width of the element that the background applies to??

Yes that was it. I changed the code to:

.logo {  
	background: url(Images/ff200.png) no-repeat center !important;
	background-size: 180px !important;
	position: absolute;
	margin-bottom: 100px;
	display: inline-block !important;
   	height: 200px !important;
    	width: 200px !important;
	}

and it finally worked. Thankyou so much for the help.

more options

I just want to see the FOX on my search page, either in white on white or whatever. What is the point of giving me this clever logo in a teeny tiny form way up in the left hand corner. I want him full size on my search page. He doesn't have to be in colour.

by the way, I like duck duck go. God, I'm sick of google.

more options

Hi magnetewanbooks, the large centered colorful Firefox logo appears if you remove a few sections of the other content on the page such as Top Sites, Recommended by Pocket, or Highlights. I can't remember seeing the other logo recently. Is that the one used for the tutorial button?

more options

The Firefox icon in the top left corner is about the onboarding feature, see about:config

  • browser.onboarding.enabled

The large icon in the center is only displayed when you only enable the Web Search bar and hide all other content on the Firefox Home page like posted above.