CODEWITHSUNDEEP
csstwitter-bootstrapsvgmask
8lou
8lou

Reputation: 65

Bootstrap with Responsive CSS Mask

I can't use width and height 100% to my class svgmask because bootstrap doesn't accept this value, so I can't get a responsive mask on my website. How can I fix it?

jsfiddle - On example, svgmask width is set to 500px and height to 300px.

Upvotes: 0

Views: 1630

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9426

Is this what you are looking for?

give 

div#svgmask-img {
    background-size: contain;
}


div.svgmask {
   	mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png);
   	-webkit-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
    -o-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
    -ms-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
		overflow: hidden;
		position: relative;
		margin: 8px;
		height: 300px;
		width: 500px;
}

div#svgmask-img {
   	background: url(http://27.media.tumblr.com/tumblr_lgcrktvVwG1qboti3o1_500.jpg) no-repeat;
		background-size: contain;
		position: absolute;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
}
<div class="svgmask"> <div id="svgmask-img"></div> </div>

EDIT For getting 100% height, you have to set 100% height for the body and html tags.

body, html{
  height: 100%;
}

div.svgmask {
   	mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png);
   	-webkit-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
    -o-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
    -ms-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) bottom left / contain no-repeat;
		overflow: hidden;
		position: relative;
		margin: 8px;
		height: 100%;
		width: 100%;;
}

div#svgmask-img {
   	background: url(http://27.media.tumblr.com/tumblr_lgcrktvVwG1qboti3o1_500.jpg) no-repeat;
		background-size: 100%;
		position: absolute;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
}
<div class="svgmask"> <div id="svgmask-img"></div> </div>

Upvotes: 1

Related Questions