Let’s add a background image to a Jumbotron (or any other element).
Start by selecting File -> New page, select Blank Bootstrap page and drag Jumbotron from LIB to the page:
To add a background image we have to define a CSS class. There are two ways to do that: redefine existing jumbotron class (originally defined by Bootstrap) or create a new class that we will then assign to the Jumbotron element.
If we redefine the jumbotron class then all jumbotrons will get the same background. Creating a new class gives us more control, so let’s do that:
- Select the Jumbotron element on the page and go to CSS tab.
- Press + Add rule.
- Enter the class selector – in CSS, class selectors have a dot (.) in front of the class name. Let’s call it .poster.
- Press Create & Assign. This will create the new class rule and assign the class to the selected element. If you press Create, class rule will be created, but the class will not be automatically assigned to the currently selected element.
When we do this, Pinegrow takes us to Edit CSS rule view for our newly created .poster CSS rule:
Scroll down to Background section. Let’s first play with background color:
Now, let’s choose an image for our background. In the same edit CSS view, click on the File selector in Image property:
This will open a file selection dialog. Choose one of your images (GIF, JPG or PNG) from your computer and press Ok.
Jumbotron now has a background image. Notice that Pinegrow created a relative URL for the image.
URL looks quite messy, right? And when we save the page to the new location…
…this breaks the URL because at the moment Pinegrow doesn’t know how to update asset links if the page location changes:
So, the best way to do things is to first save the page (if you start by File -> New page…), copy asset files to the page folder (or subfolder, for example images) and then add them to CSS rules or to Image elements.
Once we did that (saved the page and copied images into the page folder), let’s select an image again:
Sselect the image, but this time from the location in the page folder:
Looks much better!
Now, experiment with different Background Size and Position values. cover works best for size, as it will stretch the image to cover the whole element. Use position to select which part of the image is shown:
Let’s also set the text color so that it will match our background:
Go back to the list of CSS rules:
In CSS rules list you can also quickly assign or remove the class from the currently selected element:
So much for now! Have fun and don’t forget to save your masterpiece!
Last updated on October 26, 2015 at 4:24 pm