I have looked everywhere on the web (including here) for an answer to this issue. I spent 4 hours trying different found "solutions" yesterday, to no avail. I only post here when I have exhaustively researched and tried everything else, including all the answers I find on Stack Exchange.
I'm using Bootstrap Bootstrap v3.3.4
I have a website with a full page background image. When I resize the window in Firefox or another desktop browser, even all the way down to the smallest size, the background image (a brick wall) resizes and renders perfectly.
However, when I pull up the site on my cell phone (an LG) or my iPad 5, the background is HUGE and only shows a partial, VERY blurry portion of the background. (I.e., one small portion of ONE VERY BLURRY BRICK!)
Here is the code in my CSS file:
body {
background: url(../img/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
I also tried adding this, per a "solution" found on the web. It changed nothing.
body:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url(../img/bg-mobile.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I tried creating a 768px wide image and inserting the following:
@media screen and (max-width:768px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
/* Location of the image */
background: url(../img/bg-mobile.jpg);
} }
Notice the url points to a file specifically created for mobile.
Still no dice.
I am deeply frustrated and flummoxed. Please keep in mind that I am a self-taught programmer, so actual code examples/clear explanations are GREATLY appreciated.
Thank you guys from the bottom of my heart. :)
