Styjun

Arithmetics in LuaLaTeX

When can a polynomial be written as a polynomial function of another polynomial?

Why did Fury respond that way?

Is Error correction and detection can be done with out adding extra bits?

Should I have shared a document with a former employee?

Did Hitler say this quote about homeschooling?

How slow can a car engine run?

Why won't some unicode characters print to my terminal?

Practical example in using (homotopy) type theory

How did Jayne know when to shoot?

Is it possible to breed neanderthals through selective breeding?

How much water can a ship take on before sinking?

Inscriptio Labyrinthica

In this iconic lunar orbit rendezvous photo of John Houbolt, why do arrows #5 and #6 point the "wrong" way?

How fast does a character need to move to be effectively invisible?

"Je suis petite, moi?", purpose of the "moi"?

Change Opacity of Style

Amira L'Akum not on Shabbat

When designing an adventure, how can I ensure a continuous player experience in a setting that's likely to favor TPKs?

Why is the Intel 8086 CPU called a 16-bit CPU?

Operation Unzalgo

How can electric field be defined as force per charge, if the charge makes its own, singular electric field?

What causes a rotating object to rotate forever without external force—inertia, or something else?

Why jet engines sound louder on the ground than inside the aircraft?

Background image is not correct on the mobile

Vertically align text next to an image?When to use IMG vs. CSS background-image?How do I give text or an image a transparent background using CSS?Stretch and scale a CSS image in the background - with CSS onlySet size on background image with CSS?IE6 background misalignedHow do I combine a background-image and CSS3 gradient on the same element?How repeat background image in div longer then page length?CSS position:fixed is working for the header but not for the footerHaving issues with CSS on mobile displaying background image in portrait format

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

-1

My background image on the mobile becomes very fuzzy.

But on DevTools is Correct.

Is so weird, how to fix it?

.contact
 padding: 80px 30px
 color: #fff
 background: #151515 url('../src/assets/images/about.jpg') no-repeat fixed left bottom
 min-height: 100%
 background-size: cover
 position: relative

css css3

share|improve this question

edited Mar 26 at 10:27

Thatkookooguy

3,2651818 silver badges3636 bronze badges

asked Mar 26 at 9:53

qweqweqweqwe

2655 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can do debbug from your mobile. Connect your phone to your pc: developers.google.com/web/tools/chrome-devtools/…
  
  – Filipa Simão
  Mar 26 at 10:09
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What mobile in particular? Running Safari 6 perhaps? See caniuse.com/#search=background-size, note #2 then.
  
  – 04FS
  Mar 26 at 10:46
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Or the known issues, “iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed;”
  
  – 04FS
  Mar 26 at 10:47
  

  
  
  
  

add a comment | 

-1

My background image on the mobile becomes very fuzzy.

But on DevTools is Correct.

Is so weird, how to fix it?

.contact
 padding: 80px 30px
 color: #fff
 background: #151515 url('../src/assets/images/about.jpg') no-repeat fixed left bottom
 min-height: 100%
 background-size: cover
 position: relative

css css3

share|improve this question

edited Mar 26 at 10:27

Thatkookooguy

3,2651818 silver badges3636 bronze badges

asked Mar 26 at 9:53

qweqweqweqwe

2655 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can do debbug from your mobile. Connect your phone to your pc: developers.google.com/web/tools/chrome-devtools/…
  
  – Filipa Simão
  Mar 26 at 10:09
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What mobile in particular? Running Safari 6 perhaps? See caniuse.com/#search=background-size, note #2 then.
  
  – 04FS
  Mar 26 at 10:46
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Or the known issues, “iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed;”
  
  – 04FS
  Mar 26 at 10:47
  

  
  
  
  

add a comment | 

My background image on the mobile becomes very fuzzy.

But on DevTools is Correct.

Is so weird, how to fix it?

.contact
 padding: 80px 30px
 color: #fff
 background: #151515 url('../src/assets/images/about.jpg') no-repeat fixed left bottom
 min-height: 100%
 background-size: cover
 position: relative

css css3

share|improve this question

edited Mar 26 at 10:27

Thatkookooguy

3,2651818 silver badges3636 bronze badges

asked Mar 26 at 9:53

qweqweqweqwe

2655 bronze badges

.contact
 padding: 80px 30px
 color: #fff
 background: #151515 url('../src/assets/images/about.jpg') no-repeat fixed left bottom
 min-height: 100%
 background-size: cover
 position: relative

share|improve this question

