Problem leaving a background img no body {} reponsive

1

I have a problem with leaving an img background in the body {} reponsive. img:

code:

body{

    background-position: center;
    background-repeat: no-repeat;   
    color: #000000;
    background-attachment: fixed;
    background-size: 100%;
    margin: 0; 
    font-family: 'Lato', sans-serif;
     background: url(../img/fundo.jpg); 

}

Can anyone help me?

    
asked by anonymous 03.01.2018 / 16:57

2 answers

3

Change% of% by% with%. When you use only background: url(../img/fundo.jpg); you are using a shortcut to multiple properties at the same time. This is overwriting your background-image: url(../img/fundo.jpg); , background , background-position and -size with default values.

    
03.01.2018 / 17:25
1

First put a size in html and body so you do not have resize problems.

After the Browser reads the CSS from Top to Bottom , then you first need to declare the Background (which is a "shortcut" where you can insert multiple attributes on a single line) of it.

background: url(http://placeskull.com/500/500); 
background-position: center;
background-repeat: no-repeat; 
etc...

Or so

background: url(http://placeskull.com/500/500) center no-repeat fixed / 100%; 

See in Snippet

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #000000;
    font-family: 'Lato', sans-serif;
    background: url(http://placeskull.com/500/500); 
    background-position: center;
    background-repeat: no-repeat; 
    background-attachment: fixed;
    background-size: 100%; 
}
  

NOTE: Due to the order of reading the CSS by the Browser if some class "shortcut" like Edge or Background is used, problems can occur. Especially if one attribute depends on the other to be rendered by the Browser. See below.

For example, this CSS will not work :

border-color: #f00;
border-style: dashed;
border: 2px;

This will work:

border: 2px;
border-color: #f00;
border-style: dashed;
    
03.01.2018 / 17:21