How do you add a background image to anything in Bootstrap Studio?

Bootstrap Studio Help
1

I guess the title pretty much sums it up. I am trying to add some background images to some rows, columns and containers, but I see no way to do this. Can someone tell me how this can be done please? Thanks for any assistance you can provide on this.

Jo

2

Hi @jo,

You give an element in HTML a background image by using CSS. Since I don't know your level of skill with HTML, CSS and the BSS ap I'll try not to be vague and hopefully easy to follow.

First you would target the element by giving it a class name of something relevant to the area you're manipulating. For example using the BSS Hero Nature.

They take the jumbotron component and add a background image to it using a relevant class name of hero-nature then in their CSS they apply a background image to the class selectors background property.

The HTML

<div class="jumbotron hero-nature">
    < h1 class="hero-title">Hero Nature< /h1>
    < p>....< /p>
    < p>< a href="#">Learn more< /a>< /p>
</div>

The CSS

div.jumbotron.hero-nature{
    color:#fff;
    text-align:center;
    background:url('hero-background-nature.jpg');
    background-size:cover;
    background-position:center;
    padding-top:100px;
    padding-bottom:100px;
}

To do something similar you would click on the HTML pane below the Visual Layout pane. This will pop it up into view. Select the element you want to add a class to then click on the Attribute pane below the HTML pane. In the Attribute pane click in the box next to Class name and give it a name and click on the Apply button below.

Now you will also need to add an image to your project. On the right is the Design pane. Right click on Images and select Import Images from the context menu popup. You will need to locate the image you want to use when you do you can double click it to import or select it and click ok.

Now you will need to add some CSS to get the image to display.

In the Design pane, click on Styles to expand it's list and then double click on style.css.

You should be on the CSS pane with the styles.css tab highlighted. If the box below it is empty then just click in it to start creating your CSS selector and it's properties and values. If the box is not empty then either scroll down and click in the empty space below any other CSS calls or click in the space in between any of the CSS calls.

If you have your class you want to manipulate selected in the HTML pane on the left then when you create your CSS call for that class it will already be named appropriately. Click after the "{" then type in the word "background" then hit the Tab key and type in "url('bgimage.jp')" replace the image named "bgimage.jpg" with the image you imported in the Design pane.

So it should kind of look like this somewhat.

.mybackground {
    background:url('bgimage.jpg');
}

Here is a good site to learn more about HTML/CSS etc.. specifically for backgrounds. http://www.w3schools.com/cssref/css3_pr_background.asp

I know that this may see pretty basic but it should help anyone with this request.

Saj