Positioning Backgrounds with Padding in DIV Elements

I am trying to figure out how to add a check mark next to text in a button with specific styling. I have managed to get the check mark aligned properly using Background:left center, but I also want to add padding and adjust spacing. Is there a way to achieve this using the code provided at JSFiddle? My goal is to center the check mark and give it some breathing room.

.Button {
    padding:10px;
    border:1px solid #000;
    width:auto;
    color:#CCC
}

.Button:hover {
    color:#FFF;
    cursor:pointer;
}

.Check{
    background:url('http://67.184.73.19/Munet/Assets/Pictures/OffTick.png') no-repeat;
}

.Check:hover {
    background:url('http://67.184.73.19/Munet/Assets/Pictures/Tick.png') no-repeat;
}

HTML:

<div class="Button Check" style="background-color:rgb(69,72,77);">Test</div>
javascripthtmlcssbackgroundjsfiddle

Answer №1

Here is the updated code for your fiddle with the tick correctly placed:

.Button {
  padding:10px 10px 10px 20px;
  border:1px solid #000;
  width:auto;
  color:#CCC
}

.Button:hover {
  color:#FFF;
  cursor:pointer;
}

.Check{
  background:url('http://67.184.73.19/Munet/Assets/Pictures/OffTick.png') no-repeat;
  background-position: 5px 15px;
  OR: background-position: 5px center;
}

.Check:hover {
  background:url('http://67.184.73.19/Munet/Assets/Pictures/Tick.png') no-repeat;
  background-position: 5px 15px;
  OR: background-position: 5px center;
}

Furthermore, ensure that you understand the rationale behind why this approach worked as explained in GordonsBeard's response: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position&preval=10px%20200px

Answer №2

To adjust the position of a background, you can utilize the background-position property.

background-position: <spacefromleft> <spacefromtop>;

Another option is to include it in the same background declaration.

For more information, visit: https://developer.mozilla.org/en-US/docs/CSS/background-position

.Check{
    background:url('OffTick.png') no-repeat 10px center;
}

.Check:hover {
    background:url('Tick.png') no-repeat 10px center;
}

If you want the text to align with the background properly, ensure that you provide accurate padding on your .Button (e.g., having larger padding on the left side compared to the other sides).

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

Styling Your PHP Output with Echo

Is there a way to create a compact text box with a scroll bar that can display recurring data generated by PHP activities on the server side? How can I format it in this way? ...

phphtmlcss

Updating checkbox Icon in Yii2

Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...

javascriptjquerycssyii2yii2-advanced-app

Problem related to permissions within a node.js package

