How to use local image?

About: Google - Simple background image code
edited March 2013 in Style Reviews
Great style, but how can i use image from my computer as a background?

Comments

  • Drag the image into your browser and copy its URL from the address bar. Now edit the style, find the background-image
    background-image: url(http://koleksifoto.com/images/wallpapers/31819736/Exclusive/Fractal_Art/Fractal_Art_17.jpg) !important;
    and replace that URL with the URL of your local image.
  • Interesting - I could swear I tried this a few months ago and it did not work (after having worked in the past) -and then when I googled it I found posts that said that Firefox no longer allowed local files, that you needed to use a web server to use local images. But it does work for me now. Is there any validity to what I remember hideheader? I don't think I would have used the wrong url format. But maybe I'm just remembering something that didn't happen - wouldn't be the first time.
  • edited March 2013
    Chrome Version 25.0.1364.152 m / Windows 7 Version 6.1

    I have always been able to use local images with Firefox. I have never been able to use local images with Chrome unless the image has been converted to data URI.
  • Fair enough. Do this:
    1. Create a new folder. Name it anything.
    2. In that folder create a new text file manifest.json and copy this into it:
      {
      "description": "An empty extension to hold Stylish background images",
      "manifest_version": 2,
      "name": "My Stylish background images",
      "version": "0",
      "web_accessible_resources": [ "*" ]
      }
    3. Put a nice background image into the folder, too. Mine will be "nice_background.jpg".
    4. In Chrome, install the new folder as an extension.
      1. Browse to chrome://extensions/ (that is, [menu] > Tools > Extensions)
      2. Check "Developer Mode" if it isn't already checked
      3. Click "Load unpacked extension...". Browse to your new folder, then click "OK".
    5. Select and copy the ID of your new "extension". Mine is "thelongeststreetnameinallofwales". This will be the domain for files in the new folder:
      BODY {
      background-image: url("chrome-extension://thelongeststreetnameinallofwales/nice_background.jpg") !important;
      }
    I found posts that said that Firefox no longer allowed local files, that you needed to use a web server to use local images.
    file: URLs have always worked in Firefox. In Firefox, user style sheets are applied in the browser's security context, so there's no restriction on reading the local filesystem.

    Chrome though doesn't support user styles sheets. In Chrome, Stylish inserts author style sheets into the HEAD element of a webpage. They are applied in the web page's security context, not the browser's, so they have no more access to the local filesystem than any other file originating from the website.

    Until ca. Chrome 18, though, a web page could load any extension resource using the chrome-extension: protocol, which meant that you could simply tuck a local background image into the Stylish extension folder (or one of its subfolders) and retrieve it as e.g. chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/128.png That however provided a way to remotely enumerate installed extensions, so Chrome now requires extensions to specify which resources can be used by a web page.
  • edited March 2013
    hideheader, you are the master ^:)^ I followed these instructions and it worked.

    I don't currently have a need for this technique, but I'm sure I will. For trying out different local images, or an image I am working on, I have used Apache with localhost, but i don't normally have Apache running so I have uploaded images to a host even when I'm the only one using them.
  • Is it possible to use 10 or more local images and every time i load google page to load different image (to rotate images)?
  • edited March 2013
    That sounds like a task for a simple Greasemonkey script (in Firefox - might require an extension to do it in Chrome?). I am a little surprised there is not one already (I couldn't find one anyway).

    I'm sure it's not possible with css/Stylish (ok experts, prove me wrong...)
  • edited May 2013
    Is it possible to use 10 or more local images and every time i load google page to load different image (to rotate images)?
    Yes, but not with Stylish. CSS doesn't "remember" anything between page loads.

    In Chrome,
    1. Create an empty "extension" for your local images. If you already have a folder full of images, just put manifest.json into that folder and use it as your "extension".
    2. In that folder create a new text file background_rotator.user.js and copy this into it:
      // ==UserScript==
      // @name Google background rotator
      // @namespace forum.userstyles.org
      // @match http://www.google.com/
      // @match https://www.google.com/
      // @run-at document-start
      // ==/UserScript==

      const FOLDER = "chrome-extension://thelongeststreetnameinallofwales/";
      const STYLE = "body {\
      background-image: url(**) !important;\
      background-size: cover !important;\
      }";
      const IMAGES = [
      "nice_background.jpg",
      "another_nice_background.png"
      ];
      var i = IMAGES.indexOf(localStorage.lastImage) + 1,
      url = localStorage.lastImage = IMAGES[i < IMAGES.length ? i : 0],
      s = document.createElement("style");
      s.setAttribute("type", "text/css");
      s.setAttribute("id", "background_rotator");
      s.appendChild(
      document.createTextNode(STYLE.replace("**", FOLDER + url))
      );
      (document.getElementsByTagName('head')[0] || document.documentElement).appendChild(s);
      Replace my extension ID ("thelongeststreetnameinallofwales") in FOLDER with your extension ID, and replace my IMAGES with your images.
    3. Open the Extensions manager ([menu] > Tools > Extensions). Drag and drop the userscript background_rotator.user.js onto the Extensions manager to install it.
    The script runs shortly after the DOMContentLoaded event, after the webpage has been parsed but before the images and other bits and pieces of it have arrived, and adds a stylesheet to the document HEAD. A URL is constructed from FOLDER and one of the IMAGES file names, and is used to replace ** in STYLE.

    In Firefox,
    1. Create an empty "extension" for your local images.
      1. Create a new folder. Name it anything.
      2. In that folder create a new text file install.rdf and copy this into it: <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>prettypictures@userstyles.org</em:id> <em:version>0</em:version> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- https://addons.mozilla.org/en-US/firefox/pages/appversions/ --> <em:minVersion>1.5</em:minVersion> <em:maxVersion>*</em:maxVersion> </Description> </em:targetApplication> <em:bootstrap>true</em:bootstrap> <em:name>My Stylish background images</em:name> <em:description>An empty add-on that gives access to local images via chrome: URLs. Browse to chrome://images/content/*</em:description> <!--em:creator>Your Name Here</em:creator--> <em:homepageURL>http://forum.userstyles.org/discussion/34792/how-to-use-local-image#Item_9</em:homepageURL> </Description> </RDF>
      3. Create another new text file chrome.manifest in the same folder and copy this into it:
        content  images  ./  contentaccessible=yes
        This maps the URL chrome://images/content/ to this filesystem folder, and gives webpages access to its content.
      4. Create a third new text file prettypictures@userstyles.org in the extensions subfolder of your Firefox profile folder, [profile]/extensions/. Copy the path to the new folder into it. When Firefox restarts, it will recognize this file as pointing to an add-on and follow the path inside it to your new folder.
    2. Install the Greasemonkey add-on if it isn't yet installed - Firefox doesn't natively support userscripts.
    3. Restart Firefox. The new add-on(s) won't be active until you do.
    4. Create a new Greasemonkey script ([menu] > Tools > Greasemonkey > New User Script...).
      1. Give it a "Name" and a "Namespace" (any text will do), and click OK.
      2. In the editor, replace the content with the script above.
      3. In that script replace the FOLDER string with "chrome://images/content/", and
      4. Replace the list of file names with those of your own images.
      5. Save the script
  • I have been trying several times and have not been able to get this to work. When I add the prettypictures@userstyles.org in my profile folder, when I restart firefox that file disappears. Not sure what I am doing wrong.
  • edited May 2013
    In Firefox,
    1. The extension proxy file prettypictures@userstyles.org should be in
      [profile folder]/extensions/
      , not in the profile folder itself. I've corrected the instructions above.
    2. Your problem, though, is either that you've changed the name of the proxy file, or there is no valid install.rdf file in the folder that the proxy file points to.
    The proxy file can have any this@that name, but its name must match RDF > Description > id in install.rdf. If it doesn't, or if install.rdf lacks some required element, Firefox deletes the proxy file.
  • Thank you for your help, I did get it working. Two things I was wondering if you could help me with. The first, the background picture on my search results is enlarged and only shows part of the picture. The actual google page shows up correctly, but the results are different. The second problem, is that the text on the search results is hard to read. I was wondering if there was an easy way to change the color of the text, or even disable the image on the search results. Ideally I would like to have the picture fill the screen and not be enlarged, and change the color of the text in the search results.

    Thanks again for your help.
  • edited May 2013
    first, the background picture on my search results is enlarged and only shows part of the picture.
    Replace the background-image rule in the example above with this rule
    background: url(**) fixed no-repeat !important;
    The background will cover the entire element and not just the viewport if the background-attachment isn't fixed.

    Add these rules to uncover the obscured background. Note however that the "Search tools" menu can be seen when it's closed.
    I was wondering if there was an easy way to change the color of the text...
    #rso * {color: magenta !important}
    but better to selectively recolor the text to preserve the color "semantics" in the results.

    A background may help:
    #ires {background: rgba(0,128,255,0.4) !important}
    The DOM Inspector will be useful.
    ... or even disable the image on the search results.
    Change @match to @include in the metadata block to restrict the style to the Google landing page:
    // @include       http://www.google.com/
    // @include https://www.google.com/
  • Thank you so much for all your help! I have utilized this on other sites as well and love it!
  • Fair enough. Do this:

    1. Create a new folder. Name it anything.
    2. In that folder create a new text file manifest.json and copy this into it:
      {
      "description": "An empty extension to hold Stylish background images",
      "manifest_version": 2,
      "name": "My Stylish background images",
      "version": "0",
      "web_accessible_resources": [ "*" ]
      }
    3. Put a nice background image into the folder, too. Mine will be "nice_background.jpg".
    4. In Chrome, install the new folder as an extension.
      1. Browse to chrome://extensions/ (that is, [menu] > Tools > Extensions)
      2. Check "Developer Mode" if it isn't already checked
      3. Click "Load unpacked extension...". Browse to your new folder, then click "OK".
    5. Select and copy the ID of your new "extension". Mine is "thelongeststreetnameinallofwales". This will be the domain for files in the new folder:
      BODY {
      background-image: url("chrome-extension://thelongeststreetnameinallofwales/nice_background.jpg") !important;
      }
    I found posts that said that Firefox no longer allowed local files, that you needed to use a web server to use local images.
    file: URLs have always worked in Firefox. In Firefox, user style sheets are applied in the browser's security context, so there's no restriction on reading the local filesystem.

    Chrome though doesn't support user styles sheets. In Chrome, Stylish inserts author style sheets into the HEAD element of a webpage. They are applied in the web page's security context, not the browser's, so they have no more access to the local filesystem than any other file originating from the website.

    Until ca. Chrome 18, though, a web page could load any extension resource using the chrome-extension: protocol, which meant that you could simply tuck a local background image into the Stylish extension folder (or one of its subfolders) and retrieve it as e.g. chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/128.png That however provided a way to remotely enumerate installed extensions, so Chrome now requires extensions to specify which resources can be used by a web page.

    5 years on and your post still valid. Thanks buddy, that was very helpful
Sign In or Register to comment.