https://hamzicabdulah.github.io/personal-portfolio/
Everything works just fine on any browser when I open the page on my PC/laptop — the page is responsive, all the background images appear on any screen size... But, when I open the page on my mobile phone, the background images for the first two section do not appear. I don't know how to fix this issue. I've tried removing the following code for mobile size:
background-attachment: fixed;
... But that didn't change anything at all. Can anyone help me with this?
Okay, so basically, I figured the answer myself, so I'll post it here, so that anyone with a similar problem can find this helpful. I actually just figured out that linear-gradient obviously can't work on certain mobile devices and therefore using css code like this one...
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), url('http://www.inmeteo.net/blog/wp-content/uploads/2016/03/toscana.jpg') center;
... for mobile view makes the background image invisible on some devices (like for example, my Samsung Galaxy S3). Therefore, I just removed the linear-gradient for mobile view and it works fine now...
Related
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
On this website, there are many full width parallax images which display on desktop. However when viewed from a mobile device, such as an iPhone 6 - Safari / Firefox, they're nowhere to be seen? How can this be fixed?
background-attachment: fixed on section.parallax_section_holder, is causing the issue for you. Reset the css property in media query may the fix the problem for you.
If you don't require parallax effect on small screen you reset it to background-attachment: initial.
This might help you, have a read.
Note: Its always a good practice to post your code or Jsfiddle.
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)
...
}
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 large SVG graphic for the background of my site. See an example here:
http://jsfiddle.net/aAwgU/4/embedded/result/
body{
background: url(http://www.thedavidcummings.com/images/html.svg) no-repeat fixed right;
background-size: auto 100%;
}
It works fine in Chrome and Firefox, but in Safari navigating the page and resizing the browser page is extremely slow, and the page completely crashes on my iPhone. Is this a bug in webkit?
Is there a way to make my .svg more WebKit-friendly? Or should I just use an image? SVG is ideal because of the small file size (only 7k.) The smallest .png equivalent I was able to make was 150k. I want to keep the dimensions big so that the image scales well.
You can optimize the SVG using something like https://github.com/svg/svgo (node), it will reduce filesize and sometimes improve rendering times.
Saddly, Safari is awful slow with SVGs now.