删除图像周围的空白-CSS

Question

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 ?

Answer 1

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.

Answer 2

You can try something like this

 .main{ text-align:center; background:url('https://i.stack.imgur.com/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.

Answer 3

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.stack.imgur.com/hQPzy.png'); height: 200px; width: 200px; background-size: 130% 150%; border: 1px solid black; background-position: 42% 15%; } 

 <div class="back"></div>