Can't see background image

Beginners
1

<!-- Banner --> <Section><div class="banner"> <h1>Los Angeles Poetry </h1> <h2>Learn, Listen and Meet Our Poets</h2> </div></Section>
CSS
.banner { background-image: url('images/LAbanner1200x400.jpg') no-repeat center center/cover;}
jpg is in images folder on the same level as .html file

2

Hi @kat,
You are mixing the background CSS property shorthand with one of the properties it controls. Instead you might want: .banner { background: url('images/LAbanner1200x400.jpg' no-repeat center center/cover;}. Although two additional items -

  1. Are you sure that relative url for the image is correct? Shouldn’t it be pre-fixed with ./ to indicate where the images file is located?
  2. I feel like the background-size value should be just cover not center/cover

Cheers,
Bob

1 Like
3

Finally got it: background-image: url(../images/LAbanner1200x400.jpg);
I removed centers and cover and in Dreamweaver CS6 dragged the image from the finder to link it. Anyway to do that in PG?

One step forward, two back-at least I’m persistent.
Thanks for hanging in there with me.

4

Hi @kat
Pinegrow allows you to drag images to the page to have them added as an <img> element. To add them as a background image it depends a little on the framework you are using. For Bootstrap there is an input boxes under the Properties panel. For Tailwind, there are inputs for background, but those are for solid colors or gradients. Instead, for Tailwind and plain HTML you can add in a background image from the Visual Editor in the Styles panel.

image
image1078×1044 54.2 KB

Just click on the folder to bring up a dialog box.
I think this will help you understand your original problem. You were almost there.

Cheers,
Bob

5

I’m working in html 5 so only have access to html code. PG’s visual editor does not to exist the way it does with Bootstrap and Foundation. No blocks, flexbox or components. Am I missing something?

6

Hi @kat,
Where are you looking? All of that is within the Visual editor located in the Styles panel.

image
image1076×1954 185 KB

Not quite sure what you mean about blocks and components. Do you mean already made components in the Library? These two things - adding background images and adding pre-made blocks of code - are quite different.
Bob

7

I added a bootstrap carousel page where you have element properties. No element properties in html file.
Also can I have mix bootstrap element on an html5 page? How does that work?

Bootstrap
Bootstrap1341×1210 170 KB

HTML5
HTML51468×573 97.4 KB

zHTML_5
zHTML_51450×1164 127 KB

8

Hi @kat,
Bootstrap is just some predefined CSS added to an HTML page, so yes, you can mix them. But, at that point it would make sense to just use Bootstrap. I’m still a little confused what you are looking for. In a non-framework HTML page, most of your styling (including adding background images) will be done in the Style panel. The one with the paintbrush at the top. The exception is if you turn on the Design panel. Then, selected CSS properties (and some variables) are added to the page through that panel. However, you use the added variables, like colors, through the Styles panel.

The Properties panel is used for id, attributes, and class names. Bootstrap (and Tailwind) add a lot of styling through the Properties panel because the styling in those cases is done with pre-existing class names. Basically, the frameworks have already gone into the Styles panel, added a class name, and some rules. For plain HTML you have to do this on your own.

Does this make sense?
Bob

1 Like
9

I found Visual Editor. There is a tiny double arrow at the bottom of the Design panel!

10

Do you mean the Style panel, the one with the paintbrush icon?

11

Sorry, yes the Style panel, Visual Editor>>