I am currently working on a website and everything works and functions fine except the background image on mobile. I have quite literally tried everything and it will not show on mobile even though it shows just fine on my laptop. The phone I have is an iPhone 6s and it just doesn't want to show. I have used the same CSS code in other projects and it works just fine but it won't currently.
I have done some testing and the issue seems to be the background-position: cover. But what is a way around this without making the image look bad. Also when I click the mobile nav button to open the menu... you can see the image show in the back which is extremely strange...
Does anybody have any possible solutions to this? It's extremely frustrating.
Here is the link to the site: http://mujomusic.net/WDV351/Konstrukt/index.php
and the code:
height: 100vh;
background-image: url('images/main.jpg');
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
Would u give a screenshot ,because it is working perfectly fine on mine.
Could be cache Issue.
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
I'm very new to HTML/CSS and trying to practice by making some basic sites.
The desktop version of my site looks good, and when I inspect it in Chrome the mobile version looks good, but when I actually use a mobile device, the images aren't stretching to resize for the viewport. By trying to fix it I keep breaking it further, so I'd really appreciate some help.
I tried to search for this problem but the solutions I found told me to use background-size: cover which is what I'm already doing. I tried to change the body to body {width: 100vw; height: 100vh;} and also the advice here about taking out the height: 90vh and leaving background cover and width, but that reduced it to the size of the div line, which is too small. I feel that this solution here with media queries is close but I can't figure it out.
Here is the repo and here is the GitHub page where you can view it. Thank you in advance!
Desktop:
Inspector:
Mobile:
try to put background-position:center center;
anyway be careful with a fixed background, it causes huge problems with mobile devices performance
I have a background image with background-attachment: fixed, which works fine in all browsers in localhost but does not show in chrome on the server.
.bg-contact{
background-image: url(../images/bg-contact.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
background-size: cover;
}
Please help
Try clearing the cache on that Chrome.
There's also an extraneous { which maybe Chrome is sensitive to.
Couple more things: try adding ' ' as in ('../images/bg-contact.jpg'), and check AdBlock in Chrome.
Check the file extensions for the background, remember that capital letters make difference for example on your PC JPG and jpg is the same thing but on the server those are completely 2 different pictures.
Also include link to the website or add the code of it if you have problems with it.
-----New Idea For Answer------
You have:
background-image:url(../images/bg-contact.jpg);
Make it with a full path to the file
Use Chrome Developer Tools from your Chrome Browser to get to inspect the element where picture should be displayed, then check if the value of background-image is:
-Not crossed: then is should be working and it is not a problem with a code but with the browser.
-It is crossed: Then your background property is not working, you can add !important to it to get a quick fix but you should find the reason behind it and fix it asap.
Turned to be path issue, especially for Wordpress. When one is setting
background-image: url('bg_1.jpg');
in his themes/myTheme Folder, the browser is loading from http://127.0.0.1:80/wordpress/bg_1.jpg
, while the file is actualy in C:\xampp\htdocs\wordpress\wp-content\themes\myTheme
That is why one should say:
background-image: url('res/bg_1.jpg');
and make new folder wordpress/res in which bg_1.jpg will reside.
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...
Every now and then, the background image on my website appears randomly on the sides of the page as seen here: http://i.imgur.com/0HFJF9w.png
It may happen to you too, but if it does, a refresh clears it: http://centralsirescoop.com/proven-sires/harrison/
The couple of lines of code regarding the background (found in body) is as follows:
background-color: #c8dbfb;
background-image: url(images/clouds.jpg), url(images/grass.jpg);
background-repeat: repeat-x, repeat-x;
background-position: 0% 0%, 0% 100%;
Thank you.
EDIT:
Browsing on Window 7, Chrome browser v28
EDIT2:
Error does not seem to occur in Internet Explorer 10
There are some rendering issues with Chrome that I know of, and have experienced multiple times myself. Surprisingly, my searches have not revealed much info on this... But it is definitely there. Even on my Linux system, as well as Windows system.
Try in Firefox and Opera too if you can. I suspect it is Chrome.