Place image in header / footer

Navigation
0

I am trying to adjust the position of an image in the footer, and after that I will have to adjust another image in the header, I am new to html / css and would like to ask for help because I need to create a site for my boss, down but for some reason it does not match the bottom edge, always keep a few inches away and no matter what command I exercise it does not come down ... 

<div id="rodape" align="left">
    <div align="left">
        <h1/>
        <img src="C:\Users\Ricceli\Desktop\tem q ir\Site\css\Imagens/banner.jpg" height="300" width="1350"/> 
    </div>
</div>

CSS 

div#rodape{
    height: 200px;
    position: absolute; top: 1900px; left: -10px; bottom: 0px font-size: x-small;
    width: 150%;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    position: absolute;
    top: 2000px;
    right: 0px;
    bottom: 10px;
}

Image on site:

Does anyone know how to limit the background image by the sides? my site got gigantic to the side as you can see in the image rs, grateful

    
asked by anonymous 05.04.2018 / 20:38

1 answer

1

The margin problem you can not get is because by default <body> has a margin and you have to take that margin "in the hand" if you want it to not interfere with anything.

In relation to the image, it needs to have a width of 100%, so it occupies only 100% of the width of the screen, if you use the measurement in PX and it was bigger than the user screen will get giant even.

See the example as follows 

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: plum;
}
#rodape {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
#rodape img {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    object-fit: cover; /* classe pra deixa a imagem com a proporção correta e não ficar achatada */
}
<div id="rodape">
    <img src="http://placecage.com/800/400"/> 
</div>

Search online courses have several options from beginner to advanced, all for free search on Youtube tb!

    
05.04.2018 / 21:04
Creating and using non-angular component 2 Filter a specific element within a stripe within another list [duplicate]