"Enhance your Design with Customized Text Box Coloring

I've made a change to the header's color, which consists of a logo and a title.

Unfortunately, the text box where the title appears is picking up the background color of the body of the website instead of the background color of the header.

* {
  margin: 0px;
  padding: 0px;
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
  background-color: #C0C0C0;
}

.headerMenu {
  background-color: #00b9ED;
  height: 40px;
  border-bottom: 0px;
  padding-left: auto;
  padding-right: auto;
  padding-bottom: 10px;
  width: 100%;
}

#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.logo {
  width: 125px;
}

.logo img {
  background-color: #00b9ED;
  position: absolute;
  width: 50px;
  height: 38px;
  top: 0;
  left: 10px;
}

.headerTitle {
  background-color: #00b9ED;
  position: absolute;
  top: 15px;
  left: 80PX;
  font-family: 'oswald', arial, sans-serif;
}
<!DOCTYPE HTML>
<HTML>

<HEAD>
  <title>FINDPETS</title>
  <link href="./css/style.css" rel="stylesheet" type="text/css" />
</HEAD>

<body>
  <div class="headerMenu">
    <div id="wrapper">
      <div class="headerTitle">
        <h2>PET FRIENDS</h2>
      </div>
      <div class="logo">
        <img src="./IMG/dog_bone_logo.png" />
      </div>
    </div>
  </div>
</body>

</HTML>

Here is a screenshot showing the issue:

https://i.sstatic.net/yw5Z2.jpg

htmlcssheader

Answer №1

In CSS, the asterisk selector * is known as the universal selector. This means it selects all elements on a page and applies any properties specified, including background-color, to every element, even the title.

To avoid styling all elements with the background-color property, you can remove it from the * {} rule and instead apply it to a new selector like body {}. By doing this, the background-color property will only be applied to the body element.

body {
  background-color: #C0C0C0;
}

* {
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
  padding: 0px;
  margin: 0px;
}

.headerMenu {
  background-color: #00b9ED;
  height: 40px;
  border-bottom: 0px;
  padding-left: auto;
  padding-right: auto;
  padding-bottom: 10px;
  width: 100%;
}

#wrapper {

  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.logo {
  width: 125px;

}

.logo img {
  background-color: #00b9ED;
  position: absolute;
  width: 50px;
  height: 38px;
  top: 0;
  left: 10px;


}

.headerTitle {
  background-color: #00b9ED;
  position: absolute;
  top: 15px;
  left: 80PX;
  font-family: 'oswald', arial, sans-serif;
}
<div class="headerMenu">
  <div id="wrapper">
    <div class="headerTitle">
      <h2>PET FRIENDS</h2>
    </div>
    <div class="logo">
      <img src="./IMG/dog_bone_logo.png" />
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through an array of objects with Node.js

Recently, I integrated the ChartJS library into my Node web app to visualize data. The following is nested in a script tag on an EJS template page: <script> let playerStatChart = new Chart(myChart, { type: 'bar', data: { la ...

javascripthtmlnode.jschart.jsejs

Show various pieces of information in my input field

I'm working with an input field: <div class="search-field search-field-date search-field-calendar ui-datepicker-calendar columns small-3"> <input type="text" data-ng-model="goDate" placeholder="Departure Date" data-mtx-datepic ...

htmlcssangularjs

There seems to be an issue with Bootstrap: the property this._config is

Here is the button I have: <button class="kv_styleclass_0 btn btn-outline-success btn-lg" data-bs-toggle="modal" data-bs-target="formModal" type="button"> Become a participant </button ...

javascripthtmlcssbootstrap-modalbootstrap-5

Creating a webpage that utilizes varying headers for each section can help to

When trying to print a multi-page webpage, I encounter an issue with the headers. How can I ensure that different headers appear on each page after the first one? Specifically, my problem arises when a label on the first page spans across to the second pa ...

htmlcssprinting

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

csshtmlalignmentcentertext-alignment

Ways to maintain image size while zooming out a webpage with CSS

Is there a way to maintain image dimensions when zooming out a page using CSS? Take, for example, fiverr.com. When the page is zoomed out by 25%, And then, when the page is zoomed back to 100% (normal), How can I fix the image dimensions in this situat ...

htmlcssimage

What methods can be used to restrict users from navigating to the previous or next page while they are scrolling horizontally within a scrollable div?

Experiencing a frustrating UX issue that arises from using a wide table within a scrollable div on a webpage. The problem occurs when users scroll horizontally using a trackpad on a mac, they sometimes unintentionally trigger the "go to next/last page" fe ...

htmlcssbrowseruser-experience

Mastering the Art of Stacking with FontAwesome

I am working on stacking the Soundcloud icon manually to display it within a square similar to fa-facebook-square. However, my Soundcloud icon is appearing under the square. This is the code I have so far: <div class="row"> <ul style="list-s ...

htmltwitter-bootstrapcssfont-awesome

Focusing on a specific image using Jquery

I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".hero1project3 img"? HTM ...

javascriptjqueryhtmlcss

What techniques can be employed to minimize the volume of text within my HTML code?

Currently, I am facing the challenge of composing a page containing over 1000 words, such as news articles, reports, and blog posts. The issue arises when I exceed 75 words between a pair of <p> tags. This not only makes the file messy and hard to r ...

htmlcode-readability

The function $scope.$watch(var,function) was not defined and caused an error stating that

Having trouble with the error message: "undefined is not a function" popping up when attempting to add a watch to the scope. I've been staring at this code for so long now, but still unable to locate the source of the issue. Why am I getting an undef ...

javascriptangularjshtml

What is the best way to resolve the CSS border styling issue surrounding the anchor element?

I created a simple sign-up form for my school project where users can choose their roles. I'm facing an issue with the border under the anchor tag and I need help fixing it. How can I ensure that the space at the top is equal to the bottom as well? T ...

htmlcss

Is it possible to implement Photoshop-inspired color curves filters on an HTML tag?

I am attempting to recreate the color curves filter from Photoshop using an HTML video tag. https://i.stack.imgur.com/erB1C.png The solution closest to what I need so far is how to simulate Photoshop's RGB levels with CSS and SVG Filters, but it doe ...

htmlcsscolorscurvesvg-filters

The session becomes obsolete when redirecting back to the previous page

When attempting to redirect using the http referrer after storing a value in Session in php, I noticed that the Session becomes null. Is there a method to maintain the session even when utilizing the http referrer? ...

phphtmlsessionreferrer

Identifying AJAX scripts within JavaScript content

Is there a way to identify the specific code in javascript returned by the web server that enables the client Web to initiate AJAX calls? Essentially, I am looking for any existing libraries that can extract the URL embedded within the javascript code sent ...

phpjavascripthtmlajaxjson

Positioning an image to the left of the text and aligning icons to the right of the text

I am trying to align text between an icon and an image, but I'm having some trouble getting it just right. Here is the code I have so far: <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel= ...

htmltwitter-bootstraptwitter-bootstrap-3

Shift a div towards the right edge of the navigation bar

**I am looking to reposition the Navbar_icon div to be on the right side of the navbar. The Navbar_icon contains icons for search, help, and sign in. ** Current layout of the navbar is shown in the image below: <https://i.sstatic.net/GGvBa.png> REA ...

htmlcssreactjs

Animation Effects in Opera and Internet Explorer

Just unveiled my latest project, CSSload.net - an awesome tool for generating CSS spinners and bars. The animations are running smoothly on Firefox and Webkit browsers. Curious if anyone has tips on animating elements like this in Opera and IE? ...

jqueryajaxcssload

Changes in an image element's transition can result in either resizing or shifting positions

When I apply an opacity transition to an img element as shown here, I notice that the size of the image changes or it appears to move at the start and end of the transition. Below is a simple CSS code for styling: img{ height:165px; width:165px; ...

htmlcss

Nested Blocks in React Components

I am attempting to create a layout that includes text, a line, and a button similar to the design in this image: https://i.sstatic.net/RgGFU.png Although my code functions correctly, the CSS styling is not quite right: { retrospectives.size > 0 &&am ...

javascriptcssreactjs