HI All,
Trying to create a website as I am new to Pinegrow. Been a heavy user of Expresion web since its inception.
I cant seem to get a background image to work on this page.
From what I have read it may be a possible bug? But instructions are not clear enough to understand the workaround.
Any help would be appreciated… I simple want to have an image as my background on this single page.
Thanks
Ratfink
I found no bug in this feature, but that doesn’t mean you haven’t. First, a few questions…
Are you using one of the frameworks (like Bootstrap) or just plain HTML & CSS?
How have you created your page? Is it an individual HTML page, or did you make a folder and open it as a project. That should be the first thing you do.
Make a new page in whatever fashion you like, then create a new folder to save your project (call it whatever the name of your website is), and save the page there. This will create subfolders and copy your assets to them. You should also create a subfolder in your projects folder called “images”, as a place to store all your website’s image files.
Now close your page and reopen it as a project by selecting open project icon in Pinegrow, then navigate to the folder you created, and click on it. Your site will now load as a Pinegrow project, and you should see the HTML file in the root folder, along with your asset(s) subfolders, the images subfolder, and a file called pinegrow.json.
Then click on your HTML page (probably index.html unless you named it something else) and it should open and load any attached stylesheets (like bootstrap.css if you used the Bootstrap framework.)
Now, if you look in the tree view, you want to select the “body” element in the tree, then go to the Visual Editor Panel, select the background icon at the top of the panel, or just scroll down until you get to the background attributes. From here, you should see options for Bckgr., Color and Image. You can click on image and navigate to whereven the image you want to use for your background is saved on your computer, and then click on it to load.
Pinegrow will then warn you that the image does not exist locally, and offer to copy it to your project folder. You should definitely do this, as you will need the image to exist as an asset in the project when you’re ready to upload your site. This is why you created the images subfolder earlier. Save the image in the images subfolder, and you should now see it appear as a background on your page.
From here, you can select how you want the image to display in the site. For example, if you want it to be fixed, and have the site scroll on top of it, you’d select “Fixed” from the Attach dropdown menu. If you want it to repeat and scroll with the site, you’d select those options. If you want the image to resize as the page size changes, you’d select “Cover” from the Size dropdown menu. Just play around and learn what each option does.
Hope this gets you started.
@Printninja nice write up, I don’t tend to use this option when creating background images (hand code instead) I will next time the opportunity comes up.
I hand code it as well only because I’m so used to doing it that way. Basically, I do thing whichever way is fastest for me.