Question

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. :)

Answer 1

我想推荐的内容（因为它之前发生在我身上）是删除在移动设备上修复的背景附件。它会减小尺寸，看起来会更好。无论如何，我还想推荐使用至少1680像素宽的图像。 Here一个好帖子。

Bootstrap background blurry on mobile and tablet

1 个答案: