Is there a simple way to place text on an image? I am trying to place a large image at the top of the index page and place a large heading onto that image. I am fairly new to BSS and am clueless how to do this. I have played with the hero images but can’t seem to get an image onto the background. Any help would be greatly appreciated. Thanks
The simplest way is to make the image the background of the container that holds your text components. For example, create a new website project.
-
Go to the Studio panel > Hero Sections and drag the Hero Overlay component on to your page. You should see something like this…
-
Go to the Overview panel, right click the Section Hero Overlay and from the menu choose “expand all”
- In the Overview panel, left click on the first Div component and you’ll see this…
The background image behind the text is a placeholder image. You’ll note that it’s now highlighted in blue. If you then go to the Styles panel and hover your mouse over the
"https://cdn.bootstrapstudio.io/placeholders/1400x800.png" you’ll see the following…
You can click on the "https://cdn.bootstrapstudio.io/placeholders/1400x800.png" and the “Choose an image” dialogue box will open.
Then you can select your own image. For this example, I went to Pexels.com and found an image I liked, chose 1400 width as the size and downloaded it to my desktop. Then I clicked the URL of the placeholder image, imported my new image, and here’s the result…
This is a very simple example. There are many variables when you use background images. You can control how the size changes, whether the image repeats, where it is located within the containing element, etc.
To get the most out of Bootstrap Studio, it’s worthwhile to spend some time learning about Cascading Style Sheets (CSS). This is the code you see in the styles panel.
If you are building a website and you want to be able to customize it beyond the basic options available through the Appearance panel and Options panel, then learning CSS and Bootstrap’s utility classes is fairly important. You don’t HAVE to learn CSS, but it goes a long way towards understanding how a website looks, how elements are positioned, how they behaves at different screen sizes, and how to make your site look exactly how you want.
I would recommend you watch the videos on Bootstrap Studio’s YouTube channel, and even try building one of the sites as you follow along with the video. Some of the videos are old, and they show sites being built in older version of the software that may have significant differences from the latest version, but the fundamentals are the same. Watching the videos and building a site along with one was how I quickly became comfortable using the program (although I already was proficient in CSS at that time.) The program’s docs are okay, but they don’t really cover everything, and they don’t really explain how to build a website.
2 Likes
Many thanks printninja for such a detailed and helpful response. It may take me a while to experiment with what you have shown here. I had been hesitant to use the older videos due to the version differences but you are likely correct that the basics are the same. I know basic html but haven’t really made much study of CSS. Your suggestion is likely a good one to educate myself with the CSS. It seems quite useful to get the exact results you seek. Thanks for your generous help with this!
1 Like