X
Tap here to go to the mobile version of the site.

Support Forum

Change the size of the firefox logo

Posted

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
Quote

Question owner

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;
   }
}
The CSS I am using for the Startpage is: <pre><nowiki>: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; } }</nowiki></pre>

Modified by cor-el

Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8438 solutions 68878 answers

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?

On this site you can put &lt;pre> before and &lt;/pre> after your code snippets to prevent characters like # from being interpreted as wiki syntax. I think this empty '''domain()''' isn't helping: <pre>@-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; } } </pre> Question: where is the Firefox logo you're referring to?
Was this helpful to you?
Quote

Question owner

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?

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?
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8438 solutions 68878 answers

Helpful Reply

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().

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().
Was this helpful to you? 1
Quote

Question owner

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 :)

I got all the code from Google searches but here is the modified CSS <pre>@-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; } } </pre> 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 :)
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8438 solutions 68878 answers

Helpful Reply

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

Maybe you are enlarging the background image but not the height and width of the element that the background applies to??
Was this helpful to you? 1
Quote

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.

''jscher2000 [[#answer-1215714|said]]'' <blockquote> Maybe you are enlarging the background image but not the height and width of the element that the background applies to?? </blockquote> Yes that was it. I changed the code to: <pre> .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; } </pre> and it finally worked. Thankyou so much for the help.
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.