Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

Adding background image in web app

741 views
Skip to first unread message

Kuyz Dan

unread,
Mar 5, 2022, 8:31:48 AM3/5/22
to Google Apps Script Community
Anyone can help me on how I can add a background image in my webapp using Google Drive?
I've been using background code by it fails if linked to my google drive image that is shared to anyone with the link.


Clark Lind

unread,
Mar 6, 2022, 2:12:23 PM3/6/22
to Google Apps Script Community
There is a hack you should be able to use. If you have the image's drive file ID, try using this url style as the image src:

HOPE VISION SERVICE

unread,
Oct 14, 2024, 6:13:47 PM10/14/24
to Google Apps Script Community
I'm designing a website using Google Apps Script and I need help setting a background image in HTML. I've tried various codes, but the image is not displaying. any one please help me with codes

Wilson Galter

unread,
Oct 14, 2024, 6:34:31 PM10/14/24
to google-apps-sc...@googlegroups.com

This works for me.

  body {
     
          background-color: #000;
     
              background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  }

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/29d010d4-f067-4e2b-9c20-54207a7a824dn%40googlegroups.com.

Wilson Galter

unread,
Oct 14, 2024, 6:53:43 PM10/14/24
to Google Apps Script Community
Make sure that the file is viewable by anyone with the link in the share file settings in google drive. 
Copy the file key and paste it after the id=

HOPE VISION SERVICE

unread,
Oct 14, 2024, 7:07:36 PM10/14/24
to Google Apps Script Community
this is my code i tried its not working

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <title>Background Image Example</title>
    <style>
 body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  }
        }
    </style>
</head>
<body>
    <h1>Welcome to My Web Page!</h1>
</body>
</html>


function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Wilson Galter

unread,
Oct 14, 2024, 7:25:07 PM10/14/24
to google-apps-sc...@googlegroups.com
First there is an extra closing curly brace (}) after the CSS rules for the body.
Also make sure that your file name matches in the 
HtmlService.createHtmlOutputFromFile('Index');


 
 



HOPE VISION SERVICE

unread,
Oct 14, 2024, 8:22:24 PM10/14/24
to Google Apps Script Community
Hi, Thanks for support 
    The background image for the Google Script web app is now working successfully . After two many testing's finally, I got the result!

Here is the code:

code.gs 

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('Background Image Example')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <title>Background Image Example</title>
    <style>
        body {
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: cover; /* Ensures the image covers the entire page */
        }

        h1 {
            color: white;
            text-align: center;
            margin-top: 20%;
            font-size: 3em;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Web Page !</h1>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages