Background color/width running to 100% on css element

» css » Background color/width running to 100% on css element

By : user2949613

Date : November 17 2020, 01:00 AM

I wish did fix the issue. Setting display:table on the .header-title rule will fix the issue (without messing the margins).

code :

Share :

How do I set a background-color for the width of text, not the width of the entire element, using CSS?

By : Aria

Date : March 29 2020, 07:55 AM

To fix this issue Put the text in an inline element, such as a .

code :

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

How to change the background color by the the width of element?

By : divakar

Date : March 29 2020, 07:55 AM

will help you Since you're using inline styles you can use the style property of the div to get the width in %

code :

var currentWidth = $('.progress-bar')[0].style.width;
if (parseFloat(currentWidth, 10) < 100) {
    $('.progress-bar').css('background-color','red');
}

$('.progress-bar').each(function(){
    var currentWidth = this.style.width;
    if (parseFloat(currentWidth, 10) < 11) {
        $(this).css('background-color','red');
    }
});

Changing the background color and width of the body element

By : Clint

Date : March 29 2020, 07:55 AM

To fix the issue you can do You're actually doing it, except when you don't declare a background color for the html element, it then takes the background color of the body element. Hence, you're not seeing the difference.
Simply give the html element a different background color, and also give body some height:

code :

html {
    background-color: red;     /* new */
}

body {
    border: 1px solid black;
    width: 500px;
    height: 500px;              /* new */
    margin: 0 auto;
    background: black;
}

Show background-color on full width of child element of horizontally scrolling element

By : xXOMAROVSKYxX Gamer

Date : March 29 2020, 07:55 AM

fixed the issue. Will look into that further In a horizontally scrolling div, when I move the horizontal scrollbar, the background-color of .filesColumn:focus does not show completely (for the complete width). , Set .filesColumn display: inline-block and remove width: 100%

code :

html,
body {
  height: 100%;
}

body {
  padding: 10px;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  border-radius: 7px;
  background-color: rgba(16, 40, 136, 1);
}

.contentModal {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

.filesColumn {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(16, 40, 136, 1);
}

.filesColumn:hover {
  background-color: rgba(48, 88, 184, 1);
}

.filesColumn:active,
.filesColumn:focus {
  background-color: rgba(79, 134, 235, 1);
}

<div class="container">
    <div class="contentModal">
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
        <a href="#" class="filesColumn">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</a>
    </div>
</div>

CSS: Background Color on Element With Automatic Width

By : L K Dsouza

Date : March 29 2020, 07:55 AM

wish helps you The problem domain. I would like to style a HTML list using CSS. The list will serve as a navigation bar and always be on screen. To avoid wasting screen space, the menu should by default be in a collapsed state and only expand on mouse-over. , The simple answer is to use set your li elements to float, like this:

code :

/* Main topic entry */
    #navigation > ol > li{
    white-space: nowrap;
    float: left; /* Add this to show background when hovering */
    background-color: #333; /* dark grey */
    color: white;
    overflow: hidden; /* Only show the number until hover */
    width: 30px; /* 40px minus the OL’s padding */