I'm create a list of avatar for my user to choose on my website. The avatars are in a big image with 5 sub-image per row and 5 sub-image per column. So this by using image background position, I can display one of the 25 possible choice. For example, my sub-image size is 160X160, and I want to display row 3 column 2. The css will be
<img class="avatar-icon img-thumbnail" style="background-position: -160px -320px; background-image: url('/images/logos/Avatar_0.png')">
It works great. Then I found the avatar is a little bit big in some situation. And I want to stretch the background after it is positioned. In the example above, I still want to display from area from (-160px,-320px) to (-320px,-480px). But I want to stretch it to 50%, so imag size will be 80x80. I tried the background parameters but didn't find a good combination. Is there a css way to do it? (without duplicating the big image to a 50% smaller one)
Use a <div> or <span> for background properties instead of applying on image tag.
You can achieve avatar scaling in 2 ways:
1) By scaling both position parameters and image size, i.e.
background-position: -80px -160px; background-size: 50% auto;.
2) If you don't want to change the position parameters, you can simply scale with the transform property.
transform: scale(0.5);
Related
Actually my first question on stack:)
I'm trying to get a negative (right) margin on my repeating background, so there won't be a gap between the repeating images.
It seems there is no css syntax for this.
To make things clear, i added an image below. So i'm trying to get the repeating images of the cookie-like things to overlap so there's no gap between them.
screenshot of the page
You can apply multiple backgrounds to an element, so why not use this background image twice, with different horizontal offsets.
body {
min-height:170px;
background:
url('http://i.stack.imgur.com/jKAKB.png') 0 100% repeat-x,
url('http://i.stack.imgur.com/jKAKB.png') 75px 100% repeat-x;
}
PS the cookie like things are called kruidnoten. Although everybody calls then pepernoten, which is not actually true.
I was trying to work with background image property. I was really confused with repeat x and y. I have tried to figure out what it does, and I found online things I found not good enough. I have created two columns, and the left column would get 63% and the right column 37%(approximate). I used background image with 3000px width and 160 height, and used two different colors for the two columns. That is, after 1890px or 63% the color changes.
I am using my laptop with 1350px wide screen. I kept changing the percentage of repeat-y and see what is it is doing. I still can't figure out, what happening. This is what I understood, and if I am wrong please give me more simpler explanation. For me, if I set repeat y 44%, then it is taking 44% of the current container, let say Z PX, and set the background image by starting from z PX to the end of image, in my case to 3000px, and repeat the process vertically. I hope I am clear. Am I correct? Please, let me know what you think or explain to me on your own ways. Thanks!
#page{
background:url("bg.jpg") repeat-y 63%;
}
.clear{
clear:both;
}
div.left{
width:63.11111111%;
float:left;
}
div.right{
float:right;
width:36%;
}
}
</style>
</head>
<body>
<div id="page">
<div class="left">
this is left column
</div>
<div class="right">
this is right column
</div>
<div class="clear"></div>
</div>
</body>
The background-repeat property and the background-position property are two different things. The background-repeat property sets if or how a background image will be repeated; default, a background-image is repeated both vertically (= repeat-y) and horizontally (= repeat-x).
In your example the image will be vertically repeated; but the div's your are using don't show much about it, because the image is much bigger than your div's . I suggest you try it with a smaller image, e.g. 25x25px and put some text (e.g. lorem ipsum) in or give this a height of 200 px, and play with the values again.
The background-position property sets the starting position of a background image; the first value is the horizontal position and the second value is the vertical.
In your example the percentage describes the point off the image to start from, on the horizontal axis.
If you only specify one keyword, like you did, the other value for the vertical axis will be "center". So your image will be viewable from the middle, on the vertical axis.
Try out my suggestion! If it does not seem to be working, I'll put an example online. Let me know.
PS: There are no colors specified for the columns.
Look at the image below
I'm developing the pagination. As per image above the pagination contents, the page number should be surrounded by the the fancy border, such border is not possible through css borderproperty. I have to use image for this, but the problem is if I use a fixed size background image then as when number of pages increases they will be displayed outside that background image.
How do I go so that background image should also increase with the number of pages.
I hope this make sense.
You have 2 options - doing it with border-radius or using a background-image.
If you gonna use border-radius (note it is not supported in IE8 and older):
.pager-container {border-radius:5px 0 5px 0;border:1px solid #ccc;}
If you use background-image you first need to create a sprite for your background (the one below will extend up to 800px).
Now that you have your sprite you will need to wrap your paging in 2 wrappers and apply the sprite image to both and just move it with background-position to put it in place:
<div class="pager-container">
<div class="pager-container-inner">
<a>1></a>
</div>
</div>
.pager-container, .pager-container-inner {height:25px;background-image:url(sprite.gif);background-repeat:no-repeat;}
.pager-container {background-position:0 0}
.pager-container-inner {background-position:100% -25px;}
I'm making a sliding door button through sprites and there's one part that is giving me some trouble. Is there any way to set the anchor point AND the background-url image position: So something like this:
background-position: 0 -47px top right;
No. The dimensions of your "window" need to match the image exactly, otherwise, it will be cut/other images be displayed.
You may not specify where to place the sprite (it kinda beats the purpose).
No. "top" and "right" are just aliases for the values 0 and 100%.
If width and height of Your anchor are constant then You can use sprite and define coordinates (0 -47px in Your example). If anchor can have various size then I think better will be cut that background as separate image and add 'top right' position for background. As people above me said- there is no way to use both- 0 -47px and top right values.
I want to use a linear gradient background color for a website. For example the gradient color starts from header and ends to the footer. Now the problem is that, since different pages have different amount of content, so the height of the pages varies. So in that case how can I set ending point of the color? For example I want the gradient from #b68d4c to #f6e7cf.
Using an image:
You'll need to figure out the shortest height of content that you want to cover. Then, in your image editor, create your gradient. Since it's linear, you can create it something like 10px wide by 500px tall (if 500px is the shortest height) and repeat it along the x-axis. Once your image is created, you would then write in your CSS:
body {
background:#f6e7cf url(path/to/gradient.jpg) top left repeat-x;
}
Note: the #f6e7cf should be the finishing color of the gradient. What this does is if the page is taller than 500px, it will show the same color as the bottom of the gradient, giving it the illusion that it is continuing.
Using CSS3
As Ryan Casas pointed out, using the Colorzilla Gradient Editor is the most simple way to I've found (although, you don't learn as well because you aren't hand coding, but that's a different discussion). Essentially, you would put your two colors at 0% and 100%, ensure that it's going vertical, and copy the code into the body { } selector.
Use % on the gradients. Here you have a generator: http://www.colorzilla.com/gradient-editor/