Background image in CSS

Bug Reports
1

[4.1.2] Background image is not visible in application or preview if the image is declared in CSS. However, the image is visible when I export project and click at index.html or I upload files to my Apache server.

HTML

header class="masthead"

CSS

.masthead { display:table; width:100%; height:auto; padding:200px 0; text-align:center; color:white; background:url("../img/intro-bg.jpg") no-repeat bottom center scroll; background-color:black; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; }

2

In BSS, your CSS background image refrence should be like:

background:url(“intro-bg.jpg”) no-repeat bottom center scroll;

Unless you had created a folder in the app named "img" then you would have it referenced like:

background:url(“img/intro-bg.jpg”) no-repeat bottom center scroll;

In the Overview pane (bottom/left) select the Element that has your BG image, then in the Options pane (top/right) select the Painters palette Icon. In the Style Attributes dropdown, select the CSS block that has your BG image so that you update it. Scroll down to BG Image click the "+" icon and select your image if you've already imported, if not then you'll need to import it.

Saj

3

Thanks.

It works now, I changed to url(“intro-bg.jpg”).

I though the content of CSS file I see in CSS editor is exactly the same as in exported file. In fact, there is a kind of path translation - I put background:url(“intro-bg.jpg”) in the CSS edit widow and get url("../../assets/img/intro-bg.jpg") in the exported CSS file.

4

Yes it's different when you export. The Devs consolidate all the Design pane elements into an assets folder when the JS/CSS/Images all reside in. They also rewrite the CSS and HTML to account for that change with the export.

And, Glad I could help :)

Saj