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
Related
I'm getting an image from a url from a Java service. The image size is too big.
How can I decrease it's size using inline css?
Image contains lots of white border from top and bottom. I need to remove that too.
Please remember, that StackOverflow is not made for doing your work. Please try it the next time yourself and google the stuff you want before consulting SO.
Here the first two links if you google css3 cut image, both do more or less the same you want:
CSS Display an Image Resized and Cropped
How to “crop” a rectangular image into a square with CSS?
Anyways, here is a possible solution for you with inline-css:
Place the <img>-Tag with your image in a <div>, which defines the size of the "window", trough which we look at the image (which size remains actually the same).
Here a simple exapmle:
<div style="height:100px; width:150px; overflow:hidden;">
<img src="path/to/your/image" />
</div>
We are using overflow: hidden; here, which says that everything in this box, which is bigger than the box itself, will not being displayed. To adjust the image (because of your white borders), add i.e. style="margin-left: 10px"; to the <img>-Tag. You can also use negative values there.
I want to use HTML and display one large image.
On this large image I then wish to display multiple smaller images, all on different places and sizes.
I would prefer doing this using HTML only.
But, if this is not possible, Javascript or something like that is also an option... :-)
If anybody has any idea using PHP, that would also be great.
I have search the web and StackOverflow, and tried MANY possible solutions, but none of them allowed me to display one big image, and then display multiple other images on top of this big image.
Any help would be greatly appreciated.
Kind regards,
Michael
you can use a container div which will contain all the smaller images. You can set background of that particular div.
your html as
<div id="container">
</div>
and css as follows:
div#container{
background-image: url("image.jpg");
background-repeat:no-repeat;
height:100%;
}
Two alternatives:
defining the big image in as background using CSS, then you can put onto it whatever html markup you want to. Such backgorund can also be declared for elements like divs, not only for the whole page.
use absolut positioning inside your style definition. That way you can add big and small images to your markup and then position them on top of each other.
No javascript required for this and php has nothing to do with this.
You can position them as I have done in this JSFiddle: http://jsfiddle.net/xxUpk/
The top:-NNNpx is crude, you could use float and many other ways of positioning them. Also look into z-index to layer them.
you cannot overlay an image over another image in pure HTML only, but what you CAN do is re-locate a image's position onto another tag and just move it accordingly with css.
On an HTML page, you can make text flow around images with the CSS property "float". But this will only consider the image's rectangle, not transparent regions in the image. I now have an image that has large areas of full transparency, like for example a circular logo, and would like the text to flow around the circle contour of that logo, not the bounding rectangle. At least on the text-facing side of the image.
I know that CSS is probably not suitable for that task. But is there some workaround, like hidden divs or something that can achieve the same (or a similar) effect? Has somebody already seen such a thing?
I have written a PHP function for that now. It takes the PNG image and generates the <div> elements to make the text flow around another form than the image's rectangle. You can find the code here:
https://unclassified.software/source/shaped-image-flow
Update 2020/2021:
Now there is a CSS property for that: shape-outside. It can be given an image with transparency that will determine the outside shape to let the text flow around. If the visible image is already a PNG, the same image can be used for this CSS property. Additional margin can be added with shape-margin. Both are supported by anything except IE.
Example:
<img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
I really doubt you can do that easily without making a big mess, of tags, JavaScript or both. One way i can think is placing image on larger zindex and positioning div or divs behind it, and text would flow around them. It would be easiest to use smaller rectangle that excludes transparent areas. But then why not just crop/clip the image? Or you can try floating line height divs behind it, but I guess that it will get quite ugly pretty fast. Or you could try placing each line of text in span/div and positioning them manually or with js by calculating approximate shapes to those that are in the image. One other idea, of which I'm not sure: it might be possible do this using svg. But quick search does not show much promise ether.
Any way one more thing to consider, when doing something as experimental and complicated as this, in whatever way you do this, it will most likely be huge pain to make it work well across most browsers.
There is a css property that do just what you want
shape-outside include values of shapes you can use.
https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/
I've noticed that recently sites began to keep images in one big image.
For example google.com
We see a lot of little images on left side. But really is one image:
How these images are cut and shown? (firebug says that it's just element with width and height, but where X and Y position is pointed and how?)
Thanks for reply
with css background the image is moved to the right position. the other part of the image is not shown, because the element with the image as background is exactly as big as the wanted picture part.
try changing the px values in the css in the background part. you should see the image moving
<span style="background-position:-20px -132px" class="micon"></span>
here you see the background-position which is used for this image
This technology is called CSS Sprite. To reduce the http connections number needed to load multiple images. Usually this is done by designer.
This is called "CSS Sprites".
There are a lot of informations on Internet about that. In random order :
Smashing Magazine
CSS Tricks
A List Apart
And many more ...
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.