How to put Auto Adjustable background?

Asked

Viewed 1,495 times

0

How to Put Self Adjustable Fabric Background?

I put it like this in mine body but when I enter the cell phone it keeps cutting the background, it only stays where it has element.

body{
    clear: both;  
    background:url(../img/background-login.png) center center fixed;
    background-size:cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
     min-height:100% !important;
}
css css3

  • I still haven’t made it :/

2 answers

1

Instead of using 100% 100% use cover.

background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
-khtml-background-size: cover;
-moz-background-size: cover;

The difference is that with 100% 100% it will always reach the maximum of 100% be it, vertical or horizontal. Already the cover will 'cover' the div. But on the other hand, it can cut (and certainly will) cut either some of the sides, or the top and bottom of the image.

Edited:

Try this:

body,html {
    min-height:100%;
    //ou
    min-height:100% !important; //Use somente se este não estender o `body`
}

  • That way no friend

  • I edited my answer, try.

  • tried with min-height tbm and could not

  • if I go by the computer and click on the F12 debug and see as if mobile works normal now if I vor on the phone even not worked put that way . body{ clear: Both; background:url(../img/background-login.png) no-repeat center Fixed; background-size:cover; -Webkit-background-size: cover; -background-size: cover; -khtml-background-size: cover; -background-size: cover; -background-size: cover; min-height:100% ! Mportant; }

  • Edit your question and put your body and css there, it’s easier to view. Preferably all the css that surrounds it.

  • Celsom could notice that when I remove the no-repeat it works but repeats but fills the whole screen , and I do not want it to do that , I will edit the answer.

  • I edited the answer

  • your background, it’s like this: url(../img/background-login.png) it must have quotes, like this: url('../img/background-login.png'); Try ;)

  • even with the quotes did not work , and I’m finding it funny that only in mobile the background is not auto adjustable , now if it is in the F12 of google Chrome and select mobile device works

  • @Victormoral try this example provided by Bacco, see if you solve: https://jsfiddle.net/hne7x31f/3/

Show 5 more comments

-1

Please, just try it:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

  • or so also <pre>background-repeat:no-repeat; -Webkit-background-size:cover; -background-size:cover; -o-background-size:cover; background-size:cover; background-position:center;

  • unfortunately your answer will not do. The contain property will not fill the div space. It will work similarly to 100% 100%, up to maximum width or height.

  • this way did not give friend

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.