Krys
Reputation: 829
How to make bootstrap image and div expand to width of browser
I am using a bootstrap layout here, so I would like to find out, how can I make the image background stretch 100% wide and the grey div color stretch 100% wide as well?
I am not sure if I should be using container fluid or not? Any ideas will be a big help. Thank you.
An image depicting what I am trying to go for:
And what I have so far in this snippet (go full screen to see):
body {
background-color: #eee;
}
.heading {
color: #fff;
padding: 0 0 0 20px;
margin-top: -300px;
margin-bottom: 100px;
}
.profile-info-right-top {
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 20px;
background-color: #ddd;
}
.profile-info-right-top img {
padding-right: 10px;
}
.user-profile {
padding-bottom: 30px;
}
.profile-header-background {
margin: 0 -30px 0 -30px;
}
.profile-header-background img {
width: 100%;
height: 400px;
}
.profile-info-left {
position: relative;
top: -180px;
}
.profile-info-left img.avatar {
border: 2px solid #fff;
}
.profile-info-left h2 {
font-family: "josefinslab-semibold";
margin-bottom: 30px;
}
.profile-info-left .section {
margin-top: 50px;
}
.profile-info-left .section h3 {
font-size: 1.1em;
font-weight: 700;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.profile-info-left ul.list-social > li {
line-height: 2.3;
}
.profile-info-left ul.list-social > li i {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
top: 1px;
font-size: 16px;
min-width: 16px;
line-height: 1;
}
.profile-info-left ul.list-social > li a {
color: #696565;
}
.profile-info-right .tab-content {
padding: 30px 0;
background-color: transparent;
}
@media screen and (max-width: 768px) {
.profile-info-right-top {
position: relative;
top: -160px;
}
.profile-info-right {
position: relative;
top: -160px;
}
}
.user-follower,
.user-following {
position: relative;
margin-bottom: 40px;
}
.user-follower img,
.user-following img {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
width: 40px;
}
.user-follower a,
.user-following a {
font-size: 1.1em;
line-height: 1;
}
.user-follower .username,
.user-following .username {
font-size: 0.9em;
line-height: 1.5;
}
.user-follower .btn,
.user-following .btn {
position: absolute;
top: 0;
right: 0;
min-width: 92px;
}
.btn-toggle-following {
background-color: #7bae16;
color: #fff;
}
.btn-toggle-following:hover {
background-color: #ef2020;
color: #fff;
}
.btn-toggle-following:hover span {
display: none;
}
.btn-toggle-following:hover:after {
content: 'Unfollow';
display: inline;
}
.btn-toggle-following:hover i:before {
content: '\f129';
}
/* list icons */
.list-icons-demo li {
margin-bottom: 20px;
text-align: center;
}
.list-icons-demo li i {
font-size: 24px;
}
.list-icons-demo2 li {
margin-bottom: 10px;
}
.activity-item {
overflow: visible;
position: relative;
margin: 15px 0;
border-top: 1px dashed #ccc;
padding-top: 15px;
}
.activity-item:first-child {
border-top: none;
}
.activity-item .avatar {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
width: 32px;
}
.activity-item > i {
font-size: 18px;
line-height: 1;
}
.activity-item .media-body {
position: relative;
}
.activity-item .activity-title {
margin-bottom: 0;
line-height: 1.3;
}
.activity-item .activity-attachment {
padding-top: 20px;
}
.activity-item .well {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
border-left: 2px solid #cfcfcf;
background: #fff;
margin-left: 20px;
font-size: 0.85em;
}
.activity-item .thumbnail {
display: inline;
border: none;
padding: 0;
}
.activity-item .thumbnail img {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
width: auto;
margin: 0;
}
.activity-item .activity-actions {
position: absolute;
top: 15px;
right: 0;
}
.activity-item .activity-actions .btn i {
margin: 0;
}
.activity-item .activity-actions .dropdown-menu > li > a {
font-size: 0.9em;
padding: 3px 10px;
}
.activity-item + .btn {
margin-bottom: 15px;
}
.nav-tabs > li > a {
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
cursor: pointer;
}
.nav-pills > li > a {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background-color: #1688ae;
}
.nav-tabs.tabs-iconized > li a,
.nav-pills.tabs-iconized > li a {
padding-top: 0;
padding-bottom: 5px;
}
.nav-tabs.tabs-iconized > li i,
.nav-pills.tabs-iconized > li i {
position: relative;
margin-right: 3px;
top: 4px;
font-size: 24px;
}
.tab-content {
padding: 30px 15px 15px 15px;
background-color: #fff;
}
.nav.nav-tabs-custom-colored > li > a {
border-color: #ccc;
border-bottom: transparent;
}
.nav.nav-tabs-custom-colored > li > a:hover,
.nav.nav-tabs-custom-colored > li > a:focus {
background-color: #1688ae;
}
.nav-tabs.nav-tabs-custom-colored {
border-bottom-color: #1688ae;
}
.nav-tabs.nav-tabs-custom-colored > li {
z-index: 0;
margin-bottom: 0;
background-color: #fff;
}
.nav-tabs.nav-tabs-custom-colored > li > a {
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px;
color: #696565;
margin-right: 0;
}
.nav-tabs.nav-tabs-custom-colored > li > a:hover,
.nav-tabs.nav-tabs-custom-colored > li > a:focus {
color: #fff;
border-color: #1688ae;
}
.nav-tabs.nav-tabs-custom-colored > li.active > a,
.nav-tabs.nav-tabs-custom-colored > li.active > a:hover,
.nav-tabs.nav-tabs-custom-colored > li.active > a:focus {
color: #fff;
background-color: #1688ae;
border-color: #1688ae;
border-bottom: transparent;
}
.nav-tabs > li.active {
z-index: 1;
}
.nav-pills-custom-minimal {
border-bottom: 1px solid #ccc;
}
.nav-pills-custom-minimal > li > a {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
padding: 10px;
border-top: 4px solid transparent;
color: #696565;
}
.nav-pills-custom-minimal > li > a:hover,
.nav-pills-custom-minimal > li > a:focus {
background-color: transparent;
color: #4f4c4c;
}
.nav-pills-custom-minimal > li.active > a,
.nav-pills-custom-minimal > li.active > a:hover,
.nav-pills-custom-minimal > li.active > a:focus {
background-color: transparent;
border-top-color: #94c632;
color: #696565;
}
.nav-pills-custom-minimal > li + li {
margin-left: 30px;
}
@media screen and (max-width: 480px) {
.nav-pills-custom-minimal > li + li {
margin-left: 0;
}
}
.nav-pills-custom-minimal.custom-minimal-bottom > li a {
border-top: none;
border-bottom: 4px solid transparent;
}
.nav-pills-custom-minimal.custom-minimal-bottom > li.active > a,
.nav-pills-custom-minimal.custom-minimal-bottom > li.active > a:hover,
.nav-pills-custom-minimal.custom-minimal-bottom > li.active > a:focus {
border-bottom-color: #94c632;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="user-profile">
<div class="profile-header-background">
<img src="http://placekitten.com/1000/400" alt="Profile Header Background">
</div>
<div class="row">
<div class="col-md-12 heading">
<h2>User name</h2>
<span>title</span>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="profile-info-left">
<div class="text-left">
<img src="http://placekitten.com/310/400" alt="Avatar" class="avatar">
</div>
<div class="action-buttons">
<div class="row">
<div class="col-xs-6">
<a href="#" class="btn btn-success btn-block"><i class="fa fa-plus-round"></i> Follow</a>
</div>
<div class="col-xs-6">
<a href="#" class="btn btn-primary btn-block"><i class="fa fa-android-mail"></i> Message</a>
</div>
</div>
</div>
<div class="section">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col-md-8">
<div class="clearfix profile-info-right-top">
<div class="col-md-12">
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
</div>
</div>
<div class="profile-info-right">
<ul class="nav nav-pills nav-pills-custom-minimal custom-minimal-bottom">
<li class="active"><a href="#activities" data-toggle="tab">HEADING</a>
</li>
<li><a href="#followers" data-toggle="tab">HEADING</a>
</li>
<li><a href="#following" data-toggle="tab">HEADING</a>
</li>
</ul>
<div class="tab-content">
<!-- activities -->
<div class="tab-pane fade in active" id="activities">
<div class="media activity-item">
<a href="#" class="pull-left">
<img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
</a>
<div class="media-body">
<p class="activity-title"><a href="#">Antonius</a> started following <a href="#">Jack Bay</a> <small class="text-muted">- 2m ago</small>
</p>
<small class="text-muted">Today 08:30 am - 02.05.2014</small>
</div>
<div class="btn-group pull-right activity-actions">
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-th"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">I don't want to see this</a>
</li>
<li><a href="#">Unfollow Antonius</a>
</li>
<li class="divider"></li>
<li><a href="#">Get Notification</a>
</li>
</ul>
</div>
</div>
<div class="media activity-item">
<a href="#" class="pull-left">
<img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
</a>
<div class="media-body">
<p class="activity-title"><a href="#">Jane Doe</a> likes <a href="#">Jack Bay</a> <small class="text-muted">- 36m ago</small>
</p>
<small class="text-muted">Today 07:23 am - 02.05.2014</small>
</div>
<div class="btn-group pull-right activity-actions">
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-th"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">I don't want to see this</a>
</li>
<li><a href="#">Unfollow Jane Doe</a>
</li>
<li class="divider"></li>
<li><a href="#">Get Notification</a>
</li>
</ul>
</div>
</div>
<div class="media activity-item">
<a href="#" class="pull-left">
<img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
</a>
<div class="media-body">
<p class="activity-title"><a href="#">Michael</a> posted something for <a href="#">Jack Bay</a> <small class="text-muted">- 1h ago</small>
</p>
<small class="text-muted">Today 07:23 am - 02.05.2014</small>
<div class="activity-attachment">
<div class="well well-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="btn-group pull-right activity-actions">
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-th"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">I don't want to see this</a>
</li>
<li><a href="#">Unfollow Michael</a>
</li>
<li class="divider"></li>
<li><a href="#">Get Notification</a>
</li>
</ul>
</div>
</div>
<div class="media activity-item">
<a href="#" class="pull-left">
<img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
</a>
<div class="media-body">
<p class="activity-title"><a href="#">Jack Bay</a> has uploaded two photos <small class="text-muted">- Yesterday</small>
</p>
<small class="text-muted">Yesterday 06:42 pm - 01.05.2014</small>
<div class="activity-attachment">
<div class="row">
<div class="col-md-6">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/210/210" alt="Uploaded photo">
</a>
</div>
</div>
</div>
</div>
<div class="btn-group pull-right activity-actions">
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-th"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">I don't want to see this</a>
</li>
<li><a href="#">Unfollow Jack Bay</a>
</li>
<li class="divider"></li>
<li><a href="#">Get Notification</a>
</li>
</ul>
</div>
</div>
<div class="media activity-item">
<a href="#" class="pull-left">
<img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
</a>
<div class="media-body">
<p class="activity-title"><a href="#">Jack Bay</a> has changed his profile picture <small class="text-muted">- 2 days ago</small>
</p>
<small class="text-muted">2 days ago 05:42 pm - 30.04.2014</small>
<div class="activity-attachment">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/210/210" alt="Uploaded photo">
</a>
</div>
</div>
<div class="btn-group pull-right activity-actions">
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-th"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">I don't want to see this</a>
</li>
<li><a href="#">Unfollow Jack Bay</a>
</li>
<li class="divider"></li>
<li><a href="#">Get Notification</a>
</li>
</ul>
</div>
</div>
<button type="button" class="btn btn-default center-block"><i class="fa fa-refresh"></i> Load more activities</button>
</div>
<!-- end activities -->
<!-- followers -->
<div class="tab-pane fade" id="followers">
<div class="media user-follower">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Antonius<br><span class="text-muted username">@mrantonius</span></a>
<button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i> <span>Following</span>
</button>
</div>
</div>
<div class="media user-follower">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Michael<br><span class="text-muted username">@iamichael</span></a>
<button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
</div>
</div>
<div class="media user-follower">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Stella<br><span class="text-muted username">@stella</span></a>
<button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
</div>
</div>
<div class="media user-follower">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Jane Doe<br><span class="text-muted username">@janed</span></a>
<button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i> <span>Following</span>
</button>
</div>
</div>
<div class="media user-follower">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">John Simmons<br><span class="text-muted username">@jsimm</span></a>
<button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
</div>
</div>
<div class="media user-follower">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Antonius<br><span class="text-muted username">@mrantonius</span></a>
<button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i> <span>Following</span>
</button>
</div>
</div>
<div class="media user-follower">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Michael<br><span class="text-muted username">@iamichael</span></a>
<button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
</div>
</div>
<div class="media user-follower">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Stella<br><span class="text-muted username">@stella</span></a>
<button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
</div>
</div>
<div class="media user-follower">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Jane Doe<br><span class="text-muted username">@janed</span></a>
<button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i> <span>Following</span>
</button>
</div>
</div>
<div class="media user-follower">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">John Simmons<br><span class="text-muted username">@jsimm</span></a>
<button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
</div>
</div>
</div>
<!-- end followers -->
<!-- following -->
<div class="tab-pane fade" id="following">
<div class="media user-following">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Stella<br><span class="text-muted username">@stella</span></a>
<button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
</div>
</div>
<div class="media user-following">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Jane Doe<br><span class="text-muted username">@janed</span></a>
<button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
</div>
</div>
<div class="media user-following">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">John Simmons<br><span class="text-muted username">@jsimm</span></a>
<button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
</div>
</div>
<div class="media user-following">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Antonius<br><span class="text-muted username">@mrantonius</span></a>
<button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
</div>
</div>
<div class="media user-following">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Michael<br><span class="text-muted username">@iamichael</span></a>
<button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
</div>
</div>
<div class="media user-following">
<img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
<div class="media-body">
<a href="#">Stella<br><span class="text-muted username">@stella</span></a>
<button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Upvotes: 2
Views: 993
Answers (4)
hungerstar
Reputation: 21725
Move your main header image and the thumbnails out of a the .container class since you do not wish to restrict their widths at various viewport sizes, which is what .container does.
So the pseudo code would be:
<header>
<img>
<thumbnails>
</header>
<main>
<leftcolumn>
<img>
</leftcolumn>
<rightcolumn>
<text>
<text>
</rightcolumn>
</main>
To keep the thumbnails in-line with the image and content in the main body you will need to replicate the .col-md-** classes you used in the main body around the thumbnails.
Since you want to overlap content I would add a negative margin to the left column to pull it up and over the header content.
Below is some basic markup to demonstrate my suggested approach.
header .primary-img {
width: 100%;
}
.img-list {
background-color: #eee;
}
.img-list ul,
.img-list li {
margin: 0;
padding: 0;
list-style: none;
}
.img-list li {
display: inline-block;
margin: 1.5rem 0.5rem;
}
.content {
margin: 50px 0;
}
@media (min-width: 992px) {
.content .left {
margin-top: -225px;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="primary-header">
<img class="primary-img" src="http://placehold.it/1200x400">
<div class="img-list">
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-8">
<ul>
<li>
<img src="http://placehold.it/50x50&text=1">
</li>
<li>
<img src="http://placehold.it/50x50&text=2">
</li>
<li>
<img src="http://placehold.it/50x50&text=3">
</li>
<li>
<img src="http://placehold.it/50x50&text=4">
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main class="content">
<div class="container">
<div class="row">
<div class="left col-md-4">
<img class="img-responsive" src="http://placehold.it/300x400/ffcc00">
</div>
<div class="col-md-8">
<p>
Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
</p>
<p>
Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
</p>
<p>
Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
</p>
</div>
</div>
</div>
</main>Note: Notice I took into account how to handle smaller screens where overlapping the image probably won't workout and would need to move it.
Edit
Per the comments below I have added a solution to moving the avatar image.
If all you need to do is move the avatar img from one region to another, the simplest thing to do might be to include it in the markup where you need it twice. Then use media queries to hide/show the appropriate avatar for the screen size.
I made each image a different color so you can easily identify the switch.
header .primary-img {
width: 100%;
}
.img-list {
background-color: #eee;
}
.img-list ul,
.img-list li {
margin: 0;
padding: 0;
list-style: none;
}
.img-list li {
display: inline-block;
margin: 1.5rem 0.5rem;
}
.content {
margin: 50px 0;
}
.sidebar-avatar {
display: none;
}
@media (min-width: 992px) {
.header-avatar {
display: none;
}
.sidebar-avatar {
display: block;
}
.content .left {
margin-top: -225px;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="primary-header">
<img class="primary-img" src="http://placehold.it/1200x400">
<div class="header-avatar">
<img class="img-responsive" src="http://placehold.it/300x400/ffcc00?text=avatar+1">
</div>
<div class="img-list">
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-8">
<ul>
<li>
<img src="http://placehold.it/50x50&text=1">
</li>
<li>
<img src="http://placehold.it/50x50&text=2">
</li>
<li>
<img src="http://placehold.it/50x50&text=3">
</li>
<li>
<img src="http://placehold.it/50x50&text=4">
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main class="content">
<div class="container">
<div class="row">
<div class="left col-md-4">
<div class="sidebar-avatar">
<img class="img-responsive" src="http://placehold.it/300x400/A3D76F?text=avatar+2">
</div>
</div>
<div class="col-md-8">
<p>
Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
</p>
<p>
Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
</p>
<p>
Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
</p>
</div>
</div>
</div>
</main>Upvotes: 1
Luuk Skeur
Reputation: 1940
For the image and grey div you should use a wrapper around a container. Don't use container-fluid since your main column structure will be messed up. Try adding another div around your container and give this div a background image/color.
For your background image use the following code:
<div class="profile-header-background">
</div>
<div class="grey-div">
<div class="container grey-container">
..place your grey content here..
</div>
</div>
<div class="container">
..place your content here..
</div>
With following CSS:
.profile-header-background {
height: 400px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://placecage.com/1000/400');
width: 100%;
}
.grey-div {
background: grey;
}
Since you are using margin-top: -300px you can simply place your container outside and after the background image.
Upvotes: 0
Tony Hensler
Reputation: 1492
Move:-
<div class="profile-header-background">
<img src="http://placekitten.com/1000/400" alt="Profile Header Background">
</div>
<div class="clearfix profile-info-right-top">
<div class="col-md-12">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
</div>
</div>
Above the container class.
You will need to fix the contents of col-md-12 though.
Upvotes: 0
Gonzalo Diaz Ailan
Reputation: 722
I don't get exactly what are you trying to do and how to fix it, but for the nature of your css and the image you are trying to replicate, I think you should make use of the next properties:
- Background Image (for manipulating the image as a background and not as an img tag)
- Background Position (for positioning the image in the center)
- Background Repeat (the 'no-repeat' value let you cover the background with a single image)
- Background Size (the 'cover' value could be useful to cover all the background of the element so it can have 100% of the width of its element)
I think this tutorial would be pretty useful too.
Please, tell us if we can provide any additional help.
Upvotes: 0
Related Questions
- Set Image To 100% Width - Bootstrap
- Stretch image to fit full container width bootstrap
- Cannot Stretch image heigh to the size of div in Bootstrap
- How to set image width to that of bootstrap column
- How to make my image full width with bootstrap 3
- Bootstrap - Images being stretched to width of div
- Expand bootstrap div width with content
- Bootstrap and image width
- How to stretch image bootstrap
- Make the image to stretch over full html body in Bootstrap page