Check out the Umbrella image in the images section:
Full-size window: .
Reduced (ideal placement):
I want my umbrella image to always display in the center of the screen, regardless of the size of the window. It should work when the window shrinks and also in mobile view.
I've experimented with different methods but haven't been successful so far. Any suggestions would be highly appreciated.
Here is the code snippet:
HTML
<div class="wrapper">
<div class="page2">
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3><a href="welcome.html" id="card-link">Welcome</a></h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3><a href="blog.html" id="card-link"> Kyoto</a></h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3><a href="best.html" id="card-link">Best of 2018</a></h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li><a href="work_with_me.html">Work With Me</a></li>
<li>
<a href="xxxxxxxxxxxx.com">Contact</a></li>
</ul>
</div>
</footer>
</div>
</div>
</div>
CSS
.page2{
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 100%;
}
//cards
.wrap{
width:960px;
margin:auto;
margin-top: 100px;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float:left;
margin:10px;
text-decoration: none;
}
.page3{
margin: 20px;
margin-top: 20px;
height: 30%;
}
.umbrella_icon {
text-align: center;
}
.footer {
z-index: 1000;
width: 960px;
margin: 0 auto;
}