I cannot figure out how to center this image on my mobile website.
Here is the code I am using, I am a beginner in CSS so I'm sure this is an easy fix. Just need some help. Thanks
#emotion-header-img {
display:none;
}
#emotion-header {
height:100px !important;
background-image:url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png") !important;
background-repeat:no-repeat !important;
background-size:contain !important;
}
Assuming you want the element to be centered horizontally and vertically as well:
/* generated from howtocenterincss.com, personally tried and tested! */
#emotion-header {
display:flex;
justify-content:center;
align-items:center;
/* height:100px !important; no need for this if you don't want to limit size*/
background-repeat:no-repeat !important;
background-size:contain !important;
}
#emotion-header-img {
height: 100px;
}
<div id="emotion-header">
<img id="emotion-header-img" src="http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png" alt="image header" \>
</div>
Of course there are many many other possibilities, and things get complicated when you want to add support for old browsers like IE7 or IE8. On anything before IE11 you would need to use a table cell. The above code snippet works for IE11 and mordern browsers.
A relevant and good resource I've found when trying to center things in CSS is howtocenterincss.com, which generates the right CSS for you based on your settings and choices. In fact, contrary to the name of the web app, it handles all sorts of alignments too. Just note that the generated code is to be embedded inside HTML elements with the <style> tag, which you can just extract whatever is inside those style tags and move to a CSS file for use.
So you mean want to align the background-image? If right, you can use background-position. Example:
#emotion-header {
width: 200px;
height: 200px;
border: 1px solid #ddd;
background-image: url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png");
background-size: 100px;
background-repeat: no-repeat;
background-position: center;
}
<div id="emotion-header"></div>
I've searched everywhere to see how to code a background image into a clickable link. I have found a couple of answers to my question but none of them work!!! HELP!
You can try to achieve this using the following CSS trick:
Create an tag as normal and give it an id. You'll need for the custom css.
Clickable Background
Now the custom css for the #clickable-background div:
#clickable-background {
background-image:url(your-image-path);
background-size: 100% 100%;
display:block;
position: relative;
height: 100%;
overflow:hidden;
text-indent:100%;
white-space: nowrap;
}
Don't forget to add
* { margin: 0; padding: 0; } to your css.
Give it a go and see if it does what you want. Don't forget to edit your-image-path.
I have a html page which is using the same icon many times, and so I have embedded that icon as a background-image in css.
In css, the class for the icon is like this:
.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
I display the icon using a<span class='user'></span> tag, so far, so good.
I want the icon to be a link to another page, but I can't make the icon look correct when I do this.
I have tried:
<img class="user" src=""></img>
but this draws a broken link icon over it in Explorer, it looks ok, but has a border in Chrome. It is obviously wrong.
I also tried:
<span class="user"></span>
and this works, but the mouse cursor does not change to a pointer when over the icon.
What should I be doing?
You should make the element block level (at least inline-block) to set the width/height and explicitly set the cursor. These two things are the key components.
.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block; /* set display so you can set width/height */
cursor: pointer; /* ensure it shows the link cursor */
width: 16px;
height: 16px;
}
And the HTML:
<span class="user"></span>
So, you end up with an inline-block element which shows the image, and then you wrap that with an anchor. This is basically the same as wrapping an anchor around an <img />.
Alternatively, you could do this with just the <a>. You would use the exact same CSS, with this HTML:
Both should achieve what you're after. The difference between these two choices is mostly semantics.
You can set the class attribute on the anchor tag.
Are you looking for something like THIS
The HTML:
The CSS:
.user {
text-indent: -99999px;
background: url("http://www.google.co.in/images/srpr/logo4w.png") no-repeat top left;
float: left;
overflow: hidden;
width: 600px;
height: 200px;
margin: 10px;
}
Hope this is what you need.
try to add this one on your css
cursor:pointer;/*Link with poniter*/
<span class="user" /></span>
I'm making a touch interface and need to enlarge the select form (In order to make the rows eaiser to hit with the clumpsy finger). Is there any other way of enlarging the select rows without enlarging the text font? I know that the select is very limited, and you might suggest using a diffrent approach. I'm aware of that. I'm just curious if there are a way to enlarge the row without enlarging the font text. =)
On the image below I have
font-size: 20px;
And I would prefer it to be around 14-16, but then the rows would be rather hard to hit on a touch screen.
Full css code of the dropdown menu below
.styledDropDown select{
background: transparent;
width: 200px;
padding: 5px;
font-size: 20px;
border: 0px;
height: 31px;
-webkit-appearance: none;
outline: none;
}
.styledDropDown{
float:right;
width: 200px;
height: 31px;
background:url(../images/bedview/dropDown.png) no-repeat;
}
Could only change background color and font color but not change padding
option {
background-color:#ddd; /*Works*/
margin:20px; /*don't work*/
padding:20px; /*Don't work*/
}
Edit it works in Internet Explorer but want it to work in chrome :/
Well if you only need it for chrome
You can try something like
http://jsfiddle.net/nyd69/3/
Obviously it's not the best result but this i the best I got
select {
padding: 10px;
font-size: 30px;
-webkit-appearance: button;
}
As far as I know, Chrome doesn't support giving styles to option. Sorry.
I'm using <select> and it's OK.
Try to modify width and height in CSS to see changes.
I have tested in FF but not Chrome.
Can you check this fiddle link if it's OK or not?
Thanks.
I try to display a span when the cursor of the mouse is on a help icon.
It works, but nevertheless, I don't manage to remove the border around the icon.
My CSS :
.info{
position:absolute;
border:none;
}
a.info{
position:absolute;
z-index:24;
background:none;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:25;
background-color:#FFF;
cursor:help;
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
cursor:help;
bottom:0px;
left:26px;
width:150px;
padding:4px;
}
cd
Another thing - remember that if you have an with an empty src attribute, then none of these suggestions will work, a border will still get shown.
<img src="" style="width:30px;height:30px;">
Try this:
img{border:0;}
You can also limitate the scope and only remove border on some images by doing so:
.myClass img{border:0;}
More information about the border css property can by found here.
Edit: Changed border from 0px to 0. As explained in comments, px is redundant for a unit of 0.
img need src to use border is remover, i no know a why css is crazy
data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7
So try example with SRC:
img.logo {
width: 200px;
height: 50px;
background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}
<img class="logo" src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7">
So try example without SRC:
img.logo {
width: 200px;
height: 50px;
background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}
<img class="logo">
lol... css crazy! good fun
it's a good idea to use a reset CSS.
add this at the top of your CSS file
img, a {border:none, outline: none;}
hope this helps
<img id="instapic01" class="samples" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
I faced similar problem with img tag
I had added following line with img tag.
<img class="my-class">
And this is the css class
.my-class{
background-image: url('add.gif');
background-repeat: no-repeat;
display: inline-block;
width: 27px;
height: 27px;
}
I changed the img tag to span tag with same css class. Border is not visible now.
<span class="my-class"></span>
Use:
div {
background: url()
}
instead of <img>.
There is no borders in the div with background image.
maybe add border:none to under a.info:hover span or text-decoration:none
I realize this is a very old post, but I encountered a similar issue in which my displayed image always had a border around it. I was trying to fill the browser window with a single image. Adding styles like border:none; did not remove the border and neither did margin:0; or padding:0; or any combination of the three.
However, adding position:absolute;top:0;left:0; fixed the problem.
The original post above has position:absolute; but does not have top:0;left:0; and this was adding a default border on my page.
To illustrate the solution, this has a white border (to be precise, it has a top and left offset):
<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;">
This does not have a border:
<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;">
Hopefully this helps someone finding this post looking to resolve a similar problem.
img {
text-indent: -20000px; /*some large value*/
}
did the trick for me (for Chrome). This will remove the alt icon as well, something to note.
What class do you have on the image tag?
Try this
<img src="/images/myimage.jpg" style="border:none;" alt="my image" />
Here's how I got rid of mine:
.main .row .thumbnail {
display: inline-block;
border: 0px;
background-color: transparent;
}
Thank for the answers,
The border is removed for Internet Explorer, but this there for Firefox.
So, I added this class to the img:
.clearBorder{border:none;}
And it worked!
Also, in your html, remember to delete all blanks / line feeds / tabs between the closing tag and the opening tag.
<img src='a.png' /> <img src='b.png' /> will always display a space between the images even if the border attribute is set to 0, whereas <img src='a.png' /><img src='b.png' /> will not.
<img style="border:0;outline:none" width="200" height="200"
src="this-image-dont-exists.png"
data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />
if image dont have src or image url is not returning image, border will be there, so you have to set a empty but valid image , here is a example which will load a default image on image loading error
<img style="border:0;outline:none" width="200" height="200"
src="this-image-dont-exists.png"
data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />
I do believe you need to add the border: none style to your icon element as well.
I usually use this on the top of css file.
img {
border: none;
}
Try this
<img width="30" height="30"/>