I have a website http://basement-recordings.com/ built with wordpress and I have a problem with the background image: on iOs, on some of the pages (for example Entertainment & Events) the background image looks blurry, unclear. This happens on both Chrome and Safari.
I have looked for a solution but I cannot seem to find anything. Can anyone please help me?
iOS has an issue preventing background-position: fixed from being used with background-size: cover
See http://caniuse.com/#search=background-attach *Known Issues and
Background size on iOS
Related
I'm working on a website and it's nearly finished, I've solved a lot of problems using this StackOverflow, so thank you very much. But I failed to find a solution to this problem. So the problem is that the background image of the intro website won't show on iPhone devices (Desktop, Samsung, Android etc. works). So does anyone know why this problem occurs only on iPhone devices and how to solve it?
Website link: http://cubedesign.ba/
The code is long, so I don't know what to really send.
I have built a Meteor App/Website and I am trying to have a responsive fullscreen background image at the top of this page (https://www.conducate.com).
It works as expected in the Chrome Developer tools as well as in the Safari Responsive Design mode, but when I deploy the page and look at it on my mobile, it seems to zoom into the top part of the image, and does not resize it as expected from the dev-tools. As a result, there is just a grey blur to see.
Has any of you come across this problem before? It is hard to debug, since it works correctly in all the developer tools, but not at all when actually viewed on a mobile device.
Below is a link to an image with screenshots, one from my mobile (iPhone 6s, safari browser) and the other from the safari responsive design mode on my mac. Unfortunately, I am unable to post an image due to lack of reputation, so I can just post the link - I am still a newbie here...
https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png
Any help is much appreciated!
After some searching for iOS specific issues, I finally came across the solution to the problem by looking at some other examples.
It turns out, that most browsers understand the css line
.container{
background: url(http://www.link-to-image.jpg)
...
}
This is not the case for iOS, here you need to specifically state that it is an image, that is used for a background.
.container{
background-image: url(http://www.link-to-image.jpg)
...
}
This is the link to the website I am doing HTML/CSS of
http://test33-jg-us-mb-en.apsww.net/index.php/ex-team-22/jewelry-affiliate-program
on every mobile browser it works fine but in firefox mobile the background image in tabs do not show how it is in actual and also the alignment on Join now button is not correct. Can anyone please help me out with that how I can fix the background issue and how I can use exceptions for firefox mobile to set the join now alignment. Thanks in advance
The site is static for both pc and mobile resolution both.
Regards,
IMMAD
Help us reproduce the background-image error.
For the Join Now alignment, add style margin: 0px auto; before your margin-bottom style.
I am making a website in which everything is fine on almost all major browsers but somehow Mac Safari is showing a different css layout. like wrong background ( black-gray to white) wrong Nav-link color (white to default blue)
as I don't have Mac myself. I am not able to identify or test anything regarding this.
can you look at it & tell me if there is a solution or workaround it. Website
Thanks in advance!
Looking at it on my iMac (OSX 10.8.5, Safari 6.1.2), I see the dark gray background and white nav-link color. Here's a screenshot.
I would suggest giving an emulator like BrowserStack a try if you don't have access to a mac. (I think there's a free trial account option.) I will also parrot Lokesh's comment to (nicely) remind your client to clear his cache and try again.
Also, I did notice you have a horizontal scrollbar no matter the browser window's width. I believe it is from the width: 100%; on your footer. Try width: auto; instead.
Hope that helps. Good luck with your client!
I am stumped as to why my styling is so distorted when I use firefox.
The website is http://shehunter.joshmu.com
Could it be related to the fact this site at the moment is being worked on via a public dropbox url?
Font, positioning and background transparency seem to all be wrong.
Works fine in chrome and safari.
EDIT-
when i click on the info tab the text is displaced far to the left...
in the 'music' section there is a transparent blue background appearing...
UPDATE-
info section solved with position:absolute cheers #sarcastyx!
however still have problems in firefox with it accepting google web font and background transparency problem in the music section of the site.
Thanks for all the help everybody!
Looks good in firefox for me. Screenshot: