I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
I am designing my first website.
I have designed a button image in gimp and saved it as a jpg.
I want to use this button for my navigation buttons on the site. Should I make a separate image(jpeg) for each button or is it possible to just use one image and then overlay text on top of the images on the page using HTML? What's the best practice here?
Usually in this case you use just CSS by setting background property of elements that should be your navigation buttons.
For example you could have a ul:
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
and then just style it in you css by using background-image or similar styles, take a look here for some examples..
You're asking a question more about design than about coding. If you can implement your desired design by developing a single button background and then overlaying text in a standard font, do it! More broadly: don't put text in an image if you're just using a standard font.
On the other hand, if you want a fancy swirly font that can only be depicted in an image, you'll need to create a specialized image for each button with that button's text.
In that case, be sure to insert the image purely with CSS. Never, ever embed an <img /> tag with a textual button on a page.
Definitely reuse the images and overlay text. For ideas on how to do this, look at this tutorial:
Image button overlay text tutorial
Also, you mentioned using jpg. Consider using PNG instead for the button images, unless they are "real world" images. For simple gradients and solid colors, PNG is the way to go.
I havent seen the image but I generally try to Use CSS for as much of the graphical design as possible. Button generally tend to be very simple in design. However if you must use an image you can assign a background to a tag and then use text in the tag. Example would be to assign a background to a
<button class="myButtonClass">MyButtonText</button>
<style>
.myButtonClass {
//enter your button style here.
}
</style>
Depends on how you've designed you site, as always theres loads of ways to do everything.
If your buttons are just static i would recommend using images, theres no harm doing it like this.
<span>Your button</span>
then you can use the css to set the image background.
.home{display:block; height:20px; width:40px; background:url(image.gif);}
and your also gonna need to hide the text in the span.
.home span{display:none;}
Theres no harm in using simple text either, most of the time its personal preference.
Just leave ou the .home span{display:none;} and replace it with something to centre the text in the button.
As mentioned in another answer its also good practice to wrap your images in list items. Might sound wierd at first. But in practice its the best way.
you can put the image as backgroud...
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
In what situations is it more appropriate to use an HTML IMG tag to display an image, as opposed to a CSS background-image, and vice-versa?
Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or usability principles.
Proper uses of IMG
Use IMG if you intend to have
people print your page and you want the image to be included by default.
—JayTee
Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
Pragmatic uses of IMG
Use IMG plus alt attribute if the image
is part of the content such as a logo or diagram or person (real person, not stock photo people).
—sanchothefat
Use IMG if you rely on browser scaling to render an image in proportion to text size.
Use IMG
for multiple overlay images in IE6.
Use IMG with a z-index in order
to stretch a background image to fill its entire window.Note, this is no longer true with CSS3 background-size; see #6 below.
Using img instead of background-image can dramatically improve performance of animations over a background.
When to use CSS background-image
Use CSS background images if the
image is not part of the content.
—sanchothefat
Use CSS background images when
doing image-replacement of text eg. paragraphs/headers.
—sanchothefat
Use background-image if you intend to have
people print your page and you do not want the image to be included by default.
—JayTee
Use background-image if you need to improve download times, as
with CSS sprites.
Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
Use background-image with background-size:cover in order to stretch a background image to fill its entire window.
It's a black and white decision to me. If the image is part of the content such as a logo or diagram or person (real person, not stock photo people) then use the <img /> tag plus alt attribute. For everything else there's CSS background images.
The other time to use CSS background images is when doing image-replacement of text eg. paragraphs/headers.
I'm surprised no one's mentioned this yet: CSS transitions.
You can natively transition a div's background image:
#some_div {
background-image:url(image_1.jpg);
-webkit-transition:background-image 0.5s;
/* Other vendor-prefixed transition properties */
transition:background-image 0.5s;
}
#some_div:hover {
background-image:url(image_2.jpg);
}
This saves any kind of JavaScript or jQuery animation to fade an <img/>'s src.
More information about transitions on MDN.
Above answers considers only Design aspect . I am listing it in SEO aspects.
When to use <img />
When Your Image need to be indexed by search engine
If it has relation to content, including cards (click areas), but not related to design. Design is probably the most difficult thing to parse here because so it's all design right. I would say perhaps functional design (Cards, thumbnails, profile images, things you can click) vs Aesthetic design which is mostly used for sites appeal.
List item
If your image is not too small ( not iconic images ).
Images where you can add alt and title attribute.
Images from a webpage which you want to print using print media css
When to use CSS background-image
Images Purely Used to Design.
No Relation With Content.
Small Images which we can play with CSS3.
Repeating Images ( In blog author icon , date icon will be repeated for each article etc.,).
As i will use them based on these reasons. These are Good practices of Search Engine Optimization of Images.
Browsers aren't always set to print background images by default; if you intend to have people print your page :)
If you have your CSS in an external file, then it's often convenient to display an image that's used frequently across the site (such as a header image) as a background image, because then you have the flexibility to change the image later.
For example, say you have the following HTML:
<div id="headerImage"></div>
...and CSS:
#headerImage {
width: 200px;
height: 100px;
background: url(Images/headerImage.png) no-repeat;
}
A few days later, you change the location of the image. All you have to do is update the CSS:
#headerImage {
width: 200px;
height: 100px;
background: url(../resources/images/headerImage.png) no-repeat;
}
Otherwise, you'd have to update the src attribute of the appropriate <img> tag in every HTML file (assuming you're not using a server-side scripting language or CMS to automate the process).
Also background images are useful if you don't want the user to be able to save the image (although I haven't ever needed to do this).
About the same as sanchothefat's answer, but from a different aspect. I always ask myself: if I would completely remove the stylesheets from the website, do the remaining elements only belong to the content? If so, I did my job well.
Some answers overcomplicate the scenario here. This is a dead simple situation.
Just answer to this question every time you'd like to place an image:
Is this part of the content or part of the design?
If you can't answer this, you probably don't know what you're doing or what you want to do!
Also, DO NOT consider beside the two technique, just because you'd wish to be "printer friendly" or not. Also DO NOT hide content from a SEO point of view with CSS. If you find yourself managing your content in CSS files, you shot yourself in the leg. This is just a trivial decision of what is content or not. Every other aspect should be ignored.
I would add another two arguments:
An img tag is good if you need to resize the image. E.g. if the original image is 100px by 100 px, and you want it to be 80px by 80px, you can set the CSS width and height of the img tag. I don't know of any good way to do this using background-image. EDIT: This can now also be done with a background-image, using the background-size CSS3 attribute.
Using background-image is good when you need to dynamically switch between sprites. E.g. if you have a button image, and you want a separate image displayed when the cursor is hovering over the element, you can use a background image containing both the normal and hover sprites, and dynamically change the background-position.
One more benefit from using the <IMG> tag is related to SEO - i.e. you can provide additional information about the image in the ALT attribute of the image tag, while there's no way to provide such information when specifying the image through CSS and in that case only the image file name may be indexed by search engines. The ALT attribute definitely gives the <IMG> tag SEO advantage over the CSS approach. That's why according to me it is better to specify the images you want to rank well in the image search results (e.g. Google Image Search) using the <IMG> tag.
Foreground = img.
Background = CSS background.
Use background images only when necessary e.g. containers with image that tiles.
One of the major PROS by using IMAGES is that it is better for SEO.
Using a background image, you need to absolutely specify the dimensions. This can be a significant problem if you don't actually know them in advance or cannot determine them.
A big problem with <img /> is overlays. What if I want an CSS inner shadow on my image (box-shadow:inset 0 0 5px rgb(0,0,0,.5))? In this case, since <img /> can't have child elements, you need to use positioning and add empty elements which equates to useless markup.
In conclusion, it's quite situational.
A couple of other scenarios where background-image should be used:
When you want the image to change when the mouse is hovered upon it.
When you want to add rounded corners to the image. If you use img, the image leaks out of the rounded corners.
Use CSS background-image in a case of multiple skins or versions of design. Javascript can be used to dynamically change a class of an element, which will force it to render a different image. With an IMG tag, it may be more tricky.
Here's a technical consideration: will the image be generated dynamically? It tends to be a lot easier to generate the <img> tag in HTML than to try to dynamically edit a CSS property.
What about the size of the image? If I use the img tag, the browser scales the image. If I use css background, the browser just cuts a chunk from the larger image.
img is an html tag for a reason, therefore it should be used. For referencing or to illustrate things, people e.g: in articles.
Also if the image has a meaning or has to be clickable an img is better than a css background. For all other situation, I think, a css background can be used.
Although, it is a subject that needs to be discussed over and over.
Web Student from Paris, France
In regards to animating images using CSS TranslateX/Y (The proper way to animate html) - If you do a Chrome Timeline recording of CSS background-images being animated vs IMG tags being animated you will see the paint times are drastically shorter for the CSS background-images.
There's another reason! If you have a responsive design and want to split usage of low, medium, and high-res images for devices through media queries, you should use backgrounds as well.
Also, i have a gallery section which has inconsistent picture sizes so even though those images are obviously considered content, I use background images and center them in divs with a set size. This is similar to what facebook does in their albums..
Just a small one to add, you should use the img tag if you want users to be able to 'right click' and 'save-image'/'save-picture', so if you intend to provide the image as a resource for others.
Using background image will (as far as I'm aware on most browsers) disable the option to save the image directly.
A small input,
I have had problems with responsive images slowing down the rendering on iphone for up to a minute, even with small images:
<!-- Was super slow -->
<div class="stuff">
<img src=".." width="100%" />
</div>
But when switching to using background images the problem went away, this is only viable if targeting newer browsers.
HTML is for content and CSS is for design. Is the image necessary and does it need to be picked up by screen readers? If the answer is yes, then put the image in the HTML. If it is purely for styling, then you can use the background-image property in CSS to inject the image. Just as a lot of people here have already mentioned, you can then use a pseudo element on the image if you like.
IMG load first because the src is in the html file itself whereas in the case of background-image the source is mentioned in stylesheet so the image loads after the stylesheet loaded, delaying the loading of the webpage.
Another background-image PRO: Background-images for <ul>/<ol> lists.
Use background images if they are part of the overall-design and are repeated on multiple pages. Preferably in background sprite form for optimization.
Use tags for all images that are not part of the overall design, and are most likely placed once, like specific images for articles, people, and important images that deserve to be added to google images.
** The only repeated image that I enclose in a <img> tag is the site/company logo. Because people tend to click it to go to the homepage, thus you wrap it with an <a> tag.
Also note that most search engine spiders don't index CSS background images therefore the background images will be ignored and you won't be able to get any traffic from search engines (no SEO benefit in short).
Where as all images defined with tags are indexed (unless manually excluded) and can bring in traffic from search engines if their title/alt attributes and filenames are optimized properly (w.r.t some keyword).
You can use IMG tags if you want the images to be fluid and scale to different screen sizes. For me these images are mostly part of the content. For most elements that are not part of the content, I use CSS sprites to keep the download size minimal unless I really want to animate icons etc.
I use image instead of background-image when i want to make them 100% stretchable which supported in most browsers.
If you want to add an image only for the special content on the page or for only one page the you should use IMG tag and if you want to put image on more than one pages then you should use CSS Background Image.