I'm using an image from Amazon directly on my website, so I can't manually trim it in an image editing program.
Around the image is lots of white space, which is annoying because under this image, there is text. And this makes the gap between the image and the text under it really big (because of said white space at the bottom of the image).
Also, every image contains a different amount of white space, so I can't just set a fixed negative margin-bottom.
I know that mix-blend-mode: multiply; makes the white space transparent, but the gap is still there because the white (now transparent part) still takes up space in the layout.
How do I make the white part go away so other html elements can use that space?
Here's a codepen: https://codepen.io/AlessioG/pen/VweqMEg
You can use the object-fit css property to crop the image.
Set the container div to the cropped size that you want the image to be, and set the image to that same width and height, then use object-fit on the image.
<div id="crop-container">
<img id="crop-image">
</div>
#crop-container {
width:200px;
height:200px;
}
#crop-image {
object-fit:cover;
width:200px;
height:200px;
}
Just use object-fit and then assign a higher number to width than height in proportion. Please dont use element names like div p or id names etc. Since it is pretty hard to overwrite that.
.image {
margin: 0;
object-fit: cover;
width: 250px;
height: 200px;
}
.header-two {
margin: 10px;
font-weight: bold;
display: block;
font-size: 20px;
}
<div class="container">
<img class="image" src="https://i.imgur.com/l2QrzBg.jpg">
<h2 class="header-two">This is a text</h1>
</div>
If you have a CSS you can assign the img a display block.
I've finally found a solution, go to https://www.iloveimg.com/crop-image, upload your image and crop the whitespace, or use imagemagick to crop the whitespace automatically
Related
I don't know if that is a best practice, but I used a background to put some kind of "ok icon" on a div.
My problem is that the background is setted to left and I can't put a padding there on the left side of the icon.
<div id="martu">
<div class="text">
dummy text dummy text dummy text dummy text dummy text
</div>
</div>
CSS
#martu {
background: url('image') no-repeat scroll 0px 8px #FFB9D9;
padding: 5px 5px 5px 10px;
margin-left: 5px;
}
.text { font-size:17px; padding-left:20px;}
Fiddle: http://jsfiddle.net/9up0kmou/
PS. I know that an option would be to put the image direct on that div, but my dilema is that if background images support paddings or margins.
You can use the background-position CSS property to adjust the location of your background image on your div, for example:
#martu {
background-position:20px 20px; // where the values are x & y coordinates from the original default position
}
But no, short of actually adding whitespace to the image in an image editor (not a good idea, it would add unnecessary size to the file), there's no way of adding background-image-padding.
See this JSFiddle, where I have arbitrarily placed the tick icon in the middle of the element using background-position.
It's then a simple matter of adjusting the div padding to make sure the text doesn't overlap the image.
I'd probably do something like this myself. Using the pseudo-elements ::before and ::after is brilliant for placing icons and other things. That way, you get clean code, and you'd need less wrapping elements.
#martu::before {
content: url("http://findicons.com/files/icons/2015/24x24_free_application/24/ok.png");
float: left;
margin-right: 10px;
}
Try this: http://jsfiddle.net/87obhb57/5/
Long story short: you can't have padding on the background image, so the trick here is to set up a background-color on the outer div that gives you the block appearance; setting up a padding on it that will provide the effect you are looking for.
#martu {
padding: 5px;
background-color: #FFB9D9;
}
And finally, setting the background-image of the inner div to what you want plus a padding-left that is big enough as to ensure that the text and the image won't overlap.
#martu div.text {
background-image: url('something');
background-repeat: no-repeat;
padding-left:34px;
}
I'm a complete beginner. I tried my best to search for a solution, but part of the problem is that I don't even know what the technical term is for the thing I'm trying to do.
Essentially I want to have a tiled background repeating everywhere, but then also have a white rectangle that extends from the top of the page to the bottom, occupying roughly 50% of the horizontal screen space. How would I go about accomplishing this?
If I get it correctly, you might just want a repeated background of the page and then absolutely-positioned <div> with white background.
This is pretty basic stuff, I suggest you take a beginner's course in HTML and CSS before going too much further.
body {background: url(tile.png) left top repeat;}
content {background-color: #fff; margin: 0px auto; width: 50%;}
I hope this is what you wanted. It is a tiled, repeating background with a white strip, half the screen space, going down the middle. If you want a tiled background, you don't need to define anything in CSS, and CSS will do it for you, but I'm not sure with the browser compatibility so it might be safer to explicitly define repeat:.
First of all, to those complaining that height: 100% does not work, note that the div with height: 100% is only being the height: 100% of its parent element (the container that encloses the div, in the case of this JSFiddle, the #container). Therefore, if its parent has no content, the div with 100% height will become invisible.
Therefore, the html, body and container must all have height: 100% for the white strip to have 100% height here in this JSFiddle:
JSFiddle
After this you are free to add any content to the white strip, which will probably be your webpage! :D
Note: Here I have defined the strip as width: 50%; but sometimes it may be better to explicitly define the width (width: 1200px;) so that you can avoid problems with the text and divs going haywire when you zoom in, zoom out, etc.
Edit:
Also, since the height of the container increases as you add more content, such as divs, the problem with the white strip not reaching the bottom of the page is that you simply have nothing that fills it up. As you add more content the strip will naturally grow to fill the page. Good luck!
Solution 1
Here's a solution that uses only the background CSS property applied to document body, no extra elements needed. It's documented so you can understand whats going on.
body
{
/*
* This specifies two background images, separated by comma
* First parameter is just a white pixel
* For the second use any background pattern of your choice
*/
background-image:url("http://i.imgur.com/qdx0kzd.png"),
url("http://subtlepatterns.com/patterns/tasky_pattern.png");
/*Center background images, self-explanatory*/
background-position: center;
/*Repeat white background image on Y-axis (vertical) only*/
background-repeat: repeat-y, repeat;
/*Make white background size 50%. Adjust as needed*/
background-size: 50%, auto;
}
You can see an example in this fiddle: http://jsfiddle.net/dV2zZ/6/
Solution 2
This solution applies different backgrounds to different elements: the pattern to the document body, and the white background to a content container. Code is also documented for better understanding.
HTML
<div id="content">Content</div>
CSS
html, body
{
margin: 0;
/* Make document size extend to the bottom of the page */
height: 100%;
}
body
{
/*Patern background. Use a pattern of your choice*/
background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}
#content
{
/*Make container background white*/
background-color: #FFFFFF;
/*Center container*/
margin: 0 auto;
/*Size 50%, adjust as needed*/
width: 50%;
/*Extend to the bottom*/
height: 100%;
}
See an example fiddle here: http://jsfiddle.net/jDRG3/1/
So far I have managed to get the background image to stretch:
XHTML:
<div id="background">
<img src="images/background.jpg" alt="Background" />
</div>
CSS:
#background
{
width: 100%;
height: auto;
position: fixed;
left: 0px;
top: 0px;
}
#background img
{
width: 100%;
height: 100%;
}
This works well, except the image is being displayed from the top when the height of the image exceeds the window height. This means that the top of the image is always displayed but the bottom is cut off. I want to change this so that the image is always displayed from the centre (so that both the top and bottom of the image is cut off and the centre is of the image is displayed).
Here is a good tutorial on creating a perfect full page background image. The same concept can be applied to any ol' div as well.
In general, images that are meant to be background images shouldn't appear in the markup itself. You're mixing presentation with content.
If having the img tag is not an absolute necessity remove it and add the following three lines in your #background class,
background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;
The first line sets your background for the DIV. The second line positions it to centre always. The third line makes sure the background is not repeated which is what I assumed you needed by looking at your HTML structure.
More than happy to suggest further is required.
I need to set the image height everytime I'm using background: url('images/something.jpg')[..];
Fe.
HTML:
<div class="someImage"></div>
CSS:
.someImage {
background: url('images/something.jpg') no-repeat top;
}
The above example should work... but image won't display until I add an image height attribute to the CSS style class:
.someImage {
background: url('images/something.jpg') no-repeat top;
height: 25px;
}
And then my image appear on the website...
Why does it happend?
Because without content, a div has no height, background image or not.
Since your div is empty it has no height..
The image you use is applied as a background, so it does not affect the size.. it just fits whatever space is available at the div.
When you explicitly set the height, you create room for the image to appear..
I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).