US-1234
US-1234

Reputation: 1529

Remove White space around image - CSS

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>

enter image description here

How to remove white space around images using CSS ?

Upvotes: 3

Views: 20181

Answers (3)

xxCodexx
xxCodexx

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

Mohamed Mohaideen AH
Mohamed Mohaideen AH

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

Aby Sheffer
Aby Sheffer

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

Related Questions