help with image resizing

hey,
i am trying to build a simple layout with a background image, which will strech to fit my browser window.

i have a vertical layout that contains an image, and an horizontal layout. inside the horizontal layout i have a label.
i want my label to resize, and my image to fit to screen.

tried many css properties, but can’t get it to work:

UI:

public landingView() {

    setSizeFull();
    Responsive.makeResponsive(this);
    Image image = new Image(null,new ThemeResource("test2.jpg"));
    addComponent(image);
    Responsive.makeResponsive(image);
    HorizontalLayout bottom=new HorizontalLayout();
    Label bottom_text = new Label("<p>Ringagement was founded out of deep" + 
             "belief that men has no clue on how to pick the right engagement ring that " + 
            " you'll probably have to wear for the rest of your life- we're here for this reason!</p>"
            + "<p>Our mission is to make sure that the most important moments of your life will become the " 
            + "perfect ones.</p>"
             + "<p>In order for that to happen, your engagement ring has to be perfect as well</p>" 
             + "<p> just the way you want it to be!</p>");
    bottom_text.setContentMode(ContentMode.HTML);
    bottom.addComponent(bottom_text);
    bottom_text.addStyleName("bottom_text");
    Responsive.makeResponsive(bottom_text);
    bottom_text.setSizeUndefined();
    bottom.addStyleName("bottom");

and CSS:

.image{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

any ideas?

thanks!