CreativeSheep

Can the moderators delete this post - Problem is solved

I've got a dilemma, when you tap on mobile the paper pile image should pop up, apparently there is a z-index issue. When you inspect element on the paper pile which is .imgbox using Chrome, it selects #inner instead, it's parent. All widths above 1024 have no problems. I'm at a loss, what could be the problem ?

No warning, nothing, I would have never thought the user is joined with the bookmarks etc !

Tried that I tried this, didn't work, although I'll try again

I'm using Citrio, Citrio is based on Chromium !

What do you mean ?

I accidentally deleted a user from Chrome (Citrio) all my bookmarks are gone. I have since created two new users, are there any recent changes stored offline somewhere on the system I can recover ?

I know the CSS property: image rendering is not widely adapted by most browser including up to present versions. Pixelated and crisp-edges are the only two values which are compatible with current browser, IE you must use a vendor prefix and another property. My question is; is there a noticeable difference between the browsers default smooth interpolation and pixelated specifically ? I have image-rendering set to pixelated for an image, maybe there is a slight increase in quality, over the default or auto !

I solved it, Chrome was playing magic tricks !

What line are you reading, I have a background image for the base styles that is 320px in width ?

It works well, except for my base styles, I did the same math, obviously for the base image and the results are and over stretched image, the only image causing me problems

I made a mistake, I was applying the math to the container, instead of the image. Unfortunately, the image does not scale proportionally, even with the padding-bottom put into the MQ for the element. For example, on an iPhone 5, at portrait, the image is cropped to the right, changing the mode to landscape and the image is scaled beyond what it should be. The image is 502x85 (width, height) * 100 = 16.9322%. ???

No MQ involved, but the page relies heavily on MQ, is there another method because of the use of MQ ? What do you mean ? I understand the aspect ratio, but where you get those numbers from based on ?

There is a conundrum here. You take the height and divide it by the width then multiple it by 100. If the width is in percentages, you take, for example, the MQ width and do the math there so if it's portrait mode of an iPhone5 that is, 568/320*100 that gives 177.5% when I enter that value into the container which has a background image applied the image is stretched outrageously vertically. Is this math and setup not correct ?

Isn't the image in the container, therefore you have to apply it to the container ! Look at your example; <div> is the container, and within the container is the background-image, correct ?

If I take a iPhone5 MQ which is 320x568 do the math 568/320*100 the result is 177.5%, you know what happens to my background image in the container, it stretches abnormally ?

We are talking about fixed widths correct ?

What if the width is expressed in percentages ? Also read this regarding multiple CSS background images and setting one to default and the other to cover.

I followed the math, the math didn't work ! Tinkering with values made some progress, except with the case of multiple background images. If I want one background image to have the size property set to cover, and the other background image left alone, which is auto; {background-size: auto,cover;} unfortunately, that is not working

Is there a formula that you can do to verify if your image has a 1:1 aspect ratio ? When I do the math as described on the link my background image stretches outrageously, there must be a formula to get everything perfect, rather to see if it will turn out perfect ?

I need to make a responsive backgroundimage. The property {background-image:cover} works well, except the aspect ratio of the image is lost, in my case, the imagelooks fine horizontally when it's width it's larger then the images width, but the vertical aspect ratio of the image is stretched and the image shifts a little in it's container. I found this link which appears to have a good solution to the problem, except when it's put into use; it stretches the image all wild and crazy

Computers were not that expensive in 2000, computers have seen the least inflation then food in the world. High end performance computers today are still pricy.

I tested on FireFox And I should have made the image a transparent PNG . Thanks

The image used is not the greatest but it should atleast touch upon the effect, we know why it's not working ?

-webkit-mask-image:url(""); should work, how come it's not ?