Chrome Extension gradient background not working properly











up vote
0
down vote

favorite












I am working on a Google Chrome extension that replaces the new tab page. (Like a lot of other extensions) I have the background-image tag with a gradient as the style of the body tag on said new tab page. When it loads the new tab, I get the gradient split into about 30 sections vertically, each with their own gradient. It also happens in the below snippet, but not on GitHub Pages.
Any help is appreciated.



Screenshot of page



Code:






<body id="pagebody" style="background-image: linear-gradient(0deg, #39f, #ff0);">

stuff

</body>





<script>

rotC = 0;

setInterval(function() {rotC++; if (rotC == 360) {rotC = 0;} document.getElementById('pagebody').style.backgroundImage = `linear-gradient(${rotC}deg, #39f, #ff0)`; /*lblTime.innerHTML = document.getElementById('pagebody').style.backgroundImage;*/}, 50);

</script>








css google-chrome-extension







share|improve this question


























    up vote
    0
    down vote

    favorite












    I am working on a Google Chrome extension that replaces the new tab page. (Like a lot of other extensions) I have the background-image tag with a gradient as the style of the body tag on said new tab page. When it loads the new tab, I get the gradient split into about 30 sections vertically, each with their own gradient. It also happens in the below snippet, but not on GitHub Pages.
    Any help is appreciated.



    Screenshot of page



    Code:






    <body id="pagebody" style="background-image: linear-gradient(0deg, #39f, #ff0);">
    
stuff
    
</body>
    

    

    
<script>
    
rotC = 0;
    
setInterval(function() {rotC++; if (rotC == 360) {rotC = 0;} document.getElementById('pagebody').style.backgroundImage = `linear-gradient(${rotC}deg, #39f, #ff0)`; /*lblTime.innerHTML = document.getElementById('pagebody').style.backgroundImage;*/}, 50);
    
</script>








    css google-chrome-extension







    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I am working on a Google Chrome extension that replaces the new tab page. (Like a lot of other extensions) I have the background-image tag with a gradient as the style of the body tag on said new tab page. When it loads the new tab, I get the gradient split into about 30 sections vertically, each with their own gradient. It also happens in the below snippet, but not on GitHub Pages.
      Any help is appreciated.



      Screenshot of page



      Code:






      <body id="pagebody" style="background-image: linear-gradient(0deg, #39f, #ff0);">
      
stuff
      
</body>
      

      

      
<script>
      
rotC = 0;
      
setInterval(function() {rotC++; if (rotC == 360) {rotC = 0;} document.getElementById('pagebody').style.backgroundImage = `linear-gradient(${rotC}deg, #39f, #ff0)`; /*lblTime.innerHTML = document.getElementById('pagebody').style.backgroundImage;*/}, 50);
      
</script>








      css google-chrome-extension







      share|improve this question













      I am working on a Google Chrome extension that replaces the new tab page. (Like a lot of other extensions) I have the background-image tag with a gradient as the style of the body tag on said new tab page. When it loads the new tab, I get the gradient split into about 30 sections vertically, each with their own gradient. It also happens in the below snippet, but not on GitHub Pages.
      Any help is appreciated.



      Screenshot of page



      Code:






      <body id="pagebody" style="background-image: linear-gradient(0deg, #39f, #ff0);">
      
stuff
      
</body>
      

      

      
<script>
      
rotC = 0;
      
setInterval(function() {rotC++; if (rotC == 360) {rotC = 0;} document.getElementById('pagebody').style.backgroundImage = `linear-gradient(${rotC}deg, #39f, #ff0)`; /*lblTime.innerHTML = document.getElementById('pagebody').style.backgroundImage;*/}, 50);
      
</script>








      <body id="pagebody" style="background-image: linear-gradient(0deg, #39f, #ff0);">
      
stuff
      
</body>
      

      

      
<script>
      
rotC = 0;
      
setInterval(function() {rotC++; if (rotC == 360) {rotC = 0;} document.getElementById('pagebody').style.backgroundImage = `linear-gradient(${rotC}deg, #39f, #ff0)`; /*lblTime.innerHTML = document.getElementById('pagebody').style.backgroundImage;*/}, 50);
      
</script>





      <body id="pagebody" style="background-image: linear-gradient(0deg, #39f, #ff0);">
      
stuff
      
</body>
      

      

      
<script>
      
rotC = 0;
      
