Akash Kumar Akash Kumar - 4 months ago 19
CSS Question

Use image as theme for a page in mvc

Currently i am running one mvc application where for one page i have to use one image as theme. I tried googling many things but non of theme worked for me.

I got one example from internet where one image used as theme like below:



.intro {
max-width:100%;
height:auto;
position:relative;
background: url(~/Content/Images/1.jpg) no-repeat bottom-center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

<body>
<section id="intro" class="intro img-fluid img-responsive">
</section>
</body>





This was working fine with html page but the same i used in my one of the view that is not working.

Need someone help.

Answer

Try using background-image instead. Also check that you have access to the image and add some content to the html for the background to be visible.

.intro {
    max-width: 100%;
    height: auto;
    position: relative;
    background-image: url(http://www.w3schools.com/cssref/paper.gif);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

In your Html body

<section id="intro" class="intro img-fluid img-responsive">
    <article>
        <div>Article1</div>
    </article>
    <article>
        <div>Article2</div>
    </article>
    <article>
        <div>Article3</div>
    </article>
</section>
Comments