Click here to Skip to main content
14,877,652 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have developed a sidebar using bootstrap and asp.net mvc 5. I have an image right side of the sidebar. On the sidebar menu toggled, I want the image to stretch to cover the width of the page. Basically cover the space of the toggled side menu. Below is my code.

What I have tried:

CSS
#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #fffaf0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}


/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sticky-offset {
  top: 56px;
}

.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999999;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

.sidebar-nav>.sidebar-brand a {
  color: #999999;
}

.sidebar-nav>.sidebar-brand a:hover {
  color: #fff;
  background: none;
}

@media(min-width:768px) {
  #wrapper {
    padding-left: 250px;
  }
  #wrapper.toggled {
    padding-left: 0;
  }
  #sidebar-wrapper {
    width: 250px;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
  .main {
    width: 1022px;
    height: 327px;
    background: url('../Content/Images/about-1022x327.jpg') repeat scroll;
    -ms-background-size: cover;
    background-size: cover;
}
HTML
<div id="wrapper">

  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <ul class="sticky-offset">
      <li>@Html.ActionLink("About", "About", "Home")</li>
      <li><a href="#">BENEFITS</a> </li>
      <li><a href="#">COMMUNITY</a> </li>
      <li><a href="#">PUBLICATIONS</a> </li>
      <li><a href="#">SUPPORT ALUMNI</a> </li>
    </ul>

  </div>
  <div class="main">
    <div class="navbar-header">

    </div>
  </div>
Posted
Updated 20-Jan-21 22:10pm
v3
Comments
Christian Graus 20-Jan-21 18:53pm
   
Do you want to maintain the aspect ratio?
Member 1283347 20-Jan-21 19:40pm
   
If I can achieve the results I want by maintaining the aspect ratio then yes else it doesn't matter.
Christian Graus 20-Jan-21 20:52pm
   
https://www.w3schools.com/howto/howto_css_full_page.asp

This seems to be the old school way to do it
Member 1283347 21-Jan-21 16:25pm
   
I have got it working. Not sure why it was not working first. But just css
imgBackground {
/*min-height: 35vh;*/
/*Height: 378px;*/
max-width: 100%;
height: auto;
background: url('../Content/Images/about-1022x327.jpg') repeat scroll;
background-repeat: no-repeat;
background-size: cover;

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900