Is there a way to center and scale just one image on a webpage, rather than two? I want it to be in the middle of the screen or page and resize with the window.
Image example: https://i.sstatic.net/t0AQP.png
body {
font-family: 'Titillium Web', sans-serif;
}
#top,
#bottom {
background: url('http://uxrepo.com/static/icon-sets/zocial/svg/chrome.svg') no-repeat center center;
background-size: cover;
position: absolute;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: #ff0000;
}
#bottom {
bottom: 0;
background-color: #fff38f;
}
.header-container {
height: 130px;
width: 100%;
margin: 0 auto;
position: absolute;
top: 130px;
}
.header {
text-align: center;
line-height: 16px;
font-size: 48px;
font-weight: 400;
color: #ffffff;
}
.footer-container {
height: 130px;
width: 99%;
margin: 0 auto;
position: absolute;
bottom: 0;
}
.footer {
text-align: center;
line-height: 16px;
}
.img {
position: absolute;
width: 100%;
}<body>
<div id="top">
<div class="header-container">
<div class="header">
SOME TITLE
</div>
</div>
</div>
<div id="bottom">
<div class="footer-container">
<div class="footer">
some text
<br>
<br>some text
<br>some text
<br>some text
</div>
</div>
</div>
</body>Looking for a simple solution to achieve this layout. Any ideas?