Background not fitting to mobile

[Alex Jones]

I'm having trouble getting my background to fit the entire screen on my phone. It shows up fine on desktop.

Example: https://i.imgur.com/Wz9sMRM.png

Still new to html/css etc.

Discord is preferred: Alex Jones#0001

 

[Kuchy]

background-size: cover;

 

[Alex Jones]

background-size: cover;

Unfortunately it's already set to that. Here's my background CSS

body {
    background: linear-gradient(rgba(35,20,20,0.55),rgba(35,20,20,0.55)),
                url(../img/bg.jpg) no-repeat center center fixed;
    background-size: cover;
    font-family: 'Oswald', sans-serif;
}

I've also tried adding

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

Which messes up the desktop version and further the mobile version.
I also tried changing the background image (possibly too small? wouldn't make sense though..) and that resulted in the same issue.

 

[Kuchy]

Is it possible if you can send a link to the site?

It's easier for me to help if I see it.

 

[Alex Jones]

Is it possible if you can send a link to the site?

It's easier for me to help if I see it.

Yeah absolutely - http://dreamvalleymc.com/

(The website is image cached so if it's not showing up correctly you need to clear your cookies)

 

[Kuchy]

It's working for me through devtools

 

[Alex Jones]

It's working for me through devtools

I just tried viewing the website on 4 different phones (2 S9+ and 2 random LG phones) All had the same cut in half background issue exactly like the one in the original photo

 

[Kuchy]

Try changing that css to this:

body {
    background: linear-gradient(rgba(35,20,20,0.55),rgba(35,20,20,0.55)),
                url(../img/bg.jpg) no-repeat center center fixed;
    background-size: cover;
    font-family: 'Oswald', sans-serif;
    position: relative;
    height: 100%;
}

div.container {
    width: 100%;
    margin:0 auto;
    position: relative;
    height: 100%;
}

[DOUBLEPOST=1539489724][/DOUBLEPOST]Because of the absolute, your height can't adjust to the div which makes your background small.

 

[Meox]

Hello! At the top of your "Style".css you need to specify that the body and html are 100% of the page. You can do that with the following code.

html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
}

I hope this helps and if you still have trouble my Dm's are always open!

-StyledBytes

 

[Areeb]

Try doing height: 100vh;

 

[Xenons]

If you are using cloudflare you can put on devmode when working to see the changes instantly
Either way I just checked the phone version has full screen image so not sure if you managed to fix it or it was working all along but your version was cached

 

[Alex Jones]

Try changing that css to this:

body {
    background: linear-gradient(rgba(35,20,20,0.55),rgba(35,20,20,0.55)),
                url(../img/bg.jpg) no-repeat center center fixed;
    background-size: cover;
    font-family: 'Oswald', sans-serif;
    position: relative;
    height: 100%;
}

div.container {
    width: 100%;
    margin:0 auto;
    position: relative;
    height: 100%;
}

[DOUBLEPOST=1539489724][/DOUBLEPOST]Because of the absolute, your height can't adjust to the div which makes your background small.

Hello! At the top of your "Style".css you need to specify that the body and html are 100% of the page. You can do that with the following code.

html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
}

I hope this helps and if you still have trouble my Dm's are always open!

-StyledBytes

Thank you both absolutely so much! It was a combination between both of your fixes that fixed it!

I added both of your suggestions, hard cleared the cache on both chrome and my phone's cache partition then reloaded the site and it's finally fixed! Thank you so so so much! I've learned a lot from this!