Problem leaving a background img no body{} reponsive

Asked

Viewed 118 times

1

I have a problem to leave a background img no body{} reponsive. img: inserir a descrição da imagem aqui

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); 

}

someone could help me?

css

2 answers

3


Change background: url(../img/fundo.jpg); for background-image: url(../img/fundo.jpg);. When you wear it alone background is using a shortcut to multiple properties at the same time. This is overwriting your background-position, -size, -repeat and -attachment with the standard values.

  • Vlw bro thanks!

1

First put a size on html and body to not have problems resize.

Then the Browser reads CSS from top to bottom, then first you need to declare the Background (which is a "shortcut" where you can insert several attributes in a single line), then its attributes.

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%;

Check on the 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 a class "shortcut" such as Edge or Background is used, problems may occur. Especially if one attribute depends on the other to be rendered by the Browser. See below.

For example this CSS won’t work out:

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

It will already work:

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

  • made and did not give the img keeps repeating, will q can be the bootstrap?

  • @Felipe I made an edit on the snippet runs it there you will see how it turned out

  • the problem was the order of the background was not bro? Agr was all right.

  • 1

    @Felipe was yes! You first need to declare the Background, then the attributes it will have as background-repeat: background-sizet: etc, if you put these attributes before the CSS will read wrong

  • vlw bro thanks!

  • 2

    It is not a problem of order - despite the change of order solve the problem. It is that properties like border and background are shortcuts to several others at the same time. If you only define one of them (for example, the border thickness on border), the others assume the default value.

  • Yes, bro and about improving the quality of img have how? Pq type imgs get smaller quality mt garbage.

  • 1

    No @Felipe, if the image is small the browser will stretch it and lose quality, there is no way.

  • @bfavaretto got the text right. What you said makes sense, is because of the "short hand" although the orem resolve also.

  • @hugocsl I am with a very annoying problem everything q is inside the body even I creating a main and inside the main a Action is good the background-Attachment: Fixed.

  • And when I take background-Attachment Fixed from bg it doesn’t get 100% in height.

  • @Felipe puts this in CSS html, body { width: 100%; height: 100%; margin: 0; } to solve the height problem. And do not use background-Attachment unless you want the fixed BG while scrolling screen. Anything creates another question I try to help you

  • I took the Fixed and did it from width and height, but now appears a part of the white background.

  • And with Attachment the background is normal, but everything inside the body is also.

  • And the only thing I didn’t want to get with Attachment is this part of the header, but I’ve tried everything .

  • @Felipe creates a new question, with his HTML, CSS etc all complete, then we can answer you better

  • opa blz I will send you here.

  • https://answall.com/questions/266753/problema-com-body-e-tag-background-attachment-fixed

  • @hugocsl https://answall.com/questions/266890/algu%C3%A9m-could-help me-with-this-script is there any way I can get some traction with that, bro? Tou want to add to script to change the color of <Ul> along with the color of bg.

Show 14 more comments

Browser other questions tagged css

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