I have a sprite image which I want to display 128x89px portions across multiple span elements.
In the example I have set the left-clip to 30px to highlight the issue, normally this would be in multiples of 128px. When I set the left clip to 30px, it seems to add 30px left margin. Surely, I don't need to add a negative left margin to correct it?
I am a total newbie to clip as I have never really needed to use it, but now there is. My understanding of it is the same as a square cut out of a piece of paper. Adjusting the clip values will move the piece of paper around therefore changing the viewed image.
Please help.
JSFiddle: http://jsfiddle.net/VgjXr/
CSS:
a {
border: 1px solid #000;
height: 89px;
width: 128px;
display: block;
}
span.image {
background-image: url('http://i1269.photobucket.com/albums/jj591/mark1979smith/splice.jpg');
position: absolute;
display: block;
width: 128px;
height: 89px;
clip: rect(0px,158px,89px,30px);
clear: both;
}
HTML:
<div class="element" id="cheeseOption7">
<div id="optional_46">
<a href="#">
<span class="image"><!-- --></span>
</a>
</div>
</div>
The best explaination I have found on clip is at this site, though I think you do have a generally correct grasp of how it works. What you are not grasping is how that relates to your situation. The clip is occuring on the background image of the span. Your 30px is telling the browser to clip off the image 30px from the left (which is exactly what your fiddle example is doing), but it does not affect the positioning of the background.
Using sprites, one does not normally use clip, but background-position to switch sprite image position in relation to the element it is displayed in. So for your 128px x 89px sprite images, you would start with background-position: 0 0 and move to -189px 0 to shift one image to the right or 0 -89px to shift one image down.
I assume because clip requires position: absolute is why you are using the span, but in fact, because you really should use background-position, it will allow you to eliminate the span all together, and just do the positioning on the background of the a element directly.
Related
I have read that in order to place a background image inside a container block in CSS you can use the background-position property. And you can give labels to it like, top-right-bottom-left-center or css units, mostly percents. And the way it acts is kind of like this:
background-position: 25% 25%, will place the (25%,25%) point of the background image from the top-right edge centered to the (25%,25%) point of the CSS element that contains that background.
So if I would like to center the (50% 50%) point of the background image to the (0,0) point of the container, how can I achieve it?
I know I can do it with pseudo elements (:before, :after) but is there a math calculation that can help me use the background property to make this work? Unfortunately I haven't found a property like a registry point that could allow me to place the point I would like use as my center for the background (background-origin despite the close meaning it is used for something completely different as I discovered).
This question is in regards to any situation but as an example I'm sharing a quick and simple snippet to make it more graphical.
By the way, I'm trying to find the most responsive solution I could. It will be much better if we can assume that I don't know the exact dimensions of the background image so that if I later change that image for another of different size, it stays centered to the same place. This means I prefer % over px.
.foo {
margin: 0 auto;
width: 400px;
height: 300px;
background: url('https://source.unsplash.com/random/200x200') no-repeat, blue
}
<! -- Let's supose I would like to center the (50%, 50%) of that image placeholder at the (0,0) of the container div. -- >
<div class='foo'></div>
Thanks in advance
Since you know the size of the background image (200x200), you can use half the amount of those pixel values as negative values for the background position in order to have the image's center exactly at the upper left corner of its div element. In your case, that would be background-position: -100px -100px;:
.foo {
margin: 0 auto;
width: 400px;
height: 300px;
background: url('https://source.unsplash.com/random/200x200') no-repeat, blue;
background-position: -100px -100px;
}
<! -- Let's supose I would like to center the (50%, 50%) of that image placeholder at the (0,0) of the container div. -- >
<div class='foo'></div>
Second version: If you use a regular image instead of a background-image, you can use transform: translate(-50%, -50%); on it, and overflow: hidden on the parent. So that way using percentage values works.
However, in this case it becomes more complex to add content to the main div if you also need the background color for the rest of the container - You'd have to add an absolutely positioned element for that.
.foo {
margin: 0 auto;
width: 400px;
height: 300px;
background: #bbf;
overflow: hidden;
position: relative;
}
.foo>img {
transform: translate(-50%, -50%);
}
.foocontent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class='foo'>
<img src="https://source.unsplash.com/random/200x200" />
<div class="foocontent">
Here's some text and even some more text to demonstrate how text content could be placed above the image that serves as a background here.
</div>
</div>
The percentage unit cannot be used to offset the background image because it defines the entire image point relative to its container.
What you can do is define the size and position of the image, which uses pixel units.
Use background shorthand:
background: url(img) -100px -150px / 200px 300px;
body {
background: url(https://images.unsplash.com/photo-1519940640025-75fdf32010d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80) -100px -150px / 200px 300px no-repeat pink;
}
So I have the following css code:
.crop img{
max-width: 100%;
position: relative;
top: -50%;
/* width:100%; */
border-radius: 10px 10px 0px 0px;
object-fit:cover;
object-position: center;
}
What this code does is it takes an image from a URL, places it inside a div that I have, fills the div, then moves up 50%, so that the middle half of the image is displayed in my div. The problem here is that the div my image is in has rounded corners in the top left and right, but by moving the image up 50%, I can't confirm the image to fit the rounded corners (see image below).
Is there anything I can do to make the image fit into the rounded corners of the div, without declaring them manually? Is there like an inherit tag or anything I can use? Sadly I can't provide a working example of my problem, as it is locked behind a login page.
Just add {overflow: hidden} to your div.
If anyone is interested, the answer is courtesy of #wilkoklak, who says to use overflow:hidden; in the parent div with the rounded corners. Thanks, wilkoklak!
I have a glyphicon as such:
<div class="col-xs-4 col-sm-2">
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large"></span>
</div>
.glyphicon-large {
min-height: 260px;
font-size: 35px;
width: 1em;
display: block;
top: 50%;
margin: -0.5em auto 0px;
}
The glyphicon won't align to the center, vertically. When I open firefox, inspect element, and toggle off/on the top 50% rule, it suddenly works. How come?
Browser Bug Explanation
According to MDN on top:
For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.
Note: Percentage is applied as a percentage of the height of the element's containing block
According to W3 on top:
For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
Note: Percentages refer to height of containing block
Here's my guess:
I think what's happening is that when the browser is first rendering the visual tree, and sees top:50%;, it looks to the parent to set the height. Since no height has been specifically applied, and it has not loaded any child contents, the height of this div (and all divs) effectively starts off as zero until otherwise indicated. It then pushes down the glyph by 50% of zero.
When you toggle the property later, the browser has already rendered everything, so the calculated height of the parent container is provided by the height of its children.
Minimal, Complete, and Verifiable Example
Note: This doesn't really have anything to do with Bootstrap or Glyphicons. In order to avoid a dependency on bootstrap, we'll add top: 1px that would have been applied by the .glyphicon class. Even though it is overwritten by 50%, it still plays an important role.
Here's a simple set of parent/child elements:
<div id="container">
<div id="child">Child</div>
</div>
In order to simulate the toggling the property in a more repeatable fashion, we can just wait two seconds and then apply a style in javascript like this:
window.setTimeout(function() {
document.getElementById("child").style.top = '50%';
},2000);
Example 1 (jsFiddle)
As a starting point, let's recreate your issue.
#container {
position: relative;
/* For Visual Effects */
border: 1px solid grey;
}
#child {
position: relative;
height: 50px;
top: 1px;
/* For Visual Effects */
border: 1px solid orange;
width: 50px;
margin: 0px auto;
}
Notice that as soon as you resize the window, the browser will repaint the screen and move the element back to the top.
Example 2 (jsFiddle)
If you add top: 50% to the child element, nothing will happen when the javascript adds the property because it won't have anything to overwrite.
Example 3 (jsFiddle)
If you add top: 49% to the child element, then the DOM does have something to update so we'll get the weird glitch again.
Example 4 (jsFiddle)
If you add height: 50px; to the container instead of the child, then the top property has something to position against right from the get go and you don't need to use toggle in JavaScript.
How to Vertically Align
If you just wanted to know how to vertically center something consistently, then you can do the following:
The trick to vertically centering text is to set the line-height equal to the container height. If a line takes up 100 pixels, and the line of text online takes up 10, then browsers will try to center the text within the remaining 90 pixels, with 45 on the top and bottom.
.glyphicon-large {
min-height: 260px;
line-height: 260px;
}
Solution in jsFiddle
Tried centering a glyph icon that was inside an H1 tag, that was taking a while - so I discovered that you can actually change the font size and colour inside the SPAN tag contaning the glyph.
Thus:
<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span> Mes Messages</h1>
actually worked out for me.
Have you tried ? :
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large" style="vertical-align:middle"></span>
suppose we have a visible area 300 x 200 pixels
suppose we have an image of any size. It can be bigger or smaller than the visible area.
Question:
1.center the image vertically and horizontally inside the visible area. Crop overflowing parts of the image
1a. vertical centering is unimportant and can be omitted
2.draw the border around the visible part of the image. Note that the border can match either the outer div border or image border
2a.clarification: I want to find the way of (for example) creating the third div whose borders would repeat the borders of the visual part of the image
Cropped or not, in browser has to be seen the border around the visible part of the image
mercator has already done some of the job here as described below:
You can make it work if you wrap
another element around the image:
<div class="outer">
<div class="inner"><img src="" alt="" /></div>
</div>
And the following CSS:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
overflow: hidden;
*position: relative;
}
.inner {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
The position: relative on the
'outer is marked with * so it will
only work in IE6/7. You could move it
to a conditional IE stylesheet if
that's what you prefer, or remove the
* altogether. It's needed to avoid
the now relatively positioned children
from overflowing.
I'm not to sure what you mean by your 2d clarification, but I think you can achieve this with the follow markup:
<div class="outer"></div>
and css:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
background: #fff url(/path/to/image.jpg) 50% 50% no-repeat;
}
This will create a div of 300x200px with a 1px red border. It will then position an image in the div centered vertically and horizontally, or default to white the image cannot be found.
The border, you'll need to draw in another fashion. Simple borders can be added using css. More complex borders and shadows are limited in css and only implemented in some browsers, but you can use javascript to help you add a more complex shadow. There are many snippets and jQuery plugins that can help you.
You can center the image in the visible area by giving it margin-left = margin-right = auto.
Can background image extend beyond div's borders? Does overflow: visible apply to this?
No, a background can't go beyond the edge of an element.
The overflow style controls how the element reacts when the content is larger than the specified size of the element.
However, a floating element inside the div can extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the div to grow instead of letting the floating element show outside it.
Following up on kijin's advice, I'd like to share my solution for image offsets:
/**
* Only effective cross-browser method to offset image out of bounds of container AFAIK,
* is to set as background image on div and apply matching margin/padding offsets:
*/
#logo {
margin:-50px auto 0 auto;
padding:50px 0 0 0;
width:200px;
height:200px;
background:url(../images/logo.png) no-repeat;
}
I used this example on a simple div element <div id="logo"></div> to position my logo with a -50px vertical offset. (Note that the combined margin/padding settings ensure you don't run into collapsing margin issues.)
not possible to set a background image 'outside' it's element,
BUT YOU CAN DO what you want with using 'PSEUDO' element and make that whatever size you want and position it wherever you want.
see here :
i have set the arrow outside the span
here is the code
HTML :
<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>
strong text
.tooltip{position:relative; float:left;}
.tooltip .msg {font-size:12px;
background-color:#fff9ea;
border:2px #e1ca82 solid;
border-radius:5px;
background-position:left;
position:absolute;
padding:4px 5px 4px 10px;
top:0%; left:104%;
z-index:9000; position:absolute; max-width:250px;clear:both;
min-width:150px;}
.tooltip .msg:before {
background:url(tool_tip.png);
background-repeat:no-repeat;
content: " ";
display: block;
height: 20px;
position: absolute;
left:-10px; top:1px;
width: 20px;
z-index: -1;
}
see here example: http://jsfiddle.net/568Zy/11/
No, the background won't extend beyond the borders. But you can stretch the border as far as you want using padding and some clever tweaking of negative margins & position.
I understand this is really really late, and I am not even sure if this is best practice but I found a little way to do this with my footer. My last section had a background image that I wanted to overflow into the footer and I fixed it with a few lines of CSS. Also added a little padding the section with the background image.
footer{
background-color: transparent!important;
top: -50px;
margin-bottom: -50px;
}
I tried using negative values for background-position but it didn't work (in firefox at least). There's not really any reason for it to. Just set the background image on one of the elements higher up in the hierarchy.
After a little bit of research: No and No :)