I'm having very strange problem . I'm making one page website and have different background image for different section and background attachment is fixed. On page reload it show the background image but when I scroll down or up and go back to the section its not showing background image. if I select the page with Ctrl+a then it shows but background image but not fixed anymore. It just happening in chrome. I tried to to find the solution on google and here but could not find it.
Thanks in advance.
Related
I am creating a website the my nav bar which is two images is not loading. The two images flash up in their right places with a white background before the rest of the website loads.
See code below
https://wtools.io/paste-code/bJ9n
https://wtools.io/paste-code/bJ9m
Image I want loading in nav is drum stick
I tried Z axis.
The image loads when in a different div but it’s not in the right place and the website isn’t as responsive with it.
Im building my first react page and everything is all fun and exciting, but on mobile (ios in my case) There seems to be an underlying white background that appears on page reload (flashing) and when i drag the page too far. Its also visible behind the address bar.
I have checked various other Websites and usually on dark pages the addressbar is a kind of translucent black.
How do i achieve this?
I have already changed the background color in my body element etc. (hopefully not in the wrong place)
We are currently copying airbnb.
The top image does not disappear even if I check the responsive view on Mac, but the image disappears when I check it on iPhone.
Tried: I used background-size:cover and tried height:0 and padding-top:60%.
If you know how to fix it, please tell us.
So i put up a video on our page http://playgrounddistribution.com
It worked like a charm, until i scrolled down and saw that the image behind the "ABOUT US" section doesn't show until i select it with cmd+a or resize the window. This is rather annoying because the text is white so if the background isn't there you can't read it.
At first i thought the video loaded before the image, so i tried only loading metadata, but that didn't solve the problem. Then i figured it must be the cache, but disabling the cache didn't solve it either. Then i noticed selecting it or resizing the window did the trick, but that isn't optimal for our customers. It only seems to occur in Chrome. Have any of you experienced this problem before or should i include the css?
Screenshots here: http://imgur.com/a/xARmi
Thanks in advance!
I am having issues with overlaying divs with transparency and being able to click on both layers in Chrome (but not IE).
In my search for answers I found the following example to illustrate:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
The source for that page is commented to explain about transparency.
If I view this page in IE I can highlight (ie interact) both the text in the box("Here is a div with...") AND the text at the top ("This DIV is overlayed on..."). However, when I open the same page in Chrome, I cannot select the text at the top.
This highlights the issue I am having in using iframes which contains links, but I also want the page containing the iframe to also allow links to be clicked. The transparanecy works in Chrome in as much as I can see both sets of links, but can only click those on the top layer (ie the iframe). The top iframe allows me to see what is behind but not interact with it.
I know about pointer-events:none however, that then stops the links on the iframe. I can basically get it working on the background html OR the overlying iframe but not both!
Hope this all makes sense and thanks in advance.
It seems that the solution specifically for chrome is using the css:
div#parent, div#parent div {pointer-events:none;}
meaning Div, and all children div as well should enable clicking through.
I found the solution here:
Click through transparency in Chrome