This is a migrated thread and some comments may be shown as answers.

background image on view?

3 Answers 462 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Chad
Top achievements
Rank 1
Chad asked on 21 Mar 2012, 08:57 PM
I have the following view:

<div data-role="view" style="background: green;" id="tabstrip-card" data-init="cardViewInit" data-title="My card" data-layout="mobile-tabstrip">
      content goes here
</div>

I've tried various things to get a background color on my view (actually want a background image), without any luck. I can put a div inside the view div and set it's height/width and apply a background to that, but that seems a bit unnecessary. Is there a way I can get a background on the view itself?

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 22 Mar 2012, 08:18 AM
Hello,

You can style the content element of the view:

<div data-role="view" id="tabstrip-card" data-init="cardViewInit" data-title="My card" data-layout="mobile-tabstrip">
      <div data-role="content" style="background: green;" >
      content goes here
      </div>
</div>


Regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
bally
Top achievements
Rank 1
answered on 18 Sep 2013, 08:25 PM
I am looking at this issue

I currently would like to put an image as a background, however even if I reference an image off the internet it still does not show, however the colour does.  

I have tried to simply use your kendo window mvc demo code but no luck. I have added a Div referenced test to simply add an image 

Do you have any ideas?

Thanks

@(Html.Kendo().Window()
    .Name("window")
    .Title("About Alvar Aalto")
    .Content(@<text>

<div class="test">
        <p>
            Alvar Aalto is one of the greatest names in modern architecture and design.
            Glassblowers at the iittala factory still meticulously handcraft the legendary
            vases that are variations on one theme, fluid organic shapes that let the end user
            ecide the use. Interpretations of the shape in new colors and materials add to the
            growing Alvar Aalto Collection that remains true to his original design.
        </p>

        <p>
            Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland,
            was noted for his humanistic approach to modernism. He studied architecture at the
            Helsinki University of Technology from 1916 to 1921. In 1924 he married architect
            Aino Marsio.
        </p>

        <p>
            Alvar Aalto was one of the first and most influential architects of the Scandinavian
            modern movement, and a member of the Congres Internationaux d'Architecture Moderne.
            Major architectural works include the Finlandia Hall in Helsinki, Finland,
            and the campus of Helsinki University of Technology.
        </p>

        <p>
            Source:
            <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a>
        </p>
    </div>
    </text>)
    .Draggable()
    .Resizable()
    .Width(600)
    .Actions(actions => actions.Pin().Minimize().Maximize().Close())
    .Events(ev => ev.Close("onClose"))
)

<span id="undo" style="display:none" class="k-button">Click here to open the window.</span>

<script>
    function onClose() {
        $("#undo").show();
    }

    $(document).ready(function() {
        $("#undo").bind("click", function() {
                $("#window").data("kendoWindow").open();
                $("#undo").hide();
            });
    });
</script>

<style scoped>
    #example
    {
        min-height:500px;
    }

    #undo {
        text-align: center;
        position: absolute;
        white-space: nowrap;
        padding: 1em;
        cursor: pointer;
    }
   
    .test
    {
background-image:url("http://blog.felho.hu/wp-content/debuggingsuckststingrocks.png");
background-color:#cccccc;
width:200px;
height:200px;
}

</style>
0
bally
Top achievements
Rank 1
answered on 19 Sep 2013, 07:54 AM
I have opened this up as a new query under window forum
Tags
General Discussions
Asked by
Chad
Top achievements
Rank 1
Answers by
Petyo
Telerik team
bally
Top achievements
Rank 1
Share this question
or