Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Set background scrolling, position, and background repeat to element with CSS

Following are some CSS background properties used to set position, scrolling, background repeat

  • background-repeat
  • background-attachment
  • background-position

Background scrolling

The background-attachment property sets whether a background image scrolls with the rest of the page or is fixed.

/*Fixed background image*/
.about-team {
    background-image: url("team.png");
    background-attachment: fixed;
}


/* background image with scrolling*/ 
.body-img {
    background-image: url("site.gif");
    background-repeat: repeat-y;
}

Background repeat

The background-repeat property sets if/how a background image will be repeated.

/* background image with no repeat*/ 
.about-team {
    background-image: url("team.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}


Background position

The background-position property sets the starting position of a background image.

/* background image with center position*/ 
.about-team {
    background-image: url("team.png");
    background-position: center;

CSS background color and background image to html element

Following are some CSS background properties

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

The background-color property specifies the background color of an element.

Code snippet

.details-section {

    background-color: #fff;

    color: #444;

}

The background-image CSS property sets one or more background images on an element.

Code snippet

.header-section {
    visibility: visible !important;
    position: relative;
    background: url("../images/header-img.gif");
}


Set background color and background image together to element 
/*background color and image shorthand CSS*/ 
.loading {
    position: relative;
    background: rgba(211,211,211) url("../images/progress.gif");
}

 

Set background color and background image to element with background position and background repeat
/*background color and
image shorthand color, image, position, and repeat CSS*/ 
.loading-bar {
    position: relative;
    background: rgb(211,211,211) url("../images/in-progress.gif") center no-repeat;
}

 

/*right side top
profile icon with shorthand color, image, position, and repeat CSS*/ 
.profile-section {
    background: #ffffff url("profile-us.png") no-repeat right top;

Bootstrap tab change event or click event customization

Bootstrap tab change event or click event customization

Ho to add custom code to check if any tab is clicked, for example hide/show some section for tab content.

Code snippets,

<ul class="nav nav-tabs">
          <li class="nav-item">
          <a class="nav-link active" href="#Home ">Home </a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#About ">About </a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#Contacts ">Contacts </a>
        </li>
 </ul>

jQuery code to detect event Click

   //First tab click event 
    $(".nav-tabs a:first-child").click(function () {
        //here is your customization code
     });
 
   //2nd tab click event
    $(".nav-tabs a: nth-child(2)").click(function () {
        //here is your customization code
     });
 
   // last tab click event
    $(".nav-tabs a:last").click(function () {
        //here is your customization code
     });
 
  // click for all tabs
    $(".nav-tabs a").click(function () {
        //here is your customization code
     });