0

I know, this has been discussed over and over again. but it still seems to be a specific understanding issue on my side. after implementing several bug fixes from here and elsewhere my site is still not working as wished. I got a fixed background-image in the header section of my page. this is working perfectly fine on normal chrome browser. however i cannot get it running on mobile chrome browser

i've got following lines of html:

<body id="page-top">
<!-- Header -->
<header class="masthead bg-head text-white text-center">
    <div class="container">
        <h1 class="text-uppercase mb-0">My Name</h1>
        <img id="header-star" class="img-fluid" src="img/star-light.png" alt="">
    </div>
</header>

aligned with the following lines of css:

body {
    font-family: 'Lato';
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
}

header{
    background-color: #4a4a4a;
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 6rem;
    height:500px;
}

enter image description here

for example i wrote a media query with height of 100% with browser specific commands and so on:

@media (max-width: 576px){
    header{
        height:100%;
        background: url(bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

and then i tried to put y-overflow: scroll; to body and hidden to header enter link description here

Furthermore I tried to put the image into a div like this enter link description here html:

<!-- Header -->
<header class="masthead bg-head text-white text-center">
    <div class="container header">
        <h1 class="text-uppercase mb-0">My Name</h1>
        <img id="header-star" class="img-fluid" src="img/star-light.png" alt="">
    </div>
</header>

css:

.header{
    position: fixed;
    z-index: -1;
    background-color: #4a4a4a;
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 6rem;
    height:500px;
}

whit this technique the picture is gone completely after all enter image description here

somewhere I must missing something, don't I?

J. Doe
  • 459
  • 4
  • 26
  • 1
    1. in your media query you have `background: url(bg.jpg)` - is this the correct link to the image? 2. `height:100%;` probably won't work. Do you want `height:100vh;`? – git-e-up Sep 17 '18 at 16:28
  • no it isn't was missing to xhange the url after several tries to fix it. i would like to have a static height in px – J. Doe Sep 17 '18 at 17:03
  • 1
    Can you recreate the situation in a jsfiddle? Or is it working now? – git-e-up Sep 17 '18 at 19:59
  • any chance i can set jsfiddle to mobile browser emulation? otherwise i can't recreate the situation ;) – J. Doe Sep 18 '18 at 11:41

1 Answers1

0

You just need to fix path of background image

@media (max-width: 576px){
   header{
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    height:auto;
    max-height: 100%;
}
}

I hope this will help!

Anduel
  • 31
  • 1
  • 6
  • tried, but it doesnt work. used the 2 points from the comment on my question which is working well =) – J. Doe Sep 17 '18 at 18:58