i ran across something i have never seen before. the page has a top div and a footer div. both with an image as background. mirrored the image as well via photoshop.
now the weird thing is, it shows a different color. see http://www.hp-consultants.nl
when i tilt my screen towards me the colors become the same. even in photoshop i notice the difference. does anyone know what is wrong?
ive tried using regular CSS colors instead of a background image, to no effect. even the same image shows a difference
thanks!
There's nothing wrong with your page. Using Photohop's colour picker confirms that the colours are both indeed exactly the same.
The effect probably happens because you're sitting in front of a TFT monitor, whose display is sensitive to the angle you look at it from.
Some useful background information:
LCD Test: Viewing angle
Wikipedia on TFT LCDs:
TN displays suffer from limited viewing angles, especially in the vertical direction. Colors will shift when viewed off-perpendicular. In the vertical direction, colors will shift so much that they will invert past a certain angle.
The colours are exactly the same a quick check with any image editor will tell you that. TFT Monitors can do strange things to colours depending on the viewing angle.
Also our eyes and brains are really not as good at determining colour as we think. Have you ever seen this optical illusion.
The Squares Labeled A & B are the same colour
may be is the orientation of the led, that brights differently. have you tried to get the browser windows to the bottom of the screen so you see the header where the footer is.
Try this:
open 2 browser instances
resize the window of each to view only the header or the footer (one for each)
place the footer window at the top and the header window at the top
switch window places
in my case I see the bottom one always more clear.
Hope this helps you
Related
Apologies if this has been answered before, I didn't see anything that matched it perfectly. I've found a ton of resources for sliders that snap to the edge of the current frame, but not my requirements below.
What is the best way to build a simple webpage that has the following:
A top layer, that fills the entire screen, with a 'hole' showing a background layer.
The background layer must be draggable/swipeable horizontally.
The background layer is many time wider than the viewport, so I don't want any snapping until the edges of the image are reached.
I made a little gif mockup to try to show what I'm on about.
Thanks for any help!
I'm currently designing a site and I'm trying to use a patterned background over two s... The issue is that everytime the window is resized, or a different resolution is used to my development one, the patterns don't align. Been looking for solutions everywhere... can't find anything. Here's a screenshot of what I mean:
http://img801.imageshack.us/img801/1056/33l3.jpg
I know you can set the background position, but that doesn't help, because when you resize the window again, because the main section and the rectangle on the top are different divs, the background moves again. Is this possible to fix? Or do I need to consider something else entirely?
I have begun developing a webpage, just playing around, and I noticed an issue. I code with my live site on one half of my screen, with my editor on the other. It was all going fine until I extended my web browser fully and noticed that only part of my site was re sizing how I wanted it too. Sadly my site is not live, however I do have a link to the code: http://pastebin.com/yeWzfsBW
In theory, the image (logo) doesn't scale down when I resize the window, it stays the same size no matter what. I attempted to use percentages instead of pixel width/heights however it seemed to have no effect. I will try to pop this live so you can see what I mean exactly.
Fullsized browser: http://imageshack.us/photo/my-images/585/fullsizen.jpg/
windowed mode: imageshack.us/photo/my-images/42/resizedkl.jpg/ (please put in the http:// I couldn't link more then two links in this post)
Hopefully you can see what I mean, i'd like the logo to scale, like the #info css section.
Thanks!
no need to wrap the image in a div.
set width & height in css.
set max width and max height.
there is a challenge with keeping the aspect ratio on the image.
to get started, below is an example using your code. after looking at this you may provide feedback about exactly you are trying to achieve.
http://codepen.io/seraphzz/pen/thGkI
I am using a background image and repeating it. When it hits the second row, it seems to lose opacity. Funky! I have never seen this kind of behavior before. I have made lots of little tweaks but nothing seems to fix it.
What would cause this? How can I fix it?
You can see it here: http://movies.evikjames.com/
(If you are reading this an hour after this post, don't expect to see the issue.)
This is an optical illusion. Take a screenshot of the page, open it in an image editing program, select the top of one of the images in the bottom row, and drag it up towards the top of the image. You will see that the top row is indeed the same color/opacity as the bottom row.
I believe the section of the Wikipedia article on optical illusions titled "Colour and brightness constancies" has information on similar illusions.
Use color picker. Is just an optical illusion :) when different shades of grey meet nearby.
I've been searching for hours on a solution for this. The issue doesn't arise on the desktop however I had seen it on occasion with unpredictability in IE9 & FF4. essentially I am using a single massive image sprite and using it through my stylesheet. For some reason, any element with a shadow shows a gap or break below it. I've left plenty of space beneath this particular section to not be running into another section of the image.
I've tried adjusting the height of the areas and that didn't seem to matter. The line gap/border still appear under the header and under the shadow of the content area.
Also noticed this occurs when zoomed in at various levels in Safari.
Please see http://www.kintera.org/site/lookup.asp?c=dlKQK4NOJiI8F
Your sprite has a gap or a line removed. Looks as though this could be potentially causing the problem:
Since the background colour of your site is grey, it is giving the appearance of a line where as it is actually background colour coming through the transparent PNG.