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 ?
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.
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.
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>
Related
I have image with white padding in the top and bottom. See attachment please.
When I try to use border-radius to this images I get distorted edges.
How can I fix this issue in this case? Because I can not replace image on image without white space.
Snippet
If you know the exact height of the padding inside the images, you could create a workarund that uses the image as a background-image on a container. If you size the container exactly like the "real" image size, and position the background-image correctly, you can then apply the border-radius on that container.
.imagecontainer {
background: url(http://nafantano.com/image/cache/catalog/toys/2017/img_8356____by_nafantano-d9aagdh-399x287.jpg) no-repeat 0 -10px;
border-radius: 20px;
display: inline-block;
height: 230px;
width: 300px;
}
https://jsfiddle.net/tc29nedy/5/
Here is my proposal:
<div class="image hovereffect">
<a href="#">
<img class="img-responsive" src="https://theimgurl" id="featured_55">
</a></div>
Use in css the overflow:hidden for the image class and the image img need a margin-top:-10.
.image {
width:300px;
height: 250px;
border-radius:20px;
overflow:hidden;
}
.image img {
margin-top:-10px;
}
You Can TRY
img {
border-radius: 20px;
}
<img src="http://wallpapercave.com/wp/206q0ew.jpg" style="height:250px;">
For some reason, my website does not want to display the background-image which I have set on my div.
I want to have a featured image that display's across the whole page (kind of like on Microsoft's homepage). However, the image doesn't want to show.
I have tried disabling AdBlock and any other extensions with no avail, I have also tried to look on forums to see if I could find anything (which I haven't).
The following is my HTML:
<body>
<div class="container">
<div class="content">
<div class="featured-img-display imgdisplay" data-lazyload="undefined" data-bgfit="cover" data-bgposition="right center" data-bgrepeat="no-repeat" data-lazydone="undefined" src="/data/img/game_data/19a017f91q.jpg" data-src="/data/img/game_data/19a017f91q.jpg">
</div>
</div>
</div>
</body>
And my 'relevant' CSS:
.container {
left:15%;
width:70%;
margin:0px auto;
}
.content {
background-color: #FFF;
border: 1px solid #F2F2F2;
padding-bottom:100px;
padding:40px;
width:90%;
margin:0px auto;
padding-top:100px;
}
.featured-img-display{
width: 100%;
height: 100%;
opacity: 1;
background-image: url('/data/img/game_data/19a017f91q.jpg');
background-size: cover;
background-repeat: no-repeat;
}
Thanks
Fiddle: https://jsfiddle.net/ses3j1Ld/
Currently, the featured-img-display element has no height. That's why you don't see the background image.
height: 100%; will only set full screen height on an element if its parent actually has 100% screen height as well.
To do this using % units you'll need to make sure that all elements up to the featured-img-display element have 100% height,.. something like:
html,body,.container,.content {
height: 100%
}
Then your current CSS code will work. Sometimes however the above code isn't so viable.
Using viewport units here: height: 100vh; makes things a lot easier
Note:
If you want the image to span the full screen height (and without scroll-bars), you'll have to adjust your CSS a bit:
1) remove default margin with body { margin:0 }
2) You have set padding and a border on the parent of the element with the background image... you'll probably want to set these properties on the image element itself with box-sizing set to border-box.
Codepen demo
the height of .featured-img is percentage value for make it work the parent's height must be determined and the only exception is the root element html, which can be a percentage height.
body, html{
height: 100%;
width: 100%;
}
.container {
left:15%;
width:70%;
height: 100%;
margin:0px auto;
}
.content {
background-color: #FFF;
border: 1px solid #F2F2F2;
padding-bottom:100px;
padding:40px;
width:90%;
height: 100%;
margin:0px auto;
padding-top:100px;
}
.featured-img-display{
width: 100%;
height: 100%;
opacity: 1;
background-image: url('http://i.imgur.com/IMiabf0.jpg');
background-size: cover;
background-repeat: no-repeat;
}
<body>
<div class="container">
<div class="content">
<div class="featured-img-display imgdisplay" data-lazyload="undefined" data-bgfit="cover" data-bgposition="right center" data-bgrepeat="no-repeat" data-lazydone="undefined" src="/data/img/game_data/19a017f91q.jpg" data-src="/data/img/game_data/19a017f91q.jpg">
</div>
</div>
</div>
</body>
Instead of div, can you try with img tag as well. I think that might work
Well, all your divs .container, .content, and .featured-img-display don't have a height. height:100% means having height equal to the element's parent but since none of those elements have any height, height: 100% equates to 0px. Same goes for width.
So, one of the divs will have to have a specific height and width. Here's an example.:
This is my code:
<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
<img src"myimg.png"/>
</div>
I want to crop from left and right my image in this div.
But it only crop a part from right.
I want to do something like this (which works in IE 8-10 too).
Thanks in advance!!!
You can keep your HTML as is and make the image's position:relative and the position left:-50% (or margin-left:-50%).
Your HTML:
<div id="cropper">
<img src="http://lorempixel.com/output/sports-q-c-900-600-3.jpg" />
</div>
Your CSS:
#cropper{
width:450px;
height:600px;
overflow:hidden;
}
img{
position:relative;
left:-50%;
}
Here's the demo.
EDIT
To accurately center the image in any div size, you need to position the image in pixels and not in percentage unless the container is exactly half the size of the image. So the final CSS of an image size of 900x600 pixels would be:
img{
position:relative;
left:-450px;
}
You can use clip-path to crop pretty much anything:
.crop-left {
clip-path: inset(0 50px 0 0);
}
.crop-right {
clip-path: inset(0 0 0 50px);
}
.crop-top {
clip-path: inset(0 0 50px 0);
}
.crop-bottom {
clip-path: inset(50px 0 0 0);
}
Why not set the image as background?
HTML
<div id="mydiv" style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
</div>
CSS
#mydiv
{
background-image:url('myimg.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
Here this is s small trick to crop a div...
put the div you want to crop inside another div..
set overflow of outer div to hidden
them simply shift the inner div as you want to crop it using margin_left,right,top,down attributes...
<div style="overflow:hidden;">
<div id="myDiv" style="overflow:hidden;margin-top:-30px"></div>
</div>
Simple :)
What you want is not possible with an <img>. However, you can use the "CSS Sprite" trick:
<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;
background: url(myimg.png) no-repeat center center">
</div>
No jsFiddle, sorry, as I don't have your image.
here's a solution proposed a few times here for similar questions:http://codepen.io/gcyrillus/pen/BdtEj
/* see demo : http://codepen.io/gcyrillus/pen/BdtEj , to play with and understand */
parent {
line-height:equals to height;
text-align:center;
}
parent img {
vertical-align:middle;
margin:-100%;
}
It's about clipping your image.You have that old and usefull CSS rule : clip:rect();
http://www.w3.org/wiki/CSS/Properties/clip wich has this purpose.
Or using a trick (cause you enjoy to play with CSS) to reduce virtually image zize to null, so it centers horizontally and vertically no matters it's real size.
http://codepen.io/gcyrillus/pen/BdtEj
You can just set a background image to the div
HTML
<div class='myDiv'></div>
CSS
.myDiv {
width: 75px;
height: 75px;
background: url('myimg.jpg') no-repeat -123px 0px;
}
Adjust -123px to the correct left offset from where cropping should start.
EDIT: jsFiddle
There are more possible solutions for this:
Using a container div and applying negative positioning on the image. Or you can set the image as the background of div which makes you able to use background-position for example.
Below is the DEMO link as per your requirement, which work in ie.
<div class="mainDiv">
<div class="green"></div>
</div>
.mainDiv {
margin:0 auto;
border:1px solid #000;
width:700px;
height:500px;
text-align:center;
}
.mainDiv .green {
width:100px;
height:100px;
background-color:red;
display:inline-block;
}
It's possible with image and any element, css positioning, provided that you know the width of the image.
Add position:relative to the div, and position:absolute on the image together with half the width of the image in a left:-204px;top:0;.
Example fiddle: http://jsfiddle.net/ctXcJ/2/
try margin: 0 auto; instead of text-align.
The following code ususally works well for me when I am using .gif or jpg images..
#contentBox1{ position:relative; width:980px; background:url(../images/bg-middle.png) repeat-y; min-height:80px; }
#contentBox2{ position:relative; width:980px; background:url(../images/bg-top.png) no-repeat top; }
#contentBox3{ position:relative; width:980px; background:url(../images/bg-bottom.png) no-repeat bottom; min-height:500px; }
<div id="contentBox1"> <div id="contentBox2"> <div id="contentBox3"> Content Text Goes Here. </div> </div> </div>
But as you can see I use .png because everything needs transparency to see through to the background. So the "middle.png" background shows up behind the header and footer. I need all the room I can in this div at the top and bottom but can't seem how to figure out the best css code to make this work.
Example
You could try this:
Combine the top + middle images into one image and make the middle section really long.
Place that as the background image of a div.
Inside the above div place a second div with the bottom image aligned to the bottom of this div as a background image. Make the bottom image not transparent but have it filled around the cloud by the yellow bg colour.
try this, re-order your div's as follows
<body>
<div id="contentBox2"></div>
<div id="contentBox1">
<div id="content">Content Goes Here</div>
</div>
<div id="contentBox3"></div>
</body>
Then change the CSS as follows, this is a more logical layout and should be easier to follow, the internal #content div will add padding to the text so it appears inside the image. The min-height of the top and bottom divs are set to the height of the images so you don't have any background color seeping through. You can change the min-height of #ContentBox1 to your desired size.
#contentBox2 {
background: url("images/bg-top.png") no-repeat scroll center top transparent;
margin: 0 auto;
min-height: 304px;
position: relative;
width: 980px;
}
#contentBox1 {
background: url("images/bg-middle.png") repeat-y scroll 0 0 transparent;
margin: 0 auto;
min-height: 560px;
position: relative;
width: 980px;
}
#contentBox3 {
background: url("images/bg-bottom.png") no-repeat scroll center bottom transparent;
margin: 0 auto;
min-height: 240px;
position: relative;
width: 980px;
}
#content {
padding: 40px;
}
Hope this helps
I used a little bit of Billys suggestiong but changed it up a bit. The restrictions are it has a max-height.
#contentBox1{ position:relative; width:980px; background:url(images/bg-top.png) repeat-y top left; min-height:300px; margin:0 auto; }
#contentBox3{ position:absolute; bottom:-218px; width:980px; height:218px; background:url(images/bg-bottom.png) no-repeat left bottom; } /* bg image is 240px; */
#content{ width:900px; position:relative; margin:0 auto; padding-top:85px;}
<div id="contentBox1"> <div id="content">Content text goes here. </div> <div id="contentBox3"> </div> </div>
You can see http://webdesignmb.com/test/
here is the layout im trying to achieve.
http://i.imgur.com/kA0yw.jpg
I have a repeating swatch of the background that is set to the html's background so the grey paper tecture repeats beyond the design.
Then i Have the bamboo illustration that goes on top of that set to the background of the body.
I cant seem to get the bamboo to not be cut off to where the content ends.
What is the best possible way to do this?
the white content div in the center needs to extend down to at least the bottom of the page, and i cant for the life of me figure this out it seems like it has to be the simplest thing to do
this is what it looks like now- http://i.imgur.com/55dPe.png
here is the code
<html>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
</div>
</body>
</html>
and the css
html{
background:url(images/background_swatch.png) top center;
}
body{
margin:0 auto;
background:url(images/background.png) top center no-repeat;
}
div#wrapper{
margin:0 auto;
width:800px;
background-color:#FFF;
border-left:5px solid black;
border-right:5px solid black;
}
#header{
margin:0 auto;
position:relative;
top:25px;
background:url(images/navigation_banner.png) no-repeat;
width:850px;
height:150px;
left: -25px;
}
I'm confused as to what you want to change...Could you post your code?
or which do you want to extend, because it seems to me like the bamboo picture is all the way down, if you want it further, maybe stretch it further (height:120%;) ??
You need to set height 100% on html container, min-height on body container.
http://jsfiddle.net/5FwGZ/
html {
height: 100%;
background-image: url('http://imjustcreative.com/wp-content/uploads/ImJustCreative-2010-08-23-at-06.06.01.jpg');
}
body {
min-height: 100%;
width: 100%;
background-image: url('http://www.landscapecreationsfl.com/flower-dahlia-pink-transparent-background-350_1_.gif')
}
div#content {
height: 400px;
width: 600px;
margin: 0 auto;
text-align: center;
background: white;
}