cannot use css background-image

[tong123123]

the css is simple

    .backGroundImage1{
        background-image:url(images/line.png');
        background-repeat:repeat-x;
    }



the gwt code is

    public class TestFlowPanelLeft extends FlowPanel {
      
        public void onLoad(){
            Image image1 = new Image();
            image1.setUrl("/images/smallImg1.JPG");
            image1.setSize("100px", "100px");
            image1.setStyleName("floatLeft");      
            FlowPanel flowPanel1 = new FlowPanel();              
            flowPanel1.add(image1);      
            this.add(flowPanel1);      
            HorizontalPanel line1 = new HorizontalPanel();
            line1.addStyleName("backGroundImage1");
            line1.setWidth("200px");
            this.add(line1);
        }

    }


the image1 can be shown, so it proof the path "/images/XX.png" is correct, but the backGroundImage1 cannot be shown, what is the reason?
also, I cannot use ImageBundle and already give up after several try, so I still prefer to use this method.

I try to use background image because I want to do something like
Title1--------------------------------------------------------
   abc
  def

Title2--------------------------------------------------------
  fbg


the "------------" cannot be hardcode use "--" because when the browser window minimize, the line will broken to two line, so I want to use image of line and set its width to 100% of a horizontalpanel, in fact, is this method feasible?

[Xi]

First, the path "images/XX.png" is completely different with "/images/XX.png". So verify your css file's path and his relative path to the folder "images"

Then you should add a " ' " before "images/line.png". Means it should like this : background-image:url('images/line.png'); or don not use " ' ", like this : background-image:url(images/line.png);

Hope helpful...

[Joseph Lust]

tong,

Perhaps that stray unclosed quote is causing an issue?

 .backGroundImage1{
        background-image:url(images/line.png');
        background-repeat:repeat-x;
    } 

Sincerely,

Joe

[Jens]

Or maybe a missing "/" at the beginning of the URL in your CSS (compared to the URL you have used in your java code).

-- J.

[tong123123]

yes, I miss the opening quote '
and I find in css, if using development mode, the url has a "/" at the beginning

 background-image:url('/images/line.png');

but if in production mode, the url has no "/" at the beginning

background-image:url('images/line.png');

the reason is really unknown.

But now I face another strange problem, the code is as follow:

public class TestFlowPanelLeft extends FlowPanel {
   
    public void onLoad(){
        

        HorizontalPanel outer = new HorizontalPanel();
        outer.setSize("100%", "30px");
        outer.setBorderWidth(10);
        HorizontalPanel left1 = new HorizontalPanel();
        left1.add(new Label("see?"));
        outer.add(left1);
        HorizontalPanel left2 = new HorizontalPanel();
        left2.addStyleName("backGroundImage1");
        //left2.setSize("100%", "100%"); cannot show left2!!
        left2.setSize("100%", "10px");
        outer.add(left2);
        this.add(outer);        
    }

}

I try to set left2 height to 100%, and because outer is 30px, so I expect left2 can show correctly, but the result is not!!
I need to explicit set the height of left2.

the css of backGroundImage1 is

.backGroundImage1{
    background-image:url('/images/line.png');
    background-repeat:repeat-x;
}

if I set the height of left2 to 10px, the output is as attached.
why if I set the height of left2 to 100%, left2 cannot be shown?!!

[tong123123]

even worse, if I comment the line

outer.setBorderWidth(10);

then left2 cannot show at all!!

[Thad]

Did you find a solution to this?

I dunno how background images behave with HorizontalPanels. My guess is "not well" given that HorizontalPanels are cell panels--they use HTML tables, not divs--and are not recommended for standards mode (https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#Standards).

That said, I have used background images in AbsolutePanels with both UiBuilder via sprites and plain GWT and CSS.