Introducing my newly built npm module called emeraldfw, now available for public use. Here is a glimpse of the contents in my package.json file: { "name": "emeraldfw", "version": "0.6.0", "bin": "./emeraldfw.js", "description": "Emerald Framework ...

javascriptnode.jsnpm

`Why won't my xpath expression function properly?`

<DOC NUMBER=1> <DOCFULL> --> <br><div class="c0"> <p class="c1"><span class="c2">Document 1 of 3</span></p> </div> <br><div class="c0"> <br><p class="c1"><span class="c2"&g ...

htmlrxpath

Prevent duplicate key errors when performing bulk insert operations with MongoDB

Is there a way to perform a bulk insert and proceed even if a duplicate key error occurs? I have a collection with a unique index on the id field (not _id) and some existing data. I need to add new data to the collection while skipping any documents that ...

javascriptnode.jsmongodbnpmbulkinsert

Navigate to a different page following a successful login, without needing to refresh the current

Currently working on a login page where I need to redirect the user to another page upon successful login. I attempted using the pathname property for redirection but encountered some issues. If anyone has a recommendation for a library that can assist w ...

javascriptnode.jsreactjsnpm

Click a button to show or hide text

I am attempting to create a button that will toggle text visibility from hidden using 'none' to visible using 'block'. I have tried the following code but unfortunately, it did not yield the desired outcome. <p id='demo' s ...

javascriptcsshtmldom-events

Guide to Deactivating the ENTER Key Functionality in React Material UI Autocomplete Form

My React component features a Material UI Autocomplete form that is working perfectly, except for one issue - when the user hits ENTER, the input field gets cleared. I simply want to prevent the input field from being cleared when ENTER key is pressed. Des ...

javascriptreactjsautocompletematerial-ui

Are you experiencing issues with the map displaying inaccurate latitude and longitude when clicking on a specific point?

I've successfully created a simple polyline on Google Maps and attached a click event listener to it. However, I'm encountering an issue where clicking on the line provides me with latitude and longitude coordinates that point to Canada, even th ...

javascriptgoogle-mapsgoogle-maps-api-3

Is it possible to execute an npm package without using the npm run command?

Is there a way to initiate the next.js build process directly through the command line without needing to use the package.json file? Can we execute it without relying on npm run? Perhaps running next build in the command line could achieve this instead of ...

javascriptnpmnext.js

I'm facing an issue with binding keyboard events in Vue - any suggestions on how to resolve

Hello everyone! I'm a newcomer to the world of Vue. Recently, I encountered an issue with keyboard-event binding that has left me puzzled. Let me share the relevant code snippet below: ...other code... <template v-for="(ite ...

javascriptvue.jsvuejs2vue-component

Do not apply styling to a particular page in CSS and HTML

Utilize the teachable.com platform and take advantage of their code Snippets feature (refer to attached photo #1) https://i.stack.imgur.com/dW1lB.png I inserted the following code: div { direction: rtl; } To modify the website's direction to be ...

htmlcss

Determine the number of working days prior to a specified date in a business setting

How can I calculate X business days before a given date in JavaScript when I have an array of holidays to consider? I am currently thinking about using a while loop to iterate through the dates and checking if it is a business day by comparing it with the ...

javascriptdate

Opening new windows in Chrome after an AJAX request behaves like a pop-up

When a user clicks a button in my application, an ajax request is triggered. Following the success of this request, I generate a URL which I intend to open in a new tab. Unfortunately, when using Chrome and calling window.open within the success handler, t ...

javascriptajaxgoogle-chrome

Close the ionicPopup by tapping anywhere

Currently, I have implemented an ionicPopup that automatically closes after a certain time limit. However, I am wondering if there is a way to configure it to close with a single or double tap anywhere on the screen instead. While I am aware that setting a ...

cssangularjsionic-framework

Utilizing Regular Expressions for extracting data from an HTML webpage

Is it possible to extract the response "Here is the solution" from an HTML document using Regular Expression? <b>Previous Query:</b> <b>Here is the answer</b> ...

pythonhtmlregex

Incorrect placement of rectangle on a dynamic canvas

After clicking on two different positions on the canvas rectangle, I noticed that it was being drawn in the wrong location due to issues with the responsive canvas size. Despite attempting to scale the pointer position based on both the canvas and window w ...

htmlresponsive-designfabricjs

Transform a Javascript string or array into a JSON object

One of my challenges involves a JavaScript variable that contains values separated by commas, such as value1,value2,value3, ......,valueX, I am looking to transform these values into a JSON object. Ultimately, I plan on utilizing this object to compare ag ...

javascriptjson

(angular 8) Error occurred when converting a file or image to FormData due to an invalid value (Note: FormData object printed as Object Form{})

I encountered an issue where I am getting an invalid value from form data. The value appears correct in `this.fileData` with a size of 5701, but becomes empty when converted to form data - `{}` is logged when I console.log the form data. Additionally, acce ...

javascriptangulartypescriptfile-uploadform-data

Utilizing AngularJS to extract data from a query string

After making significant progress on my previous project, I found myself in need of some final assistance that has proven to be elusive. I successfully built my entire angular controller and populated all the necessary data for the page. However, I am str ...

javascriptjqueryangularjs