edited Mar 26 at 10:27

Thatkookooguy

3,2651818 silver badges3636 bronze badges

asked Mar 26 at 9:53

qweqweqweqwe

2655 bronze badges

share|improve this question

edited Mar 26 at 10:27

Thatkookooguy

3,2651818 silver badges3636 bronze badges

asked Mar 26 at 9:53

qweqweqweqwe

2655 bronze badges

edited Mar 26 at 10:27

Thatkookooguy

3,2651818 silver badges3636 bronze badges

edited Mar 26 at 10:27

Thatkookooguy

3,2651818 silver badges3636 bronze badges

asked Mar 26 at 9:53

qweqweqweqwe

2655 bronze badges

asked Mar 26 at 9:53

qweqweqweqwe

2655 bronze badges

2 Answers
2

active

oldest

votes

0

Without a code to test I think the issue comes from the fixed attribute: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

If you remove it, it should show the image fitting the viewport and cutting the part that can't display. Since the image is much bigger that the viewport, when you use fixed it will show you that part of the image that fits the current viewport.

So try:

background: #151515 url('../src/assets/images/about.jpg') no-repeat left bottom;

share|improve this answer

answered Mar 26 at 10:18

KustodievKustodiev

122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you want to keep the fixed background on desktop you could use media queries
  
  – Gijs
  Mar 26 at 10:25
  

  
  
  
  

add a comment | 

0

Background image is not correct on the mobile. You css background-size mobile:

background-size: contain;

share|improve this answer

answered Mar 27 at 3:31

Ty PhanTy Phan

1911 bronze badge

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55354168%2fbackground-image-is-not-correct-on-the-mobile%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Without a code to test I think the issue comes from the fixed attribute: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

If you remove it, it should show the image fitting the viewport and cutting the part that can't display. Since the image is much bigger that the viewport, when you use fixed it will show you that part of the image that fits the current viewport.

So try:

background: #151515 url('../src/assets/images/about.jpg') no-repeat left bottom;

share|improve this answer

answered Mar 26 at 10:18

KustodievKustodiev

122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you want to keep the fixed background on desktop you could use media queries
  
  – Gijs
  Mar 26 at 10:25
  

  
  
  
  

add a comment | 

0

Without a code to test I think the issue comes from the fixed attribute: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

If you remove it, it should show the image fitting the viewport and cutting the part that can't display. Since the image is much bigger that the viewport, when you use fixed it will show you that part of the image that fits the current viewport.

So try:

background: #151515 url('../src/assets/images/about.jpg') no-repeat left bottom;

share|improve this answer

answered Mar 26 at 10:18

KustodievKustodiev

122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you want to keep the fixed background on desktop you could use media queries
  
  – Gijs
  Mar 26 at 10:25
  

  
  
  
  

add a comment | 

Without a code to test I think the issue comes from the fixed attribute: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

If you remove it, it should show the image fitting the viewport and cutting the part that can't display. Since the image is much bigger that the viewport, when you use fixed it will show you that part of the image that fits the current viewport.

So try:

background: #151515 url('../src/assets/images/about.jpg') no-repeat left bottom;

share|improve this answer

answered Mar 26 at 10:18

KustodievKustodiev

122 bronze badges

background: #151515 url('../src/assets/images/about.jpg') no-repeat left bottom;

share|improve this answer

answered Mar 26 at 10:18

KustodievKustodiev

122 bronze badges

answered Mar 26 at 10:18

KustodievKustodiev

122 bronze badges

answered Mar 26 at 10:18

KustodievKustodiev

122 bronze badges

0

Background image is not correct on the mobile. You css background-size mobile:

background-size: contain;

share|improve this answer

answered Mar 27 at 3:31

Ty PhanTy Phan

1911 bronze badge

add a comment | 

0

Background image is not correct on the mobile. You css background-size mobile:

background-size: contain;

share|improve this answer

answered Mar 27 at 3:31

Ty PhanTy Phan

1911 bronze badge

add a comment | 

Background image is not correct on the mobile. You css background-size mobile:

background-size: contain;

share|improve this answer

answered Mar 27 at 3:31

Ty PhanTy Phan

1911 bronze badge

background-size: contain;

share|improve this answer

answered Mar 27 at 3:31

Ty PhanTy Phan

1911 bronze badge

answered Mar 27 at 3:31

Ty PhanTy Phan

1911 bronze badge

answered Mar 27 at 3:31

Ty PhanTy Phan

1911 bronze badge