Why are the images for the cards component being used as a background instead of the image to fill up the media portion of the card? cant we just use the image tag instead?
I am trying to use the MDL framework to make a tumblr template
but having trouble implementing the card component for the images posts since tumblr uses image tags
please explain why MDL is using images as backgrounds for the card component
Nothing is really holding you back from using the img tag. See this as an example.
However using images as background of divs has some advantages:
Right clicking on the image does not allow you to download the image
You have more flexibility in terms of responsiveness (e.g. by using background-size: cover to fill the div). UPDATE: even though you can set 100% on width/height to adapt the image, cover keeps the aspect ratio and in general provides better results.
Since your image is just a background you don't need to set its position to absolute to let other elements inside the div be positioned over the image (as it is the case in all of MDL examples)
Related
Been using ImageResizer quite effectively on my projects but just ran into an issue.
I have an img element that can have it's src change frequently but I always have the same dimensions of width and height to resize, along with the anchor=middleleft.
However, I don't want to upscale, so sometimes an image that is too small will be placed there and it won't anchor as desired.
Does anyone know a way to allow the anchor to still work when the image is too small to resize it? Or am I just going to have to have a fallback of css left alignment?
Try scale=canvas. This ensures the returned image is exactly the requested size, and adds padding as required.
So I've spotted a few sites lately where the background above the fold always perfectly crops to the viewport. For example - if you look at http://startbootstrap.com/templates/grayscale/ or http://simplesimple.co/currency/ on a mobile, tablet or desktop device the background image always fills the viewport even at different orientations.
It's not as simple as adding a max-width: 100% to the image as this would only fill horizontally. My first thoughts are that it is the art-direction use case, where breakpoints target different crops of the image. It seems like a lot of work to achieve this effect though so I wonder if I'm missing something.
With reference to http://startbootstrap.com/templates/grayscale/, the main banner image has been added as a background image and its background-size property has a value of cover which will stretch the image to fit the screen at any size.
Then there's tricks like setting the main section tag to have a display property set to table which allows its child div (containing title and sub title) to be vertically centered with display: table-cell and vertical-align: middle
Its built on twitter bootstraps framework which has grids and media queries built right in allowing for different images to be added via the background-image property for each screen size
Good day, I have a DIV of fixed width and height on my HTML page. In normal state it should show image A on the background and in hover state it should show image B. I know how to do it using CSS and two image files A and B. Somewhere I saw those two images (A and B) put into a single image file and then they somehow wrote CSS so that in normal state the DIV showed upper half of the image on the background and in a hover state it showed the bottom half of the image. Could you please advise CSS code to achieve this? The DIV has no position set but it is a child of a DIV with relative position. Thank you in advance.
Vojtech
This is called CSS spriting and is an awesome technique that everyone should use.
See this answer for a good overview. What it comes down to is having a DOM element with a defined height and width and using a background image that is larger than that area. Then you can selectively show only portions of that background image using background-position
I want to create a polaroid style image using CSS. However, I'd like to square the image creating a large thumbnail so all images are the same size. I don't know the dimensions of the image beforehand and they are likely different. I was thinking of using a figure tag along with the figcaption to caption the photo. How do I create the thumbnail when the dimensions of the image are unknown. I looked at Create Resizing Thumbnails Using Overflow Property and Creating Thumbnails Using the CSS Clip Property, but neither seemed to account for unknown dimensions.
This Example uses the overflow technique to create a thumbnail by only setting the width, and the height of the image is auto set The container div then hides the excess image beyond what you want to show.
Then by simply using padding and container divs, you can create the white polaroid affect.
This Example lets the image have full 100% width, and find image with the shortest height, and applies this height to all the polaroid images so all the polaroids are the same height. If you aren't really worried about having them each the same height. Then do it this way
It is fairly simple with the figure and figcaption tags, and I was able to recreate the effect without any superfluous markup.
The really essential CSS is:
figure{height:155px; width:125px; overflow:hidden;}
and by applying position:relative; to figure as well, and using some relative positioning on the figcaption, you are able to get a neat Polaroid effect.
Demo
Because you suggested them, I'm sure you know how figure and figcaption are supported across browsers.
Clip only works with rectangles. Overflow will work fine, just define the width of the images in the class.
Example
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)