I want to make a watermark on a specific page on my project.
I write this in app.css
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("../images/SystemLogo.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: repeat;
opacity: 0.7;
}
and this is my blade
#extends('layouts1.index')
#section('content')
<div class="container">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="watermarked">
<div class="text-center">
<h2 class="text-center"> Appri=oval report </h2>
<form method="post" action="/student/share-approval/{{$approval->uniid}}">
#csrf
<p lang="ar" dir="rtl">
// here is the approval report
</p>
<button type="submit" class="btn btn-primary">share the report </button>
</div>
</div>
</body>
</form>
</div>
#endsection
The problem is not showing the watermark as the image I want .. the result is a default background. How can I show the image as a background?
I think your HTML is formatted incorrectly. The ending form tag and div is below the body tag.
Try this:
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("https://en.opensuse.org/images/4/49/Amarok-logo-small.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: repeat;
opacity: 0.7;
}
<div class="watermarked">
<div class="text-center">
<h2 class="text-center">Stuff here</h2>
<form method="post" action="/#">
<p>
A Form here
</p>
<button type="submit" class="btn btn-primary">Button</button>
</form>
</div>
</div>
Related
I have a 1 page site with full screen scrolling sections.
Each section displays correctly on desktop, but on mobile the 'team' section has a white block top and bottom.
I have made another section for teams ('team2test') for use only on mobile - with HTML to try to make the section full height but the background image is not full screen
Please assist in either why the 'team' section has a gap top and bottom - or why my background image is not full screen in 'team2test'
Code for 'team2Test':
body,
html {
height: 100%;
margin: 0;
}
.team-images-mobile {
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 200px;
height: 200px;
}
.team-section {
background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-section">
<div class="team-images-mobile">
<img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" >
<img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt="">
<img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt="">
</div>
</div>
Link to site
Your problem comes from:
why the 'team' section has a gap top and bottom
That comes from your padding in
.team-images-mobile {
padding: 10px;
}
why my background image is not full screen
This come from the height: 100vh you set in .team-section
body,
html {
height: 100%;
margin: 0;
}
.team-images-mobile {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
.team-section {
background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.team-section img {
width: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-section">
<div class="team-images-mobile">
<img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" >
<img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt="">
<img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt="">
</div>
</div>
The HTML of your "Team section" looks like this now:
<div class="grve-column wpb_column grve-column-1">
<div class="grve-column-wrapper">
<div class="grve-element grve-text">
<h2 style="text-align: center;">Team</h2>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<div class="team-section">
<div class="team-images-mobile">
...
</div>
</div>
</div>
</div>
<div class="grve-empty-space grve-height-1x" style=""></div>
</div>
</div>
If you check in your browser inspector, you'd find that the .grve-element (the heading text "Team") is taking up space before the actual .team-section in your code. And that element has a white background.
So it doesn't really matter with your .team-section style. It's more of an HTML structure issue.
There are 2 direction to solve this:
If you can control the overall HTML, simply move your .team-section background css settings to the .grve-column level; or
Make .grve-element height 0 by setting it as "position: absolute; width: 100%;". You'd need to give .team-images-mobile some padding so they won't overlap with "Team".
I'm doing a project in Laravel in which student's certificate will be generated dynamically using Barryvdh DomPDF. This is my controller function:
public function certPdfGenerate()
{
ini_set('memory_limit', '-1');
$apply_id= input::get('id');
$get_certificate_data = DB::Connection('mysql1')->table('tbl_apply_certificate')->where('apply_id',$apply_id)->first();
$get_certificate_id1 = DB::Connection('mysql1')->table('tbl_apply_certificate')->select('apply_certificate_id')->where('apply_id',$apply_id)->get()->toArray();
foreach ($get_certificate_id1 as $key)
{
$get_certificate_id = $key->apply_certificate_id;
}
$filename = $get_certificate_id.'.pdf';
DB::Connection('mysql1')->table('tbl_apply_certificate')
->where('apply_id', $apply_id)
->update(['apply_pdf' => $filename]);
$data1 = [$get_certificate_data];
$pdf=PDF::loadView('students::htmlcertificate', array('data' =>$data1), [], ['format' => 'A4-L']);
$pdf->setPaper('A4', 'landscape');
$pdf->save(storage_path('certificates/'.$get_certificate_id.'.pdf'));
return $pdf->stream('htmlcertificate.pdf');
}
This is my view page :
<style type="text/css">
#certbackground
{
background-image: url('http://localhost/folder_name/public/cer_template/final-certificate.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
#certbackground1
{
background-image: url('http://localhost/folder_name/public/cer_template/final-certificate-back.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="certbackground">
#foreach ($data as $value)
<h3 style="margin-top: 142px;margin-left: 900px;font-weight: 100;">{{$value->apply_certificate_id}}</h3>
<h3 style="margin-top: 30px;margin-left: 370px;font-weight: 100;">{{$value->apply_name}}</h3>
<img style="height: 180px!important;margin-top: -5px;margin-left: 845px;" src="{{ URL::asset('public/certif_pro_image/'.$value->apply_photo) }}" />
<h3 style="margin-top: -148px;margin-left: 370px;font-weight: 100;">{{$value->apply_course}}</h3>
<h3 style="position:absolute;top:320px!important;margin-top:320px;margin-left: 450px;font-weight: 100;">{{$value->apply_softwares}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 532px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_start_date))}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 670px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_end_date))}}</h3>
<h3 style="position:absolute;top:189px!important;margin-top:189px;margin-left: 550px;font-weight: 100;">Grade {{$value->apply_grade}}</h3>
<h3 style="position:absolute;top:210px!important;margin-top:210px;margin-left: 440px;font-weight: 100;">{{$value->apply_centre}}</h3>
<img style="height: 80px!important;position:absolute;top:196px;margin-top:196px;margin-left: 220px;" src="{{ URL::asset('public/qrcode/'.$value->apply_qrcode) }}" />
<h5 style="position:absolute;top:545px;margin-left: 5px;font-weight: 100;">www.domain.in/certificate/{{$value->apply_certificate_id}}</h5>
#endforeach
</div>
<div style="page-break-after: always;"></div>
<div id="certbackground1">
</div>
</body>
The problem here is that the background image of pdf is too large in pdf. The size of background image is 3507 x 2480 with resolution 300. When I change the image size to 1058 x 748, it fits to pdf but the quality of pdf after print is too low.
How do we adjust the background image of pdf without losing clarity?
Dompdf, up through and including 0.8.4, does not support the background-size declaration (ref issue 463).
Since it looks like you want to contain the entirety of the image within the container you could try using a positioned image with a low z-index inside a relatively-positioned div. You would have to more precisely define the the positioning of the elements, but it should work for your example.
Here's a minimized demo that renders OK in Dompdf 0.8.4:
<div style="position: relative; border: 5px solid black; width: 450px; height: 375px; margin: auto;">
<img src="https://picsum.photos/200/150?grayscale" style="position: absolute; width: 450px; height: 375px; z-index: -1000;" />
<div style="position: absolute; top: 180px; width: 100%; text-align: center; color: white; line-height: 1.5"><span style="background-color: black; padding: .5em;">CONGRATULATIONS</span></div>
</div>
try this
<style type="text/css">
#certbackground
{
background-image: url('');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
#certbackground1
{
padding: 300px 100px 10px 100px;
width:300px;
height:500px;
}
</style>
</head>
<body>
<div id="certbackground">
#foreach ($data as $value)
<h3 style="margin-top: 142px;margin-left: 900px;font-weight: 100;">{{$value->apply_certificate_id}}</h3>
<h3 style="margin-top: 30px;margin-left: 370px;font-weight: 100;">{{$value->apply_name}}</h3>
<img style="height: 180px!important;margin-top: -5px;margin-left: 845px;" src="{{ URL::asset('public/certif_pro_image/'.$value->apply_photo) }}" />
<h3 style="margin-top: -148px;margin-left: 370px;font-weight: 100;">{{$value->apply_course}}</h3>
<h3 style="position:absolute;top:320px!important;margin-top:320px;margin-left: 450px;font-weight: 100;">{{$value->apply_softwares}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 532px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_start_date))}}</h3>
<h3 style="position:absolute;top:175px!important;margin-top:175px;margin-left: 670px;font-weight: 100;">{{date('d-m-Y', strtotime($value->apply_end_date))}}</h3>
<h3 style="position:absolute;top:189px!important;margin-top:189px;margin-left: 550px;font-weight: 100;">Grade {{$value->apply_grade}}</h3>
<h3 style="position:absolute;top:210px!important;margin-top:210px;margin-left: 440px;font-weight: 100;">{{$value->apply_centre}}</h3>
<img style="height: 80px!important;position:absolute;top:196px;margin-top:196px;margin-left: 220px;" src="{{ URL::asset('public/qrcode/'.$value->apply_qrcode) }}" />
<h5 style="position:absolute;top:545px;margin-left: 5px;font-weight: 100;">www.domain.in/certificate/{{$value->apply_certificate_id}}</h5>
#endforeach
</div>
<div style="page-break-after: always;"></div>
<img id="certbackground1" src="http://localhost/folder_name/public/cer_template/final-certificate-back.png" />
</div>
</body>
I have the following view page code (uses codeigniter, bootstrap and PHP). I have given only the code between <body> and </body> as well as the CSS.
<div class="row">
<?php echo $navbar; ?>
</div>
<div class="row">
<div class="jumbotron">
<div class="container">
<div id="tasks" class="col-md-2">
<?php echo $task_set; ?>
</div>
<div id="replaceable" class="col-md-9 col-md-offset-1">
<div id="current_view">
<?php if(isset($current_view)) echo $current_view ;?>
</div>
<div id="pass_chg_form" style="display:none;">
<?php echo $pass_change_form; ?>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<?php echo $footer; ?>
</div>
<script>
CKEDITOR.replace( 'editArea' ); //replace text area with ckeeditor
</script>
My css is:
html,body {
height:100%;
}
.jumbotron {
height:100%;
padding-bottom:0px;
}
#tasks {
margin-top:20px;
padding-top:20px;
}
#replaceable {
padding-top:50px;
padding-bottom:100px
}
The problem is that the jumbotron changes size with changing the amount of content in the page. How do I get a jumbotron that will occupy full height of the containing element no matter how much content is there (i.e Jumbotron height should extend up to navbar and footer no matter what)?
As you mentioned, if the navbar and footer divs are positioned fixed, then you can apply your css like:
<style type="text/css">
.navbar {
color: white;
background: #333;
position: fixed;
top: 0;
right: 0;
bottom: auto;
left: 0;
height: 50px;
}
.footer {
color: white;
background: #333;
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
height: 50px;
}
.jumbotron {
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 0;
margin: 0;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
</style>
EXAMPLE: See JSFiddle here
I want to overlay one image on other using CSS-PHP. Please see the below HTML and CSS snippet and give ur wise suggestions:
The images are present in header part of the division:
j_logo.jpg and MMPHero3.jpg. Of which former should be transparent and in left container while later one should occupy entire header region.
<body>
<div id="container">
<div id="header">
<div id="header-left-container">
<img src="j_logo.jpg" alt="jubilant"/>
</div>
<div id="header-right-container">
<img src="MMPHero3.jpg" alt="drug"/>
</div>
</div>
<div id="content"> Sidebar <p> </p>
<div class="form">
<p>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<p>Enter Drug Name </p>
<input type="text" name="drugName" value="<?php echo (isset($_POST['drugName']) ? $_POST['drugName'] : '') ?>">
<!--To retain search query after click added value="<?php echo (isset($_POST['drugName']) ? $_POST['drugName'] : '') ?>*/-->
<!-- This is commenting style in HTML -->
<p><input type="submit" value="search"></p>
</form>
</div>
</div>
<div id="sidebar"> Body
</div>
<div id="footer"> </div>
</body>
</html>
CSS style-sheet is below:
body {background: #ffffff;}
a {color: #2b2bf6;}
h1 {font-size: 30px;}
#container
{width:1000px;
margin: 0 auto;
background: #dddddd;}
#header
{height: 150px;
margin: 0px;
padding: 0px;
background: #FFFFA3;}
#header-right-container img
{border:none;
width:80%;
height:150px;
float: right;}
#header-left-container
{width:20%;
float: left}
#header-left-container img
{border:none;
width:100%;
height:150px auto;
float: left;}
#sidebar
{
position:relative;
width: 80%;
height: 400px;
float:right;
background: #FFFFA3; ;}
#content
{
position:relative;
width: 20%;
height: 400px;
float: left;
background: #f0e811;;}
#footer
{width: 100%;
height: 70px;
float: left;
background: #000000;
div.result
{
width:88%;
padding:5%;
border:5px solid gray;
margin:5px;
align:center;
}
div.form
{
width:180px;
padding:5%;
border:5px solid gray;
margin:50px;
align:center;
float:right;
}
table, td, th
{
border:0.5px solid blue;
align:center
}
th
{
background-color:#3886FC;
color:white;
}
I believe you should set the style to be something like "position:absolute; left:100px; top:100px; opacity:0.3;" for the image element on top.
Use style="opacity:0.5;" where opacity can be any val from 0.1 to 1
and for overlapping the img onto another you need to specify style="z-index:1;", the higher the z-index more priority will be given to it.
I was trying to make a pop-up with a signup form.
I have this script that works fine, if it's tested with a single page. But If I use it with
my wordpress theme, i placed it in the header.php, the submit button doesn't appear and email textbox is shorter.
Image 1: It's OK. http://sdrv.ms/Ysgfmw
Image 2: Script in the wordpress template. http://sdrv.ms/10a3PpU
Does anyone know why this is happening? Thanks for the help.
Note: I omitted the complete urls.
<html>
<head>
<!--*************** INICIO JAVASCRIPT/CSS EVILPOPUP ************-->
<script type="text/javascript" src="......../evilpopup.js"></script>
<link href="........./classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
display: none;
z-index: 10000;
}
#mc_embed_signup form
{
position: fixed;
top: 10%;
left: 50%;
width: 50%;
margin-left: -25%;
font: normal 100% Helvetica,Arial,sans-serif;
font-size: 14px;
border-radius: 4px;
border: none;
padding: 10px 20px;
background-color: #fff;
color: #000;
text-align: left;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
#mc_embed_signup a.mc_embed_close
{
background: transparent url(http://downloads.mailchimp.com/img/closebox.png) no-repeat;
display: block;
height: 30px;
width: 30px;
text-indent: -999em;
position: absolute;
top: 0px;
right: 0px;
display: none;
}
</style>
<!--*************** FIN JAVASCRIPT/CSS EVILPOPUP ************-->
</head>
<body>
<h1>Hola</h1>
<!-- Begin EVILPOPUP MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action=".................us5.list-manage2.com/subscribe/post?u=3e03d112fc6fe9e6e2d643fa4&id=28e366ba2d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<h2>Gratis $3.000 en tu primera compra</h2>
<div class="indicates-required"><span class="asterisk">*</span> indica requerido</div>
<div class="mc-field-group">
<label for="mce-EMAIL">
Email <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">Nombre </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
Cerrar
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none"></div>
<div class="response" id="mce-success-response" style="display: none"></div>
</div>
<div class="clear">
<input type="submit" value="Suscribeme" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<!--End EVILPOPUP mc_embed_signup-->
</body>
</html>
Change the max-height
#mc_embed_signup form{
position:fixed;
top:10%;
left:50%;
width:50%;
margin-left:-25%;
font:normal 100% Helvetica,Arial,sans-serif;
font-size:14px;
border-radius:4px;
border:none; padding:10px 20px;
background-color:#fff;
color:#000;
text-align:left;
max-height:500px;
overflow-y:auto;
overflow-x:hidden;
}