Hot Summer Deals are Here!
Celebrate with up to 99% off on 17,800 resources
01
Days
04
Hours
48
Mins
00
Secs

Background not fitting to mobile

Status
This thread has been locked.
PebbleHost
High performance, consistent uptime and fast support. Minecraft hosting that just works.

Alex Jones

Premium
Feedback score
7
Posts
145
Reactions
82
Resources
0
background-size: cover;

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

HTML:
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

HTML:
<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.
 
Last edited:

Alex Jones

Premium
Feedback score
7
Posts
145
Reactions
82
Resources
0
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

Web Developing Cake
Support
Feedback score
14
Posts
664
Reactions
505
Resources
2
Try changing that css to this:

Code:
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

Adventurer
Premium
Feedback score
9
Posts
89
Reactions
34
Resources
0
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.

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
 

Xenons

Web Designer & Developer
Premium
Feedback score
3
Posts
305
Reactions
151
Resources
0
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

Premium
Feedback score
7
Posts
145
Reactions
82
Resources
0
Try changing that css to this:

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

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!
 
Status
This thread has been locked.
Top