Viewing Browser Background Image Fill Not Appearing Correctly In Firefox Browser
Browser Background Image Fill Not Appearing Correctly In Firefox Browser
|
User: Emmanuel W. 9 years ago
|
|
| The Browser Background Image Fill for our website is not showing correctly in Firegox. If you look closely at the screen shots you can see that in Google Chrome the Background Image is centered. It shows like this in Safari and in EverWeb as well, but in Firefox it is off centered for some reason. The background is suppose to adjust accordingly with the window size, but with Firefox it does not do this. | |
 Google Chrome.png This is how it looks in Google Chrome. Notice the light is in the center with the blue and orange flames on either side.  FireFox.png |
|
|
User: Roddy 9 years ago
|
|
|
You are using this code to insert your background image… body { background: url('images/notfound/browser/Emmanuel-backround-bend1.jpg') no-repeat; background-position-x:50%; background-position-y:50%; margin: 0px auto; } Try using this instead… body{ background:url('images/notfound/browser/Emmanuel-backround-bend1.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Emmanuel W. 9 years ago
|
|
|
Quote: Roddy - 13/08/2014 6:12:09 You are using this code to insert your background image… body { background: url('images/notfound/browser/Emmanuel-backround-bend1.jpg') no-repeat; background-position-x:50%; background-position-y:50%; margin: 0px auto; } Try using this instead… body{ background:url('images/notfound/browser/Emmanuel-backround-bend1.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Thanks, I tried the code, but it causes the background image to to remain stationary when scrolling through the page. I need the background image to scroll with the content. |
|
|
User: Roddy 9 years ago
|
|
|
Have you tried inserting the image using the EverWeb Page inspector Browser Background/Image Fill?
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: David P. 9 years ago
|
|
|
I've the same problem! I'm trying to set a "Browser background" image in Everweb with "Original size" option selected. It shows correctly on Chrome and Safari, but not in Firefox where "original size" or "tile" options doesn't show any change. |
|
|
User: David P. 9 years ago
|
|
|
Well... I've compared the source code of a page created with iWeb with the same page created by EverWeb and I think I've found a solution. I've just added this code to the "Head code" box of the page in EverWeb: <style type="text/css"> body{ background:url({!-ASSETSPATH-!}Images/Background.jpg) no-repeat scroll center center; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();"> } </style> I don't know what I'm doing... but after that, now the background it's displayed correctly at original size in Safari, Chrome and Firefox. |
|
|
User: Jumbo T. 9 years ago
|
|
|
Quote: I don't know what I'm doing You can say that again. Use this (without the margin, onload and onunload code): background:url({!-ASSETSPATH-!}Images/Background.jpg) no-repeat scroll center center; |
|
|
User: David P. 9 years ago
|
|
|
Quote: Jumbo T. - 01/02/2015 16:54:21 Quote: I don't know what I'm doing You can say that again. Use this (without the margin, onload and onunload code): background:url({!-ASSETSPATH-!}Images/Background.jpg) no-repeat scroll center center; Thanks Jumbo! I've tried without margin and without onload and onunload code (I don't know that it means, I've just copied from source code generated by iWeb) but... the image still not showed correctly. Please, notice the difference: What I want and I can see with iWeb and any browser, and EverWeb with Safari and Chrome (with original size background option selected):  What I receive in any browser with EverWeb if I use your code:  What I receive with EverWeb and Firefox without any code (background original size or tile make no difference):  ]Why this occurs if the background is always the same? Last edit 9 years ago |
|
|
User: Jumbo T. 9 years ago
|
|
|
I used one of the images above in a page 208px wide and 364px high. Page Background : None Browser Background : Colorfill Then this code in the Head Code box: <style> body {background: url("{!-ASSETSPATH-!}Images/Background.png") no-repeat top center;} </style> Then previewed in Safari, Chrome, FF. Page looked the same. |
|
|
User: David P. 9 years ago
|
|
|
Ok. I've tried with a bigger picture (4285 × 2845) in a page 1000px wide and 1000px high, with 0px of margin, header and footer. Page Background: None Browser Background: Image Fill (Original Size) Just put a text box with some text into the web taking as a reference of position any exact point of the background. First... you can look with preview that Firefox doesn't recognize if Everweb specifies that background is ajusted as tile or original. Safari or Chrome has no problem... So, Firefox always shows the same and it's not according to what Everweb shows. Second, if I use your code, the background isn't showed either like I can see in Everweb, although it seems to be identical in Safari, Chrome and Firefox. But not like "original size" in Everweb. So... I think that maybe it's possible to do a change in EverWeb by developers to get all browsers showing the same position of background that we are viewing in the software (just Firefox isn't working well, but the same web created by iWeb works in all browsers). While we are waiting, sure there's a code to insert in Head Code that brings us the possibility to view the background in all browsers exactly as it's showed in Everweb with image fill and "original size" option checked. Mine is working as I want, but perhaps it will be better this?: <style> body {background: url("{!-ASSETSPATH-!}Images/Background.jpg") no-repeat center center;} </style> If this last code works, I think we just want that Everweb insert this code by default in the source code of our websites when we chose an image to work good in Firefox, without the user having to insert this code. What do you think? Thank you very much for your support. |
|
| Post Reply |
| You must login or signup to post. |