Where did you install Firefox from? Help Mozilla uncover 3rd party websites that offer problematic Firefox installation by taking part in our campaign. There will be swag, and you'll be featured in our blog if you manage to report at least 10 valid reports!

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

Is there a way to left-align all images upon opening and remove the dark gray background. Thanks

  • 3 replies
  • 1 has this problem
  • 4 views
  • Last reply by dlove123

more options

I would like my photos to open like the old default style. Firefox quantum doesn't have an add-on that will remove the dark color and left-align the image like before.

Thanks for any feedback.

I would like my photos to open like the old default style. Firefox quantum doesn't have an add-on that will remove the dark color and left-align the image like before. Thanks for any feedback.

Chosen solution

You can do it with a custom style rule and the Stylus extension, or a userContent.css file. If you already have Stylus installed, that would be easier.

One preparatory setting change:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.

(2) In the search box above the list, type or paste moz-d and pause while the list is filtered

(3) Double-click the layout.css.moz-document.content.enabled preference to switch the value from false to true

The Stylus extension:

This is one of the easiest ways to inject custom style rules into web pages:

https://addons.mozilla.org/firefox/addon/styl-us/

If you don't want to install it, an alternative is to create a userContent.css file with the same rule. (See: http://kb.mozillazine.org/UserContent.css)

One-time Setup in Stylus:

Open the "Manage" page, which lists your existing user styles, if any.

Click the "Write new style" button.

In the "Enter a name" space, you can put something like Stand-alone images since this rule will only affect those.

On the right side, click in the box below "Code 1" and paste the following:

@-moz-document media-document(image) {
    body {
        color: #000 !important;
        background-color: #f8f8f8 !important;
        background-image: none !important;
        height: 100vh !important;
    }
    body > img {
        position: static !important;
        margin: 8px 0 0 8px !important;
    }
}

This gives you a very light gray background and positions the image in the upper left corner with 8 pixel margins at the top and left (similar to a normal web page). You can edit those 8px values as you like.

Then click the Save button in the left column and try viewing a stand-alone image in a different tab.

Success?

Before and After screenshots attached for reference.

Read this answer in context 👍 1

All Replies (3)

more options

So what site is hosting your images at? I would say the format would be from their site not the Browser as it only display what it is given.

more options

Chosen Solution

You can do it with a custom style rule and the Stylus extension, or a userContent.css file. If you already have Stylus installed, that would be easier.

One preparatory setting change:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.

(2) In the search box above the list, type or paste moz-d and pause while the list is filtered

(3) Double-click the layout.css.moz-document.content.enabled preference to switch the value from false to true

The Stylus extension:

This is one of the easiest ways to inject custom style rules into web pages:

https://addons.mozilla.org/firefox/addon/styl-us/

If you don't want to install it, an alternative is to create a userContent.css file with the same rule. (See: http://kb.mozillazine.org/UserContent.css)

One-time Setup in Stylus:

Open the "Manage" page, which lists your existing user styles, if any.

Click the "Write new style" button.

In the "Enter a name" space, you can put something like Stand-alone images since this rule will only affect those.

On the right side, click in the box below "Code 1" and paste the following:

@-moz-document media-document(image) {
    body {
        color: #000 !important;
        background-color: #f8f8f8 !important;
        background-image: none !important;
        height: 100vh !important;
    }
    body > img {
        position: static !important;
        margin: 8px 0 0 8px !important;
    }
}

This gives you a very light gray background and positions the image in the upper left corner with 8 pixel margins at the top and left (similar to a normal web page). You can edit those 8px values as you like.

Then click the Save button in the left column and try viewing a stand-alone image in a different tab.

Success?

Before and After screenshots attached for reference.

more options

Thank you for your quick repsonse, jscher2000. This was the perfect solution.