setInterval(function() {rotC++; if (rotC == 360) {rotC = 0;} document.getElementById('pagebody').style.backgroundImage = `linear-gradient(${rotC}deg, #39f, #ff0)`; /*lblTime.innerHTML = document.getElementById('pagebody').style.backgroundImage;*/}, 50);
      
</script>





      css google-chrome-extension




      css google-chrome-extension






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 9 at 3:44









      TheProgrammedDev

      13




      13





























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53219554%2fchrome-extension-gradient-background-not-working-properly%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown






























          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53219554%2fchrome-extension-gradient-background-not-working-properly%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          Schultheiß

          Image
          Der Titel dieses Artikels ist mehrdeutig. Weitere Bedeutungen sind unter Schultheiß (Begriffsklärung) aufgeführt. Ein Schultheiß. Holzschnitt von Peter Flötner (16. Jahrhundert) Der Schultheiß oder Schuldheiß (von althochdeutsch  sculdheizo ‚Leistung Befehlender‘, vgl. mittelniederdeutsch  schult(h)ēte , latinisiert (mittellat.) sculte(t)us , schwäbisch heute noch Schultes für „Bürgermeister“) bezeichnet einen in vielen westgermanischen Rechtsordnungen vorgesehenen Beamten, der Schuld heischt : Er hatte im Auftrag seines Herren (Landesherrn, Stadtherrn, Grundherrn) die Mitglieder einer Gemeinde zur Leistung ihrer Schuldigkeit anzuhalten, also Abgaben einzuziehen oder für das Beachten anderer Verpflichtungen Sorge zu tragen. Sprachliche Varianten des Schultheißen sind Schulte , Schultes oder Schulze . Früher wurde zwischen dem Stadtschulzen und dem Dorfschulzen unterschieden. In der städtischen Gerichts- und Gemeindeverfassung war er ein vom städtischen Rat oder vom L...
          Read more

          Verwaltungsgliederung Dänemarks

          Image
          Das Königreich Dänemark umfasst neben dem kontinentaleuropäischen Kernland auch die autonomen Außengebiete Färöer und Grönland. Die staatsrechtliche Einheit von Mutterland und ehemaligen Besitzungen wird als „Reichsgemeinschaft“ (dänisch rigsfællesskabet ) bezeichnet. Die Verwaltungsgliederung des dänischen Kernlandes umfasst seit dem 1. Januar 2007 fünf Regionen und 98 Kommunen. Die Amtsbezirke/Kreise (dän. amt ) wurden im Zuge einer Gebietsreform abgeschafft. Ihre Zuständigkeiten wurden auf Regional- und kommunale Ebene verteilt. Inhaltsverzeichnis 1 Regionen 2 Kommunen 3 Historische Verwaltungsgliederungen 3.1 Älteste Strukturen 3.2 Bistümer (ab 10. Jahrhundert) 3.3 17. und 18. Jahrhundert 3.4 Von 1793 bis 1970 3.5 Von 1970 bis 2007 3.5.1 Fusionen bis Ende 2006 und große Kommunalgebietsreform 4 Literatur 5 Einzelnachweise 6 Weblinks Regionen | → Hauptartikel : Region (Dänemark) Dänemarks Regionen (seit 2007...
          Read more

          Liste der Kulturdenkmale in Wilsdruff

          Image
          Wappen von Wilsdruff Die Liste der Kulturdenkmale in Wilsdruff enthält die Kulturdenkmale in Wilsdruff. Die Anmerkungen sind zu beachten. Diese Liste ist eine Teilliste der Liste der Kulturdenkmale im Landkreis Sächsische Schweiz-Osterzgebirge. Diese Liste ist eine Teilliste der Liste der Kulturdenkmale in Sachsen. Inhaltsverzeichnis 1 Legende 2 Wilsdruff 3 Birkenhain 4 Blankenstein 5 Braunsdorf 6 Grumbach 7 Grund 8 Helbigsdorf 9 Herzogswalde 10 Kaufbach 11 Kesselsdorf 12 Kleinopitz 13 Limbach 14 Mohorn 15 Oberhermsdorf 16 Anmerkungen 17 Ausführliche Denkmaltexte 18 Quellen 19 Weblinks Legende | Bild: zeigt ein Bild des Kulturdenkmals und gegebenenfalls einen Link zu weiteren Fotos des Kulturdenkmals Bezeichnung: Name, Bezeichnung oder die Art des Kulturdenkmals Lage: Straßenname und wenn vorhanden Hausnummer des Kulturdenkmals; Grundsortierung der Liste erfolgt nach dieser A...
          Read more