I'm having a problem displaying a small image using CSS. I'm trying to show an icon sized picture (the picture has a few pixel border so it isn't edge to edge) but the image itself isn't centered when it's displayed and part of it is being hidden by the right and bottom shadows of the surrounding box. I like the look of the shadows but I think the image is so small, the shadows of the box can't be ignored in the sizing. Here's my CSS. Any ideas?
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
}
Try this, adjusting the background-position values until your image is positioned correctly:
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
background-position : -3px -4px;
}
Expanding on this a little further, you might want to try to add all your small images into one icon image in a matrix style. Then you can select just the image you want using the width, height and background-position. This will allow all your icons to be loaded at once as a single file, reducing internet traffic. When a "new" icon is needed, it will already be cached and immediately be available.
background-image: url("icons.png");
background-position: 30px 40px; /* Use these values to select your small image contained in your large image */
background-repeat : repeat;
width : 20px; /* or however large your icon is */
height : 24px; /* or however large your icon is */
Related
Just a small issue.
I have set the list-style-image to the url with the image I wish to use which is a 32*32px png.
Zoom in issue:
The list becomes compressed and moves into the adjacent div.
Zoom out issue:
The list become more spaced out and extends vertically downwards until the list ends.
I have tried to fix its size by setting its padding and margin to 0, as well as height and width to auto, and specific values, to no avail.
I can provide a code snippet if needed but I won't do so at the time of posting in the event that there's a simple fix.
Take a look at: https://jsfiddle.net/bernardbaker/pg3xu2ca/
I've used a HTML list element with a background (sprite sheet).
You could do the same with a single column sprite sheet.
li {
list-style: none;
position: relative;
padding-left: 20px;
height: 18px;
width: 12px;
background-image: url('https://scotthsmith.com/projects/social-icons/blue/IconGrid.svg');
background-size: 100px 100px;
background-position: 0px 0px;
}
It also solves the zoom in and zoom out issue.
I have an image:
with 3 parts:
, and
I want a button with a repeating part2, so the button text (centered) is variable.
But the button text should range 50% into the other pieces.
Part1 and part3 need a min width I think, unfortunately I have no useful example.
:before and :after didn't work very well (with position:absolute or similar), because the repeat part have to be fluid between the outer parts.
Any ideas? Greetz.
A modern posibility would be using border-image.
But if you want a wider support, do it with backgrounds.
The problem is that a repeating bkg is difficult to size . So, it's best to handle it in a pseudo element
.test {
min-width: 200px;
text-align: center;
line-height: 90px;
display: inline-block;
margin: 20px;
height: 100px;
padding: 0px 20px;
font-size: 30px;
color: white;
background-image: url('//i.stack.imgur.com/mYxcX.png'), url('//i.stack.imgur.com/TlpN0.png');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top, right top;
position: relative;
}
.test:after {
content: "";
position: absolute;
background-image: url('//i.stack.imgur.com/GMhMi.png');
background-size: auto 100%;
left: 90px;
right: 100px;
top: 0px;
bottom: 0px;
z-index: -1;
}
<div class="test">TEST</div>
<div class="test">long test</div>
<div class="test">much longer test</div>
And the same, using border image. Using this image
we will get this: (note the trick about height:0px to allow for a single image in all the left and right sides.)
.test {
display: inline-block;
margin: 20px;
height: 0px;
font-size: 30px;
border-width: 50px;
border-image-source: url(http://i.stack.imgur.com/oXiA6.png);
border-image-slice: 50% 49% 50% 50% fill;
border-image-repeat: repeat repeat;
}
<div class="test">TEST</div>
<div class="test">long test</div>
<div class="test">much longer test</div>
UPDATED and totally Changed:
Thanks to #vals comment below which let me had the "idea bulb" above my head, hence the "unless.." part in the comment.
This new solution is much cleaner in CSS and HTML, less code, no need to worry about position:absolute, no need for extra mess, just simply uses "multiple backgrounds" (1) as well as calc()(2) function with min-width too techniques. but first here's the code and comments will explain:
JS Fiddle
.test-class {
/* so that div can expand to contain the text as well as the padding */
width:auto;
/* min width = 173px left image width + 199px right image width */
/* without this it'll collapse */
min-width:372px;
padding:0 20px 0 10px; /* just to give it breathign space on sides */
line-height: 148px;
color: white;
font-size:24px;
/* no color background because the images are PNGs with alpha */
background-color: transparent;
/* setting multiple images having the middle "extendable" one as third background */
background-image: url('//i.stack.imgur.com/mYxcX.png'),
url('//i.stack.imgur.com/TlpN0.png'),
url('//i.stack.imgur.com/GMhMi.png');
/* set no repeat to all, even the extendable otherwise it'll appear behind the
other two images, instead we don't repeat it but control its size later */
background-repeat: no-repeat, no-repeat, no-repeat;
/* position each image to its corresponding position, the 46.5% for the middle
image is because the left-side image has less width than the one on the right */
background-position:left center, right center, 46.5% 50%;
/* finally giving the images on the sides their exact-pixel size, while for the
one on the middle we make use of calc() function, so the width size of the middle
image = full div size (100%) - the width values of the left and right image (173+199) */
background-size: 173px 148px, 199px 148px, calc(100% - 372px) 148px;
display: inline-block;
text-align:center;
}
<div class="test-class">Home</div>
<div class="test-class" style="margin-left:200px;">about company</div>
<div class="test-class">example dummy text for demo only</div>
Alternatively, as I commented, you can use the CSS Sliding Door technique which was so practical and used a lot before CSS border-radius and CSS shadow presented and simplified interfaces. another example perfect CSS sprite sliding doors button
This JS Fiddle 2 shows how to implement the sliding door method for achieving such task, while it looks kind too much wide for this images set, since the right side image has 199px width, it could be used for images with less width values.
And this JS Fiddle 3 is similar to sliding door but with :before and :after but with one issue that it has to have display:block which make it not workign for horizontal alignment but could be fixed with javascript after settign it's display to inline-block.
Also there's another way, using SVG as background image which is better first because it is scale-able especially for non linear images like the blue ink circle used in the great example by #vals .
Second benefit of using SVG is using inline SVG and because SVG is made of groups and element could be targeted with CSS just like targeting other DOM elements.
https://css-tricks.com/using-svg/
----------------------------------------------------------------------------
(1). Resources:
caniuse - Multiple backgrounds
MDN - Using CSS multiple backgrounds
(2). Resources:
caniuse CSS calc()
MDN - calc()
CSS-Tricks - A couple of use cases for calc
I want to have a fixed position background image that scales and I need it to have a 220px top margin and a 170px right margin so that the image is not under the navigation bars. I have come close with the following code but the right margin varies due to the percent.
#container_hu
{
width: 100%;
text-align: left;
background: #fff;
border: 0px solid #000000;
height:100%;
padding-top:260px;
min-width:1100px;
background:url(../images/bg_image.jpg) no-repeat;
background-attachment:fixed;
background-position: 78% 220px;
background-size:25%;
}
Thanks for any help!
You can use CSS3's background-clip property to force clip the background to within the allowed content area. i.e. you can specify a padding to your DIV (to cover the nav bars etc..) and specify the background-clip property to content-box to achieve this. Example CSS below:
#container_hu {
/* this forces the bg to be rendered only within allowed content area (CSS3) */
background-clip: content-box;
background-image: url("your_image.jpg");
background-repeat: no-repeat;
/* this forces the bg to stretch with the container (CSS3) */
background-size: 100% 100%;
height: 300px;
width: 400px;
/* specify the top/left pixels to cover your nav-bar etc. */
padding-left: 50px;
padding-top: 50px;
}
So to start off its 170px right margin and then a percentage from what you describe.
I would consider 2 options:
Redo your entire layout in ems for all dimensions, margins, puddings etc. with a base unit on body. That way you may have more of a chance of things lining up. (in essence I'm saying start with ems, scale up in ems, as %age will not work)
You could also start with pixels and scale up in pixels but you'll need JavaScript to do the calculation and apply the new margin right onResize.
I have 5 stars on a line, and 2 kind of pictures empty and filled. I need to crop by css filled one, under empty, so that it looks like percent of fillness. But looks like I have problems with standart crop approach. Can you suggest ideas?
I’d use two nested containers and do it somehow like this:
#outer {
background: url('empty.png') top left repeat-x #666666;
position: relative;
height: 16px; /* set this to the height of the image */
width: 80px; /* set this to a multiple of the image’s width */
}
#inner {
background: url('filled.png') top left repeat-x #999900;
position: absolute;
top: 0;
left: 0;
height: 16px; /* same as above */
}
Set the width property on the inner container via inline CSS as needed:
style='width: 32px;'
style='width: 64px;'
(It doesn’t necessarily have to be a multiple of one image’s width.)
Bonus: If your images don’t use transparency, the fallback background colors of the CSS will make up for percentage bars if the images fail to load.
I am using HTML and CSS to create a webpage. I want to create buttons that are of a .gif file that I already have. I am using div to place items in the page itself. How do I use the image, and also use the rollover features so that the image changes to a different image I have that is a different color.
Thanks.
Changing the image url works, but can be a nuisance if the images are not preloaded or the user's cache is disabled.
Check out sprites FTW.
http://css-tricks.com/css-sprites/
A quick definition of a sprite is a large image, containing several smaller images. So a 10x20 image, with the normal state being the upper 10x10, and the hover state being the lower 10x10. The user only sees the upper 10x10 due to the CSS:
.button
{
display: block;
width: 10px;
height: 10px;
background-image: url(to-image.gif);
background-repeat: no-repeat;
background-position: top left;
}
then on hover, it shifts to the bottom part of the image
.button:hover
{
background-position: bottom left;
}
Make the button element a fixed size, and set the .gif file as the element background in CSS. Then you can use a :hover class on the element to change the image. Here I'm using an "A" tag so it works on IE6.
<a class="button"></a>
.button {
display: block;
background-image: url(default.gif);
width: 100px;
height: 20px;
}
.button:hover {
background-image: url(hover.gif);
}