Tag: panel

CSS & HTML Only – Responsive background image in panel heading & Profile Photo

I made a simple example of a beautiful, responsive and fast panel with a responsive cover photo and a circle photo, this type of design I use on my projects when I wand to represent the TEAM page or CONTACT person.

You can simply modify the size and style of the panel, also, you can add or remove the shadow around the profile photo, change the background cover and the cute cat profile photo.

Check the Source of the demo and give it a try, if you have any other questions, you can simply drop me a line via email…

DEMO

Cosmin

Responsive background image in card-header (Bootstrap 4)

UPDATE – since this post got so much heat, I made a simple CSS & HTML only panel with responsive image and card-header, see here.

This is a Bootstrap 4 version of the Responsive Background Image in Panel Heading (Bootstrap). Since they changed the panel class with the card class in Bootstrap 4, you just need to change the old Bootstrap 3 class names… here is my code and demo. 

 .heading-footer 
{ 
background-image: url(bg.jpg); 
background-size: cover; 
height: 175px; 
-webkit-box-shadow: none; 
box-shadow: none; 
border: 0px; 
border-radius: 0px; 
}   

.panel-profile-img 
{ 
max-width: 250px; 
margin-top: -160px; 
margin-bottom: 5px; 
border: 3px solid #fff; 
border-radius: 0%; 
}
 <div class="card">
    <div class="card-header heading-footer"></div>
      <div class="card-block text-center">
         <img class="panel-profile-img rounded-circle" src="portrait.jpg">
         <p class="author-title"><strong>Lorem Ipsum</strong></p>
         <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
         <p>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p>
    </div>
</div>

Here is the live demo.

Responsive background image in panel heading (Bootstrap)

Usually, on my freelance projects I use a beautiful responsive Bootstrap panel to display certain information like photos, offers, contact info, profile info and so on. I find very useful to play with the variables and see particular results depending on your cover image size and text that you need to display in the panel.

The structure is pretty simple, we have a simple Bootstrap style class logic that displays our panel and some custom css that we need to add to modify some settings like removing the standard Bootstrap border and rounded corners.

Here is the CSS:

.heading-2 
{ 
background-image: url(bg.jpg); 
background-size: cover; 
height: 225px; 
-webkit-box-shadow: none; 
box-shadow: none; 
border: 0px; 
border-radius: 0; 
}    

.panel { -webkit-box-shadow: none; box-shadow: none; border: 0px; }

.panel-profile-img { max-width: 250px; margin-top: -160px; margin-bottom: 5px; border: 3px solid #fff; border-radius: 0%; }
.panel > .panel-body > .author-text { font-size: 12px; color: #333; font-weight: 300; font-family: 'Open Sans', sans-serif; }
.panel > .panel-body > .author-title { font-size: 16px; color: #000; font-weight: 400; font-family: 'Open Sans', sans-serif; padding-top: 12px; }

HTML code:

<div class="container">
<div class="row" style="max-width: 640px;">
  <div class="panel panel-default">
                        <div class="panel-heading heading-2"></div>
                        <div class="panel-body text-center">
                            <img class="panel-profile-img" src="portrait.jpg">
                            <p class="author-title"><strong>Panel Head Text</strong></p>
                            <p class="author-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis tincidunt rutrum. Donec porttitor erat eu justo fermentum, a scelerisque dolor molestie.</p>
                        </div>
                    </div>
        </div>
     </div>

I limited the width of the panel to see how it looks, usually, I use 2-3 panels in a row to display certain informations but, in my opinion, this type of panel looks better when is not displayed on a full width style.

Take a look at the results here.