I have a problem with the website of my client. On mobile devices, there is a strange line over the background image (background aligned to bottom, repeat-x). On the desktop, everything looks correct. Has anyone met with such a case?
If I delete the background image, the line also disappears. I tried to change the background from png to jpg, but that did not help.
Thank you in advance for any help.
Link to website
Screenshot from mobile device
Related
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.
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.
The following problem only occurs in Google Chrome. Firefox, Opera, Safari and IE are doing fine.
I have a background on my body:
background: url('../../../views/blog/images/achtergrond.png') 50% 0 fixed repeat-x;
Then when I scroll the page and then reload only a part of the image is displayed:
The full image should look like this:
Note: See the actual website
Background loading is working fine in my chrome as well..
The issue may be you stoped the browser loading while image is loading:
Also do this thing:
Make the size of background image more smaller that will help you to download background more easilty and fast..
Right now your background image size is : 1.73MB
That is so huge...
Do this and background will load more fast and will not cause issue in any browser...
I have a website I have just built. Everything looks reasonable in Mac browsers, but in windows browsers such as IE there seems to be some rendering problems in terms of very thin sketchy white lines in between where the main header image butts joins the surrounding background image, and also between the background image and the surrounding background colour. The images were created in photoshop. I'm probably not explaining it very well, but please take a look at the site. The link is below. Thankyou
http://www.eve-tattoo.com/index.htm
These are img artifacts. Here's the fixed jpg: http://i.imgur.com/O6rtiZ2.jpg
This might not strictly be a coding question, but its related so i'll post it up anyway.
I built a website a year ago and never had any problems. I've recently moved to Mac and I've started noticing small colour related issues between my Macbook and my Pro.
In the header there's a background image aligned top right. The background colour of the header matches the image to show a smooth fade from image to background colour. On my Mac Pro it looks fine, on my Macbook Air the image is slightly darker.
I've attached a screenshot of the background image below. You should see a quite obvious swap from background color to background image.
In photoshop the Hex of the background color and image fade are exactly the same.
Does anyone know why this this happens?
Thanks!
http://i.stack.imgur.com/xZJ6B.png
This is likely to be more to do with your screen rather than a coding issue. You will find that all screens display images slightly differently. In fact, the image you have posted will look different to me now, than it does on either of your machines. Often the difference is slight. This can be to do with different display technologies (LCD, CRT etc) or just the slight differences in manufacture.