CODEWITHSUNDEEP
htmlcssmobile
RichardB
RichardB

Reputation: 339

Image Styling Effect

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

Answers (1)

Derrick Wells
Derrick Wells

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

Related Questions