Issue
I have a pfsense captive portal i am working on that needs multiple graphics to display side by side and be responsive to the device screen size. This works well using an input type of image. The pfsense device will not correctly recognize the submission from this however. It needs a type of submit with a value of Continue to work.
I changed to this with using a background image for submit but the background image doesn't scale. It displays full size and gets cut off as the screen gets smaller.
How do i get the background image to resize?
<style>
#content{font-family:'Source Sans Pro',sans-serif;background-color: gray; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; display:table-cell; vertical-align:middle;}
#content{text-align:center} body,html{margin:0; padding:0; width:100%; height:100%; display:table}
.row {display: flex;}
.column {flex: 50%; padding: 50px;}
input {
background-size: contain;
resize: both;
border: 0;
width: 100%;
max-width: 100%;
padding: 0 0 50%;
object-fit: scale-down;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
</style>
....
<body>
<div id="content">
<div class="row">
<div class="column">
<form name="login_form" method="post" action="$PORTAL_ACTION$">
<input name="redirurl" type="hidden" value="https://url">
<input name="accept" type="submit" style="background: url(image1.png) no-repeat;" value="Continue">
<input name="zone" type="hidden" value="$PORTAL_ZONE$">
</form>
</div>
<div class="column">
<form name="login_form" method="post" action="$PORTAL_ACTION$">
<input name="redirurl" type="hidden" value="https://url">
<input name="accept" type="submit" style="background: url(image2.png) no-repeat;" value="Continue">
<input name="zone" type="hidden" value="$PORTAL_ZONE$">
</form>
</div>
</div>
</body>
Solution
background-size: cover will do it.
<input name="accept" type="submit" style="background: url(https://picsum.photos/1500/1500?random=1) no-repeat; background-size: cover;" value="Continue">
#content{font-family:'Source Sans Pro',sans-serif;background-color: gray; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; display:table-cell; vertical-align:middle;}
#content{text-align:center} body,html{margin:0; padding:0; width:100%; height:100%; display:table}
.row {display: flex;}
.column {flex: 50%; padding: 50px;}
input {
background-size: contain;
resize: both;
border: 0;
width: 100%;
max-width: 100%;
padding: 0 0 50%;
object-fit: scale-down;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}<div id="content">
<div class="row">
<div class="column">
<form name="login_form" method="post" action="$PORTAL_ACTION$">
<input name="redirurl" type="hidden" value="https://url">
<input name="accept" type="submit" style="background: url(https://picsum.photos/1500/1500?random=1) no-repeat; background-size: cover;" value="Continue">
<input name="zone" type="hidden" value="$PORTAL_ZONE$">
</form>
</div>
<div class="column">
<form name="login_form" method="post" action="$PORTAL_ACTION$">
<input name="redirurl" type="hidden" value="https://url">
<input name="accept" type="submit" style="background: url(https://picsum.photos/1500/1500?random=2) no-repeat; background-size: cover;" value="Continue">
<input name="zone" type="hidden" value="$PORTAL_ZONE$">
</form>
</div>
</div>Answered By - Md. Rakibul Islam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.