CODEWITHSUNDEEP
htmlcssbackground-imagefullscreen
NoCodeDev
NoCodeDev

Reputation: 27

Full Screen background does not works on mobile

On desktop everything is of, but if you check it on ipad or smartphone the Background does not works. The client asked me for a full screen picture; On desktop is okay, but on Ipad, when you switch between Portrait and Landscape you need to refresh the page, and it's looks like "repeted".

How can i solve it?

Upvotes: 0

Views: 427

Answers (5)

Malith
Malith

Reputation: 980

body {
background-size: cover;

}

just add background-size to your body tag

Upvotes: 0

ashishraaj
ashishraaj

Reputation: 761

You need to take a look on responsive web design. Using RWD you can re-scale your image while working on different devices. Take a look on Media Queries. That will solve your problem and your website will fit within any device. Apart if you need anything you can ask.

Upvotes: 0

Hacktisch
Hacktisch

Reputation: 1514

It jumps because you set the wrapper height to the body height using javascript (but you don't update it on screen resize). One option would be to update the wrapper height every time the screen resizes

Buy why don't you just remove the javascript and use css:

html,body,#wrapper{height:100%;}

Upvotes: 0

user3043693
user3043693

Reputation: 47

Do you need to set section height via js? You can use CSS:

html, body { height:100%; } and #wrapper { height:100%; }

I've also noticed that you set the same background for body and #wrapper and it looks like it's repeated so delete bg from one of these elements.

Upvotes: 1

Pouya Ataei
Pouya Ataei

Reputation: 2169

Try this; 

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Upvotes: 0

Related Questions