I am having a problem displaying the following image on the webpage. I think it's a coordinates issue.
I think if i twitch the -397px -85px i should be able to display the image. However, even after twitching it i was not able to get it displayed. Can someone please help me out here.
image icon
The code, found from firebug.
There seems to be a problem with the image you have posted. Especially relating to the dimensions and placement of individual sprites.
See the snippet below on how the background-position plays with this images sprite:
i.phone {
display: inline-block;
background-image: url(http://i.stack.imgur.com/kyVhA.png);
background-position: -63px -3px;
height: 52px; width: 51px;
}
i.phone:hover {
background-position: -70px -77px;
}
<i class="phone"></i>
Here is sample fiddle for you
#test {
background: url('http://i.stack.imgur.com/kyVhA.png') 0 0 no-repeat;
height:100px;
width:100px;
}
Demo Fiddle
As MR green mentioned you coordinates are out of range
also note that local host point and try giving the relative path to the image.
Try this...
i.phone
{
float:left;
height:56px;
vertical-align:middle;
width:56px;
background:url(http://i.stack.imgur.com/kyVhA.png) -65px -75px no-repeat;
}
The url you provided for the image is:
http://localhost/WEBSITE/images/img-sprite2.png
Which is mentioning localhost. So, I am sure that your code will work in localhost but not on actual website. Try to use relative path instead of absolute path.
And also, the image you provided has dimensions 126px X 133px and you are pointing the coordinates outside of the image i.e 397px X 85px as shown in your post.
If you have provided excerpt image from your actual image then let me know.
[Note]: Also tell the designer to provide images in scaled layout fashion. It seems, the images are provided in hurry placing not exactly below or side of an icon. I hope you understood my point.
are you sure are you assigning the path is correct ?? if yes then give height and width on that element where you want to display the images and also display:block try this
try add: display: block;
if element is not a block element then height and width are ignored
Related
I have this CSS code which generates transparent div:
.camera_caption {
position: relative;
background: url(../images/capture_bg1.png) 0 0 repeat-x;
left: 0;
margin-top: 263px;
width: 717px;
height: 234px;
padding-left: 365px;
font: normal 14px/24px 'Roboto';
color: #fff;
}
As you can see the background is generated using this image:
But I have several problems with this solution:
I would like to use pure CSS code to display colorful background.
And also I would like to resize the background height according to content size. For example I have several lines of text in different languages. I need to dynamically to resize the background layer .camera_caption.
Can you propose me some solution of the problems?
I am not user as to what exactly your issue is and what is it that you want to get done.
But for auto resize you can remove the width and height given. Maybe you can have 100% width if that will be more appealing
width:100%;
If by any chance you need to have a minimum height and width you can get it done like this
min-height:500px;
min-width:500px;
Add background color with this code
background:blue;
If you can elaborate or better post a fiddle, we can help better.
If you want to use pure css, an online tool you may want to consider is http://duri.me/, which converts an uploaded image into base-64 encoding that you then include in your css class definition. The end result looks like the example below. Doing this, you don't need an image, because the value of the background-image:url(data:...) property is the image. In your case, simply create your colorful background in an image editor, upload it, and grab the generated code.
There are goods and bads to this. On the bright side, you don't have to worry about a missing image, but you're adding a lot of code (especially if it's a large image), and the "image" never gets cached. You may also have to use a bit of javascript to dynamically resize the background, or, you can look into using the css property background-resize to scale it appropriately.
.myImg {
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-image: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAA8ADwBAREA/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEBAAA/APn+iiiiiiiiiiiiiiiirWm6beavqENjYW73FzM21I0HJP8AQe54Fadz4O16G4aKDSr67QMEE1vayPG7Yz8pA59j3HPSqsvhzXIXCS6NqCOSyhWtXBJVdzDGOoXk+g5qEaPqZXcNOuyvkrPnyGx5bHCv0+6TwD0JrV1DwRr2m6CusXOn3EVsH8qZZYzHJC/UblbBwQQQw4P1rnaKK9E0Sa3+HNxpt1fZXW7spLMvlCRrG0PJG1uPNkX1+6p9W40NU+NE9/c2skejpGtrqv8AaCZuDlwGyEb5fQKMj06VFa/GOWCys7OTw/ayw2rSOpM7h2aRJFlLN/teaT7YHWorf4tfYBDJp+gQQ3MFgunxSvcvIFiSQSR5UjBKkde9XoPixpVzYa1a6h4dUw6kySzRG5klWR9xEm0scxkqQVxkKUHHORwfifw//YV5DJbTfatLvY/PsLsDAlj9D6Op+Vl7EfSsOum8MXWlaAw13UoUv7qI5sdPb7jSD/lpL6Ip6L1Y+gGaydb1q+8QatcanqMokuZ3LuQoUc+gHSs+iiiux0bxbb3Hh1vCviKLzNLZzJa3caAzWMvTeP76HoynnHQ8AVyl1bm1upIDJHJsOA8bZVh2IPoahooooooooooooooooooooooor//Z)
}
I have an image with an original size of 900x300. I have an image container that has a size of 320x180. When I show this, the image looks squezeed. I understand it's because the ratio is not the same. So I am planning to show a zoomed version of it, but with just manipulating it's CSS. Is it possible? Also open to any other ideas that can show this image nicely using CSS tricks without having it looked squished in this box.
Here's a fiddle to play with. I am currently setting the width and height to 100% and hide overflow's.
It's because the ratio of your image is 3:1. You need to make your container size 3:1 as well... if you want your width to be 320px, then you have to set your height to 106px (106.6px to be exact), or something else proportionate to your original image. Here's an updated fiddle.
.boutique-grid .box-container {
position: relative;
height: 106px;
width: 320px;
}
You'll notice it's now proportionate.
If you want a zoomed version then you can use css background property in css. Here is the code if this is what you wanted:
.box-container {
position: relative;
height: 180px;
width: 320px;
background:url("http://cf.shopious.com/images/store_logos/original/9f84c96905ade833f48054cda524c7960dc0f424.png") no-repeat;
background-position:-500px -50px;
}
and remove the img from html.
this gives the effect of zooming
Your Question don't supply that what type of zoom you wants, But I can give you an idea, If you want that the image should be zoom at their place, with the full size then use follwoing CSS with the hover property:-
.boutique-grid .box-container:hover {
position: absolute;
width:900px;
height:300px;
}
See the fiddle here:-http://jsfiddle.net/npsingh/3m9aK/6/show/
Also If you like to provide a zoom with the popup then you can achieve this by following link:-
http://cssdemos.tupence.co.uk/image-popup.htm
If you want to crop the image with the center property and then use in that continer then you should be crop the image with the margin property, by that way you can crop your image with the same aspect ratio. See the post below:-
http://www.squareonemd.co.uk/how-to-crop-an-image-with-a-css-class/
Let me know if it will works...
.box-container img {width:100%;
height:auto;}
Add above code to your css. So that image will not squezeed.
Just remove the image element from the HTML and use background-image in your CSS instead.
Then you can use the cover argument for the background-size. This will take care of zooming the image to fit the box as well as keeping it proportional:
.boutique-grid .box-container {
position: relative;
width: 320px;
height: 180px;
background-image:url(...);
background-size:cover;
background-position:center;
}
MODIFIED FIDDLE HERE
With this approach you won't need to worry about re-calculating the sizes as the browser will do it for you.
Use the background-position to fine-adjust its position.
More details on background-size:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I have seen this so many times until now, but I never used myself. Can somebody explain how you can get specific icon picture from this single png image, for example the icons i selected with red ... using css
That is called CSS sprites. It is used to cut down the http requests. Basically all icons are placed on a single canvas and are used as background-image property and later they are mapped using CSS background-position property, so for example
.icon1 {
background-image: url('YOUR_URL_HERE');
background-position: 10px 10px; /* X and Y */
height: 30px;
width: 30px;
}
Demo
So inshort just define a fix height/width to your element, and than map the canvas using background-position property. Hence, if you have 100 small icon images on a page, it will make 100 requests to the server, thus to increase the performance, CSS Sprites are used.
Set a fixed (in pixels) height and width on an element
Set the image as the background-image
Adjust background-position so the part of the image you want to be visible is in view
Using background shorthand for the positioning of image.
div {
background:url(http://i.stack.imgur.com/mUhg1.png) -82px -104px;
width:27px;
height:27px;
}
http://jsfiddle.net/T2EtY/1/
I put a frame in my images.
I created a CSS for the background-image is the image of the frame, but he must have an x padding for the frame is seen.
img.frame
{
background-image:url('http://bit.ly/k8g8zz');
background-repeat:no-repeat;
background-position: center;
background-size: 100%;
padding:23px 14px 60px;
}
I can not use a div inside of another because I need this image is a link with a title, and the W3C can not be div tags within a.
If possible, change the jsFiddle and send me the link
See the complete code here.
As you can see in jsFiddle, the frame is the wrong size .. she needs to grow along with the image and have a padding.
Thank you all for your help.
You almost have it! Just set both dimensions of background-size;
background-size: 100% 100%;
http://jsfiddle.net/vLBXH/
You can't set a width and height for a background-image in CSS, AFAIK. If you use a fixed-width image (PNG) you also should have images of the matching size. Another approach might be to style the frame with CSS only or have an framing-tag around the linked image, which you then may style, like:
<div class="img_frame">
<imgr src="#noimg" />
</div>
I want to place a PNG with some transparency (a white column) over a tiled background on a webpage. It should stretch/tile out vertically (not horizontally) over the whole page. I'm just using CSS and HTML. I'm guessing my understanding of DIV's and CSS is lacking, for which I apologize.
Here's what I have, as a result of a lot of fiddling:
body {
background-image:url(bin/back.png);
background-position:left bottom;
}
#second-background {
position:absolute;
height:100%;
top:0;
margin: auto;
background-image: url(bin/column.png);
background-repeat: repeat-y ;
}
It's being displayed but I can't get it centered and on top of that it displaces the rest of my content. I've read through how-to-recreate-silverbacks-parallax-effect on thinkvitamin, but I can't get it to work myself.
Here's a link to a demo where you can see it in action.
I believe that you need to set a fixed width on #second-background. Otherwise, with no content in it, it has no width.
Edit: I'm sorry, I didn't read your question thoroughly. Let me check out the demo and investigate further.
Edit 2: Ok, if you want the white column image over the whole page and centered, then you'll need to set #second-background to width: 100%; and background-position: center top;. This will also allow #inner-body to center correctly.
Let me know if this isn't what you were going for.
I'm making a few assumptions here, but I think it'll work out:
Firstly, add this to near the top of your CSS:
html, body {
margin:0; padding:0; border:0
}
On #second-background, add width: 100%.
On #second background, either add background-position: center top, or scrap all of your background- properties and replace them with this: background: url(bin/column.png) repeat-y center top.
Tested in Firefox, with Firebug.
If you would like me to explain why these changes work, just ask.