I know the typical way to use a sprite with background-position is to reference the images in the sprite using the upper left hand corner and provide negative coordinates. I have a rounded rectangle that I am using for buttons and I want to provide the coordinate for the upper right hand corner of the rectangle and and have it repeat-x to the left of the right edge of the triangle. Any thoughts?
From what I think you are asking, it sounds like you want to use this rule:
background-position: 100% 0;
or
background: url(image.png) repeat-x 100% 0;
That should push the background image over so that is matches up with the right side of whatever element it is in.
Related
This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
I'm currently playing around with CSS gradients and position, I kind of manage to do what I want but with lucky guesses but I'd like to understand how this actually all works.
For instance, here's the French flag (merci):
.serge_testDraw {
width: 10rem;
height: 10rem;
border: 0.2rem solid black;
background-image:
linear-gradient(to right, blue 0%, blue 100%)
, linear-gradient(to right, white 0%, white 100%)
, linear-gradient(to right, red 0%, red 100%)
;
background-size: calc(100% / 3) 100%;
background-repeat: no-repeat;
background-position: 0%, 50%, 100%;
}
How come the background position is 0%, 50, 100% instead of 0, 33.33%(a third), 66.66% (two third)?
Plus, I'm clueless how to position backgrounds whose size is 100%.
A percentage value for background-position does not position the origin of a background image with respect to the background positioning area. It positions the entire image. This means the dimensions of the image itself are also taken into account (after resizing it with background-size).
A background position of 100% 100% is analogous to right bottom, positioning an image such that the bottom right corner of the image touches the bottom right corner of the background area. Similarly, 50% 50% is analogous to center center, placing the midpoint of an image on the midpoint of the background area.
Imagine sliding a rectangular tile around the interior of a rectangular frame; moving it all the way to the right (i.e. 100%) means having its right edge touch the right side of the frame (since you can't slide it through the frame), and moving it to the bottom means having its bottom edge touch the bottom of the frame.
Generally speaking, for any background-position: x y where the two values are percentages, the x point of the image is aligned with the x point of the background area, and the y point of the image is aligned with the y point of the background area.
CSS2.1's description is painful to read so I'll quote CSS3 Backgrounds and Borders instead, where there's even a graphical example:
For example, with a value pair of ‘0% 0%’, the upper left corner of the image is aligned with the upper left corner of, usually, the box's padding edge. A value pair of ‘100% 100%’ places the lower right corner of the image in the lower right corner of the area. With a value pair of ‘75% 50%’, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.
But if you're like me, and you're terrible at visualizing this in real time, then just think of a sliding puzzle instead.
Note that none of this applies to absolute values; absolute values do position the origin of the image. However, the reference point can be changed if you anchor the absolute value to the right and/or bottom sides, for example right 10px bottom 10px positions a background image 10 pixels away from the bottom right corner of the background area.
If you want to position a background image whose size is 100% of the background area, you won't be able to use a percentage, since you can't move a tile that fits its frame perfectly (which incidentally would make for either the most boring puzzle or the perfect prank). This applies whether the intrinsic dimensions of the background image match the dimensions of the element, or you explicitly set background-size: 100%. So, to position the image, you will need to use use an absolute value instead (forgoing the sliding-puzzle analogy altogether).
Like Woodrow said because of your background-size rule who gonna apply for each background, each background gonna take a third of your flag so 0% it's starting point for the first background.
Second one gonna take a third again but to be more easy to understand think 50% it's center more than 50% this is why he is in the middle and take a third of container. You can use center instead of 50% if you want.
Here's mozilla's doc about background-position
The background-position property sets the position of the center of the background. You've specified that all backgrounds have a width of calc(100%/3) and a height of 100%, then you've specified the x-position for the center of each of the three backgrounds (the y-position defaults to 50%).
I am trying to create a div element with a rounded border. I am aware of the use of the border-radius, but I noticed that using this property will curve the corners only, like the top-right, top-left etc. so i was wondering if there is some property to curve the side of a div element, something like border-radius for top, down, left and right.
For example, a div with a straight top, bottom and left but a rounded right side. i would like to create the right side so that it is more rounded at the top than the bottom.
My aim is to create a div element with rounded right side which will not affect the top and bottom sides. i mean the curve in the right side should stop as soon as it reached the top or bottom side. (so that the top and bottom remains straight rather than slightly curved).
Is there a way to get this effect using css?
You can specify horizontal and vertical border-radii via the slash notation to achieve such an effect...
div{
width:100px;height:100px;
border:3px solid #bada55;
border-radius:10px/50%;
}
<div></div>
This would set a vertical border-radius of 50% and a horizontal border-radius of 10px for all sides. You can define this for each corner individually (So you have up to eight values).
You can use the / effect which defines the horizontal and vertical radii. 10px is horizontal, 100px is vertical
div
{
height: 200px;
width: 200px;
border: 2px solid #000;
border-radius: 10px/100px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
With the border radius set to 10px/100px this makes the sides slightly curved. Set the left corners to 0 and you have only one side that is curved :)
http://jsfiddle.net/UWbKf/
You can still use border-radius for this. You just have to be a bit more creative with the parameters you give it.
border-radius allows you to specify both a horizontal radius and a vertical radius for each corner. Using these gives you the flexibility to stretch a curve effect across the whole of one side your element if you wish.
An random example that makes an odd shaped box:
.myElement { border-radius: 24% 41% 31% 9%/44% 6% 32% 40%; }
And here it is on jsFiddle.
Rather than give you loads of detailed examples, I'll link you to this site, which demonstrates the flexibility of border-radius, and allows you to design the shape you want: http://www.webtutorialplus.com/border-radius.aspx
Hope that helps.
Lets say I have an image with the width and height of 1700 x 1129px. What is the best way to be able to repeat this image so that you cannot tell that it has been repeated. I have tried using repeat-y but it looks like its another graphic.
There is nothing to do with css. Your image does not allow repeating. To repeat an image without bad effects your image has to have same start and end in the direction you want it to repeat.
There's a quite simple trick: end your image sides in a static color (like black or dark brown in your example), center your background image and color fill your background
body { background: black url(image.png) no-repeat center top; }
Use background-size property.
If you have a background which you think can be disguised by repeating horizontally then do the following.
background-size: 50% 100%; background-repeat: repeat-x;
if you think the background can be disguised by repeating vertically then do the following:
background-size: 100% 50%; background-repeat: repeat-y;
You will have to make a seamless image, that means that the upper and lower edges as well as the left and right edges of the image match their opposite edge perfectly, so no angles and color transitions being visible. The css approach using background-repeat is totally fine.
That's often used in CG, mostly in the 3D world.
There's plenty of tutorials around on making an image seamless, found one here.
How to rotate an element with respect to a defined point i.e. defined x & y coordinate in CSS (webkit)?
Normally rotation make element's center point as reference.
You could use transform-origin.
It defines the point to rotate around from the upper left corner of the element.
transform-origin: 0% 0%
This would rotate around the upper left corner.
For other options look here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
for the safer side if this link not available then here are a couple of more options
transform-origin: center; // one of the keywords left, center, right, top, and bottom
transform-origin: top left; // same way can use two keywords
transform-origin: 50px 50px; // specific x-offset | y-offset
transform-origin: bottom right 60px; // third part is for 3D transform : z-offset
As far as I know there isn't an option to rotate around a fixed point (although this would be handy).
If you need a specific offset, one way is to edit your image to make it larger, such that the centre lies in the middle of your image. You can then place this within a DIV with "overflow: none" and position it with relative positioning. The div will mask off the area of the image you don't wish to display.
It is now August 2022, older answers do not include the use of px as mentioned in the documentation.
transform-origin accepts keyboards (left, right, top, bottom, or center), percentage (50%, 69%...) or length describing how far from the left edge of the box the origin of the transform is set.
Therefore transform-origin: 360px 540px; is absolutely fine and works as expected.
Is it possible that I can create a margin/padding between the background image and container that holds the image? In other words, I need to move the background image sprite_global_v3.png 20px to the right of the left border of #nav-primary.
Here the position "0 -470px" are used to pick the right picture from sprite. And I don't know how to apply a padding/margin of 20px in order to achieve what I expected.
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
<div id="nav-primary">
<span>Hello World</span>
</div>
Based on http://www.w3schools.com/css/css_background.asp
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
If I understood correctly, the background-position is used to control the alignment of the background image. Now I need to control alignment and choose the right picture from a sprite. I don't know whether or not I can mix it together.
Thank you
No, there is no concept of padding/margin for background images.
Options:
1) Positioning the background (as already stated). The key is that the container would have to have fixed dimensions.
2) Nest a container inside a parent container. Parent gets the padding, child gets the background image.
Given that you are trying to do this with a sprite, both are likely options since a sprite has to have a fixed sized container anyways. For option 1, you'd need to make sure your sprite images have enough white space between each other in the file.
No, you can't mix them together.
You can place an image at an offset from the corner:
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: 20px 20px;
But you can't combine this with the sprite techinque. This technique uses the fact that the element is smaller than the background image to clip the image, but you can't clip the background image 20 pixels into the element.
You can specify the exact position of the background to the pixel.
If you wanted a 10-pixel gap on the left-hand side, for example:
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll transparent;
background-position:10px 0px;
}
That being said, it looks like you already specified it to be set at (0, -470). Does that not work?
The background-position property allows for percentages and values, e.g. "20px 0", which I think is what you're looking for.