Reputation: 339
I have a client that wants the same image style effect as WooTheme's Duo Theme. I can easily achieve this initial effect:
------HTML-------------
<div class="home-banner">
</div>
-------CSS-------------
.home-banner {
height: 500px;
background-image: url("CLIENT'S BG IMG");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 9.505em 1.618em 11.089em;
text-align: center;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.home-banner:after {
content: "";
display: block;
height: 10em;
width: 200%;
position: absolute;
bottom: -5em;
right: -20em;
background: none repeat scroll 0% 0% #46535D;
border-radius: 100%;
transform: rotate(2deg);
border-top: 0.327em solid #F97960;
}
But there is one requirement that is killing the whole thing. The client's photo is showing staff members of their company. When the browser window is resized to simulate a tablet/smartphone, most of the image cannot be seen due to the css rule:
background-size: cover;
If I change this rule, the banner effect no longer works properly. I need all staff members to be seen on a small display. Imagine a staff member's head being cut off on their mobile device. That means that my head would be next. Any suggestions?
Upvotes: 0
Views: 42
Reputation: 318
You can use a CSS media query such as
@media (max-width: 480px){
/*Place mobile CSS here*/
}
This way whenever a user looks at this on a mobile device this CSS rule will override the normal browser one... just place it after the normal browser styling.
Upvotes: 2