This question already has answers here:
When to use IMG vs. CSS background-image?
(31 answers)
Closed 8 years ago.
Should I use the <img> tag or should I use a div with css background-image?
If you want the image displayed normally on the page, then i would suggest using
img because it can moved positioned to your prefered area alot more accurately, but the background-image should only be used if you want the image to be the background of your page or of an object.
If you need create a kind of tumbs you must use <img> .And for background use background-image.
All browsers not interpreted the css rules in the same way.
Sorry for my english =/
Well, is your image a background image? If so, then use background-image. That is what it is made for, so you should use it.
If not, then use <img>
Background images usually have elements on top of them, such as text, for example.
Images are generally elements of their own, like blocks on the page, such as a <div> for example.
Having said that, there are some "advantages" with using <img> vs. background-image. For example, background-image will disable the users ability to drag and drop the image onto their desktop. This is not to say that they cannot save the image, they can, very easily, this is just one difference between the two.
Related
How do I create a full size background image with no CSS?
I don't care if the background attribute is deprecated or not, I want to use it.
If I use the plain attribute, however, the image is tiled, not scaled.
You can't.
The background attribute you want to use was superseded by CSS before the capability to scale background images was added.
There is no, obsolete or otherwise, HTML-only mechanism for scaling background images.
You can't even fake it with a foreground image because you'd need CSS to position it in the background.
This question already has answers here:
CSS Image size, how to fill, but not stretch?
(18 answers)
Closed 3 years ago.
I want to set some background image size using CSS.
I am able to set the size using the below css codes. I have been reading up on css formatting at w3schools, and also referred to the below stackoverflow post:
background: url([[pix:theme|cat/default]]) no-repeat center bottom;
background-size: 180px 200px;
I have tried all the methods, including contain and cover. However i keep getting the image stretched and blurred. How can I do this without blurring the image? FYI original image size is 128Kb 1210x1643px
Sooo,
You cannot stretch the image without bluring or loosing quality.
I recommend you to have a high quality image and put the image in a kinda matching background-colored div.
Then you can use either media-quires or some JavaScript to keep the image as big as possible.
Also it would be helpful to see some of your code, or have a better description what you are trying to do. :)
Using css3/html5 only, I am trying to have separate and distinct background images line up side by side, not overlaying each other.
In essence I would love to get multiple separate and distinct background images to behave exactly how the tiling of a single background image behaves.
I also would like to achieve this without setting any fixed or specific positions, simply each background image dropped in respects the size of the background image next to it, butts up against it, and so on and so on.
So background images tiling across an element/container as normal, except each individual background image in the tiling can be unique.
Any ideas?
Here is how I understand your question:
I have a few image files
I want to display them side by side
I have one div and I do not want to (or can not) change the HTML I have
" Using CSS3, can
I display those images side by side as backgrounds of my div?"
If this is your question, the answer is no, not as of now. Sorry.
According to this standard specification,
http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4
there is no position value to place background images "after previous" or "floating".
More info on multiple backgrounds and background sizing:
http://www.css3.info/preview/multiple-backgrounds/
https://css-tricks.com/almanac/properties/b/background-size/
You will probably want to look into positionning your gallery, a div containing your img elements as absolute. If you place it before your div, it will appear behind the div and make one img element per image file.
<div style="position:absolute;">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
<div>the div to be backgrounded</div>
foreach img that you want to use in your "background", create a div, and then use the css background-image property to display the image within the borders of the div. in other words, don't put the img tags in the html, link to their source in your css.
without positioning, you will be limited to adding any "foreground" content to the divs with the background images
based on the way you worded your question, this might end up being very time consuming and frustrating for you. maybe consider a different technique with code you can understand? if you start with the basics and learn them thoroughly, the creative techniques will reveal themselves
This question already has answers here:
How to hide elements without having them take space on the page?
(17 answers)
What is the difference between visibility:hidden and display:none?
(21 answers)
Closed 7 years ago.
Okay so I am trying to build a header that I like. I have been using bootstraps header and using my own CSS file to alter parts.
I have increased the size of the header, the colour etc. I have an icon on the left, nav buttons in the middle and social icons on the right. The social icons on the right keep getting in the way when the site is resized so I used the hidden tag to remove them at a certain media size, but even though you can't see them you the site still acts like they are there. Is there a way to solve this?
Here's the thing.
display: none removes the element from the document flow.
visibility: hidden does not remove the element from the document flow.
So, whenever you're trying to hide an element without some weird document flow happening, use display: none;
Try using display:none instead of visibility:hidden.
Instead of visibility:hidden use display:none in the css. On display:none, the site will not act like the tag is there.
I was wondering what is the best practice regarding divs with backgrounds and img tags. I understand that divs with backgrounds can have stuff on top of them and what not, but if its the case with just have an image, which is the preferred method? Maybe a better question is.. are img tags obsolete? When you have an image thats a link should you use an img tag or a div?
Thanks!
Matt Mueller
Div backgrounds should be just that: background images for style. img tags should be for when you're displaying an actual image as an image itself, say you are showing a picture of something. you should use an image tag and not a div bg
Think about it as semantic markup:
If it is an "image" on the page, as far as the meaning of the page, use the img tag.
If it something that is not that significant to the page's meaning, ie. background image, use a background image on any sort of element (not just a div).
This difference really doesn't matter to how the page displays in most browsers, but has a different meaning to those who aren't interpreting the images visually.
Try to imagine how the elements will be interpreted by visually impaired.
There also may be a slightly different behavior by search engines-- I don't know whether search engines will pick up background images for their image search. If you really want the image out there, an img tag is safer.
is the image for layout or content?
if the image is layout related i would use CSS and have it in a div ...if its content related i would have it in an img ...
Hope that helps!
A good way to look at this is to view your site with stylesheets turned off. You'll quickly find out that all the DIV tags with background images do not appear. All of your IMG tag images are right where they should be. I would use DIV tags with background images for all aspects of site design and layout and use IMG tags for everything else.
IMG tags have alt properties and title properties. These are used in place of the image when it doesn't load or in place of the image in text only or screen reader type browsers.
IMG tag is not obsolete. You use it with dynamic images, that come and go from your system.
Background images on divs are useful when you have a static set of images that are part of your design. Sometimes you can merge them into one big image to minimize load time and the number of HTTP requests pro page.