Reputation: 1529
I'm trying to get image from odoo database to show the image into div background, but my image has white space around it, so i need to remove this white space to apply div background image,
Mycode :
<div t-attf-style="text-align:center;background:url('/web/image/event.event.ticket/#{doc.event_ticket_id.id}/image_medium') no-repeat;
font-size:#{doc.event_ticket_id.font_size}px;width:50%;height:900px;float:left;background-size:500px 900px;display:table;">
<span style="vertical-align:middle;text-align:center;display:table-cell;" t-esc="doc.name"></span>
</div>
How to remove white space around images using CSS ?
Upvotes: 3
Views: 20181
Reputation: 438
I have tried something. Please check it this works fine for you. Here I have tried to set background position and background size. Rest everything can vary like div's width and height.
.back{
background: url('https://i.sstatic.net/hQPzy.png');
height: 200px;
width: 200px;
background-size: 130% 150%;
border: 1px solid black;
background-position: 42% 15%;
}
<div class="back"></div>
Upvotes: 0
Reputation: 2545
You can try something like this
.main{
text-align:center;
background:url('https://i.sstatic.net/hQPzy.png') no-repeat;
font-size:12px;
width:50%;
height:900px;
float:left;
background-size:500px 900px;
display:table;
background-position:-50px -35px;
}
<div class="main">
<span style="vertical-align:middle;text-align:center;display:table-cell;"> Content</span>
</div>
But you have to know size of white space of images. Then you can (-) the position.
Upvotes: 0
Reputation: 513
Maybe try one of these code's:
img{vertical-align:bottom}
or
img { vertical-align: top; }
or
html, body {
margin: 0;
padding: 0;
}
Hope it helped.
Upvotes: 3