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>
Related
I am displaying img elements using the following CSS.
.display-icon{
height: 16px;
width: 16px;
display:inline-block;
border:hidden;
background-repeat: no-repeat;
}
In Internet Explorer, it works fine, but in Chrome, there is a border around the image. Is there any way to remove it? Unfortunately I could not use the src attribute in the img element as part of the company requirement.
try border:none or outline:none?
It can also be done like this
border-style:none;
Try the following:
img.display-icon,
a img.display-icon {
border: none;
}
to cover all eventualities.
I have being wondering thinking what do one achieve this type of background in css for quite a while now. It's an image background, yet the image does not seem to be there. You cant download the image and cant drag it along. Please see the Pink stylish image background here . How can I achieve that? Or can some one help me with the feature name? Or perhaps a good link where I can learn or see the example on that? I just try googling but don't know what it's call. Another example is the chinese new year background Here.
Its a background-image:
New year:
.homepage-background-cny {
background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}
Etsy:
#seasonal-hero {
background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
width: 100%;
height: 400px;
min-width: 1030px;
cursor: pointer;
position: relative;
}
Background images usually cannot be dragged, the source of the elements background can be found with the inspector:
JSFiddle Demo
div{
height:300px;
background: url('http://lorempizza.com/1000/500');
}
<div>Background-Image</div>
They're just CSS background images:
Demo
HTML
<div id="container">
This is the content.
</div>
CSS
#container {
padding: 10px;
min-height: 600px;
width: 100%;
background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}
In CSS you use the background-image rule:
background-image: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg");
this is the one on the page you link uses.
Best,
Michael
I want to show images on the page but I don't want to hardcode the references to the images in html.
Is it possible to do something like:
HTML:
<span id="got-easier"></span>
CSS:
#got-easier { image: url(/i/trend-down.gif); }
(IE6 should be supported)
Yes, use a background image :)
#got-easier { background-image: url(/i/trend-down.gif); }
Remember to set a span to display: block; and set width/height of your image if you use it.
As David Dorward pointed out, if it's an image relevant to the information, it should be included in the document with an <img> tag and alt attribute.
Heya, the common term for it is css Image Replacement technique (or IR). Here are the commonly used methods currently. Just choose any of the two ;)
/* Leahy Langridge Method */
span#imageName {
display: block;
height: 0 !important;
overflow: hidden;
padding-top: 0px; /* height of image */
width: 0px; /* width of image */
background: url(url/of/image.jpg) no-repeat
}
/* Phark Method */
span#imageName {
display: block;
width: 0px;
height: 0px;
background: url(url/of/image.jpg) no-repeat;
text-indent: -9999px
}
In case you want to display the images inline, position:absolute does the trick:
#got-easier {
display:inline;
position:absolute;
width:img-Xpx;
height:img-Ypx;
background:url(/i/trend-down.gif) no-repeat;
}
The only problem with this is that, since the image position is absolute, it will overlay whatever is next to it (in IE6 it might appear behind), and the workarounds that I found to fix this (with both CSS and jQuery) aren't supported in IE6. Your image-container will have to be followed by new line.
This might be useful when, for instance, you'd like to place a (?) image next to a form caption or a button (that usually have nothing next to them) to display help with onmouseover.
I have a website design that includes text input fields that look like this:
Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png
I'm wondering what the best solution for creating this input field is.
One idea I have is to always have a div around the input with a background image and all the borders disabled on the input field and specified width in pixels, such as:
<div class="borderedInput"><input type="text" /></div>
I have tried to discourage them from using this format, but they won't be discouraged, so it looks like I'm going to have to do it.
Is this best or is there another way?
--
Trial:
I tried the following:
<style type="text/css">
input.custom {
background-color: #fff;
background:url(/images/input-bkg-w173.gif) no-repeat;
width:173px;
height:28px;
padding:8px 5px 4px 5px;
border:none;
font-size:10px;
}
</style>
<input type="text" class="custom" size="12" />
but in IE (6 & 7) it does the following when you type more than the width:
Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png
I'd do it this way:
<style type="text/css">
div.custom {
background:url(/images/input-bkg-w173.gif) no-repeat;
padding:8px 5px 4px 5px;
}
div.custom input {
background-color: #fff;
border:none;
font-size:10px;
}
</style>
<div class="custom"><input type="text" class="custom" size="12" /></div>
You just have to adjust the padding values so everything fits correctly.
It is - in my eyes- definitely the best solution since in any other case you're working with a whole input field. And the whole input field is - by definition - a box where users can enter text.
If you can rely on JavaScript you could wrap such div-Elements around your input fields programatically.
Edit:
With jQuery you could do it this way:
$( 'input.custom' ).wrap( '<div class="custom"></div>' );
CSS:
div.custom {
background:url(/images/input-bkg-w173.gif) no-repeat;
padding:8px 5px 4px 5px;
}
input.custom {
background-color: #fff;
border:none;
font-size:10px;
}
And your HTML:
<input class="custom" ... />
You don't need the div element, you can assign a background to the input directly.
Edit: Here is the working code. I tested it, but you'll have to adjust it for your needs. As far as I can tell, everything here is needed.
input {
background: #FFF url(test.png) no-repeat bottom right;
width: 120px;
height: 20px;
line-height:20px;
padding:0;
text-indent:3px;
margin:0;
border: none;
overflow:hidden;
}
Edit2: I'm not quite sure why I'm getting downvoted, but this method should work unless you need an image bigger than the input element itself. In that case, you should use the extra div element. However, if the image is the same size as the input, there is no need for the extra markup.
Edit3: Ok, after bobince pointed out a problem, I'm getting a little closer. This will be work in IE6&7 and it's close in FF, but I'm still working on that part.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
Edit4: Ok, I think I got it this time, but it requires use of a CSS3 selector, so it won't validate as CSS 2.1.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
body>input:enabled {
background-position:9px 10px;
}
body>input will target everything except for IE6, body>input:enabled will target any form elements that aren't disabled for all browsers except for IE 6, 7, & 8. However, because :enabled is a CSS3 selector, it doesn't validate as CSS2.1. I wasn't able to find an appropriate CSS2 selector that would allow me to separate IE7 from the other browsers. If not validating (yet, until the validator switches to CSS3) is a problem for you, then I think your only option is the extra div element.
Have you evaluated using background image like this:
<style type="text/css">
input{
background-color: #AAAAAA;
background-image: url('http://mysite.com/input.gif');
border: 0px;
font-family: verdana;
font-size: 10px;
color: #0000FF;
}
I have done this a few times. I have the background image inside a div and use css to position the input field accordingly.
Have a peek at the following site I created that used this technique and use the code: http://www.ukoffer.com/ (Right hand side Newsletter)
AFAIK, the background scrolling problem can be solved either in Firefox and friends, OR Internet Exploder; but not make everyone happy at once.
I would normally have said to style the input directly, but now that I think of it that div example doesn't sound too bad and should take care of your background image scrolling problem.
In that case you'd set a div as position:relative, and put the input inside it with proper padding and width (or 100% width if padding is 0), background transparent, and put an image on the div.
okoman has gotten the CSS aspect correct. May I suggest using a <label> to improve the semantic structure of the markup?
<label id="for-field-name" for="field-name">
<span class="label-title">Field Name <em class="required">*</em></span>
<input id="field-name" name="field-name" type="text" class="text-input" />
</label>
<style type="text/css">
label, span.label-title { display: block; }
</style>
Not only is this more accessible, but it provides numerous hooks that you can use for any type of DOM manipulation, validation or field-specific styling in the future.
Edit: If you don't want the label title displayed for some reason, you can give it a class of 'accessibility' and set the class to display: none; in the CSS. This will allow screen readers to understand the input but hide it from regular users.
The easiest way to get rid of the overflow without JavaScript is simple:
Create a 3 spans, and set their heights to the height of the
image.
Cut the image into 3 parts, ensuring you cut the image such that
the left and right round parts will be on the 1st and 3rd images
respectively.
Set the background of the 1st span to the image
with the left border, and set it to no-repeat.
Set the background
of the third span to the image with the right border and set it to
no-repeat.
Put the input inside the middle span, remembering to
set its height to the height of the spans, and its background to the
2nd image, and repeat-x only.
That will ensure that the input
will seem to expand horizontally once the input is being filled. No
overlapping, and no JS needed.
HTML
Assuming the image height is 60px, the width of the first and third span is 30px,
<span id="first">nbsp;</span><br />
<span id="second"><input type="text" /></span><br />
<span id="third">nbsp;</span>
CSS
span#first{background:url('firstimage') no-repeat; height:60px; width:30px;}
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;}
span#second input{background:url('second image') repeat-x; height:60px;}
That should resolve your issue.
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});