CODEWITHSUNDEEP
cssasp.net-mvc-4
Akash Kumar
Akash Kumar

Reputation: 55

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.

Upvotes: 1

Views: 106

Answers (1)

Daniel Manta
Daniel Manta

Reputation: 6683

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>

Upvotes: 1

Related Questions