Current websites frequently use background images, particularly on the home page to get attention. But I don’t see any Bootstrap component for background images. In my Udemy course on Bootstrap, the teacher uses custom CSS to create a background image. I thought this is just the kind of complexity that Bootstrap is designed to eliminate, so only one HTML file can define a whole website or other app. Will a Bootstrap-compatible background image component be added soon?
appearance pane
background
button - add Image
kuligaposten, Sorry, I have no idea what you are trying to say. Please write in clear English if possible, thanks.
He’s directing you to the location of the places to change those settings:
Appearance pane (top right corner you have tabs for specific editing areas)
Background section
Button (within background section) … Add Image
That do it for you? I think he was assuming you had done the tutorials and knew how to use the app already. You really should do that so you have an idea what is where in the app. That will help you immensely in knowing what people are saying in here too lol. The videos are a bit old, but the basics are there, and there are lots of tutorial sections in text that will help as well. Best way to first start learning how to use an app before trying to actually do something in it. I had assumed at first that you had done that too as it’s not the first time you’ve asked questions here, but the tutorials should help you learn where things are in the app better.
1 Like
Thank you jo1, that was helpful. Unfortunately, the Background setting does what is frequently done in BSS: it uses the Style HTML attribute to specify the background file. I was hoping, as I tried to make clear in my question, that BSS could generate Bootstrap classes to include a background image. Perhaps this is one area where BSS provides a solution that is not provided by the Bootstrap classes. Thanks again for making the previous answer clear.
Not sure if you’re seeing the same things I see when I look at adding a background image.
-
Click Appearance (if it’s not already)
-
Click the location in the Overview tree that you want the background to be added. I just clicked the body and that will add it to the body of the entire site, you can do the same to any container/row/col.
-
In the dropdown choose the location you want your new CSS to go to, I typically create a custom.css file so I always know that’s mine since so many components and apps create style.css or styles.css and cause conflicts.
-
Now anything you change anywhere in the site will go to your custom css file until you change it again in the next session.
-
Scroll down the Appearance tab until you see the Background section
-
If you don’t already have one set up, you should see Add Image and Add Gradient buttons as the first parts of that section.
-
Click the Add Image and then in the line below the buttons for the URL, click the + sign which will open a new window for you to choose the location of your image to import. Once you’ve chosen the images location it will show up in the window, select it then click the Import Image button in the lower right corner of the window.
-
From there choose the settings you want below for position and so on. That’s all there is to adding a background image.
Not sure what else to say on it. Anything using a background image is added to the CSS rather than the HTML directly.
Hope that helps. 
P.S. If you don’t see it in the app don’t panic, sometimes background images don’t view correctly in the app preview, but if you open the browser preview you should see it correctly for pretty much all but phone sizes. You may want to be sure any background images are removed, using media queries, for phone and even tablet sizes as they tend to be kind of quirky at best.
P.S.S. I’ve never done this before this way, I’ve always just coded it into the CSS window, so if I can do it in order to show you how, anyone can LOL 
when you have added your background-image click on styles tab
element-style click on three dots on the right side extract it to desired css-file
From the appearance panel, where is says “Style Attribute”… that is a drop-down menu.
So if you have the Body component highlighted and want to add a background image to the .body class, (as opposed to an inline style,) just click the dropdown and select Create CSS Block before your choose your background image. Viola, when you look at your custom style.css file you will have a new body class with your background. Another option is to first copy the standard Bootstrap .body class to your custom css file, and then it will be available in the drop-down menu when you go to place your background image.
The only other way I know of (which I personally find just as fast) is to manually type out the class in the custom css file directly in the styles panel.
BSS streamlines many aspects of the website building process with its visual UI tools, but hand-writing code is still sometimes the simplest means to an end (particularly when you are someone who’s accustomed to writing CSS.)
I think you are all misunderstanding me. Thank you all for trying to help, but I’m not so much trying to learn BSS as point out a problem with Bootstrap itself. Bootstrap has classes for most website components, but it seems to be missing a Background Image component. Bootstrap allows an entire website to be written in HTML using classes, without ANY CSS! BSS doesn’t know this, and uses the CSS Style attribute or a separate CSS file. Since I already explained my point in detail and I am just misunderstood here, I will be quiet now. My best wishes to all.
You could use a sass mixin to add a background image using a class…
$path--rel : "";
@mixin background-image($img,
$background-position) {
background-image: url('#{$path--rel}/#{$img}');
background-position: $background-position;
background-size: cover;
background-repeat: no-repeat;
}
.bg-img {
@include background-image("Splash1920.jpg", center);
}
It still a worthwhile discussion because other people read these posts and learn from them.
Bootstrap allows an entire website to be written in HTML using classes, without ANY CSS!
While technically correct, Bootstrap is still only a Framework. Frameworks are a starting point. They don’t replace CSS, they provide a foundation and shortcuts (helper classes.) You can build an entire website using nothing but Bootstrap classes, but to anyone who sees it, it’s going to be instantly recognizable as a “Bootstrap website.” If everyone in web design did this, we’d have (and in fact we DO have) millions of websites out there that all look remarkably similar (“Bootstrappy”)
Fortunately we now have customization options available through SASS or websites like https://www.themestr.app/theme