Place image in header/footer

Asked

Viewed 8,764 times

1

I am hours away trying to adjust the position of an image in the footer, and after I have to adjust another image to the header, I am new to html/css and would like to ask for help because I need to create a website for my boss, I was able to make the image go down but for some reason it doesn’t match the bottom edge, it always keeps a few inches away and no matter what the command I exercise it doesn’t go 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 the website:

inserir a descrição da imagem aqui

Anyone know how to limit the background image from the sides? my site has become gigantic to the side as you can see in the image rs, grateful

html css

  • How so limit by the sides ? prevent a scroll from appearing horizontal ?

1 answer

2

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

Regarding the image, it needs has the width of 100%, so it occupies only 100% of the width of the screen, if you use the measure in PX and it was larger than the user screen will be giant even.

See the example how it looks

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 various options from beginner to advanced, everything for free search on Youtube tb!

Browser other questions tagged html css

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