background image is not responsive on safari and chrome

Question

my background on my div is not loading properly on iphone when using safari or chrome.it is completely responsive in Mozilla however in safari and chrome it still loads as a 100%width and 100%height. it is the background image of the "sect" div. this is my html

  <div class="sect">


<H1>ALESH</h1>

<h2>This is me</h2>


<FORM METHOD="LINK" ACTION="Artbook.html">
<INPUT TYPE="submit" VALUE="explore my work" class="button1">
</FORM>



</div>

this is my css for pc

 html, body {
 height: 100%;
 background-color: white;
 background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     background-size: cover;

     }

 .sect {
 height: 100%;
 width: 100%;
 background-position: absolute;
 background: url("homepage/photos/b1.jpg") no-repeat center center      scroll;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;

 padding: 0;
 left: 0;
 Right: 0;
  margin: auto;
 top: -2px;
 overflow: hidden;

 }

I do have a separe css file for "max device width: 480px". however nothing works do you please know where could be a mistake ?

f.overflow · Answer 1 · 2018-10-31T13:51:34.113

0

I had something similar: the background image was not beeing displayed correctly on Safari & Safari mobile.

The problem is about

background-attachment: fixed

This is a bit tricky for mobile browsers.
For me I just had to leave that out.

Sometimes event the positioning is not available. So try without.

Maybe helpful for you:
Fixed background on iOS

Hope that helps.

Additional:
Also found this on Stack about that issue.

edited Oct 31 '18 at 13:51

answered Oct 31 '18 at 13:24

f.overflow

298
1
9

hi, thank you, but when I added this tag it stopped working even in Mozilla :( – Ales Waloszek Oct 31 '18 at 13:35
Do not add this line. You ve that line of code in your css for the body. Leave that out. Just use the positioning/size and heights for the div. Otherwise try the answers from the given link – f.overflow Oct 31 '18 at 13:40
so I have just found out that it only shows up wrong on my iPhone 6s my friends iPhone 6s shows it normally. do you know where could be a mistake ? – Ales Waloszek Oct 31 '18 at 16:02

score 0 · Answer 2 · answered Oct 31 '18 at 13:25

0

add this tag in the head tag

<meta name="viewport" content="width=device-width, initial-scale=1">

answered Oct 31 '18 at 13:25

hasen2009

39
3

hi , thank you, but I already do have this tag in the head .. still doesn't work :( – Ales Waloszek Oct 31 '18 at 13:33

background image is not responsive on safari and chrome

2 Answers2