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

What steps should I take to make my Vue JS delete function operational?

As I work on developing my website, I've encountered some challenges. Being new to coding, I'm struggling with creating a functional delete user button. When I click delete, it redirects me to the delete URL but doesn't remove the entry from ...

javascripthtmlcssvue.js

Using App Storage on Windows Phone 8 with HTML5

Exploring storage options for my html5 app compatible with both windows 8 and windows phone 8. Considering: Local Storage IndexDB Looking for advice on the best storage mechanism to use. Is IndexDB compatible with windows phone 8? Any insights on quota ...

htmlwindows-8windows-phone-8

Changing Parameters in Absolutely Positioned Sections

I have successfully created a fixed header with a higher z-index than the body content, allowing the content to slide underneath it. To position the content div directly below the fixed header, I applied a position:relative and specified a top value. Init ...

htmlcssposition

Steps to link two mat-autocomplete components based on the input change of one another

After reviewing the content on the official document at https://material.angular.io/components/autocomplete/examples I have implemented Autocomplete in my code based on the example provided. However, I need additional functionality beyond simple integrati ...

javascriptangulartypescriptangular-materialangular6

Is there a way to display errors during jQuery validation?

Is there a specific function that can provide all error messages generated during form validation? I attempted to use the defaultshowerrors() function, but it only shows errors for the current element being validated. Is there a way to retrieve all error ...

javascriptjqueryvalidationjquery-validate

Still Facing the 'appendChild' Error Even After Defining it

Looking for assistance in creating new elements to display information on a Discord bot list I'm currently developing. var btn = document.createElement("BUTTON"); btn.innerHTML = "Try It"; document.body.appendChild(btn); ...

javascripthtmljsonnullappendchild

What is a more efficient method for generating HTML code using PHP variables?

My online store showcases a variety of products, each housed in a div with the id content block. The link, image, background, description, and price for each product are all retrieved from a mySQL table. Initially, I planned to store the HTML code below as ...

phpmysqlhtml

Compiling Vue.js without the need for a build tool

Vue.js is the framework I've chosen for my PHP + JS application, and I'm using the full build of Vue by directly including it via a script tag without any build tool. I'm now wondering how I can pre-compile my templates without relying on b ...

javascriptvue.jsvuejs2

HTML Changing the background color of the body using HTML elements

I need assistance with an exercise that requires changing the color of a letter and background when clicking on text. I have successfully changed the text color but am struggling to change the background color. Can someone provide guidance? <html> ...

htmlnodes

Basics of CSS border-image explained

Although it seems simple, I'm struggling to figure out what the issue might be. I am attempting to create a div with a specific border on an ASP.Net webpage. CSS: .ResourcesDiv { border-image:url(http://blogrope.com/wp-content/uploads/2013/06/003-w ...

htmlcssborder

Problem encountered while generating a torus shape using webGL

I am currently developing a program that aims to create 3D parametric shapes using webgl. The current code I have works successfully for rendering a sphere, but when I try switching the equations for a torus, only the upper half of the torus is being displ ...

javascripthtmlgraphicsopengl-eswebgl

What is the best way to vertically align items within a <div> using CSS in a React application?

The layout of the page looks like this: I am trying to center the Redbox (containing '1') within the "PlayerOneDiv". Similarly, I want to center the yellow box within "PlayerTwoDiv". return (<div className="App" ...

htmlcssreactjsangularflexbox

Upload file to database and move to new location

In order to gain a clearer understanding, I have a question regarding inserting data from a form. Let's say I have the following form: <form action="upload.php" method="post" enctype="multipart/form-data"> Select image to upload: <inp ...

phphtml

Using jQuery to append content with a variable as the source

Recently delving into jQuery and encountering an issue with getting my variable inside src when using append. Either it's not functional at all, or just displaying the variable name in string form in the console. Here is the code causing trouble: va ...

javascriptjqueryhtml

Are there any methods to alter the current preFilters within jQuery?

Is there a way to access and manipulate the internal jQuery preFilters using the jQuery.ajaxPrefilter() function? In version 1.11.1, I noticed a private preFilters object declared on line 8568, but it doesn't seem like there is a built-in method to in ...

javascriptjqueryajax

Learn how to trigger a re-render in React to update a value stored in local storage

I need assistance in displaying a spinner with a percentage value during file uploads within my React application. To achieve this, I am utilizing Material UI's circular progress. My approach involves making a REST call using Axios to obtain the perce ...

javascriptreactjsmaterial-ui

The functionality of a radio button triggering a form submission to different pages is experiencing issues with Firefox

This piece of code is designed to submit a form when a radio button is clicked, and depending on which radio button is selected, the form action should change. While this code works fine in Chrome and Opera, it doesn't seem to function properly in Fir ...

javascriptphp

Express.js: Initial Request Fails to Retrieve Set Cookie

In my Express.js application, I am facing an issue where setting a cookie in one middleware function results in it being undefined when attempting to access it in the following middleware function on the initial request. Strangely, on subsequent requests, ...

javascriptnode.jsexpresscookiesmiddleware

Leveraging nested objects within React state

A React child cannot be an object. If you intended to render a collection of children, utilize an array Encountering the error mentioned above has left me puzzled regarding its restrictions. Below is the code where I am facing this issue. It includes an o ...

javascriptreactjs

Updating the state after receiving API results asynchronously following a function call

I am attempting to update the state asynchronously when my fetchWeather function is executed from my WeatherProvider component, which calls an axios request to a weather API. The result of this request should be mapped to a forecast variable within the fet ...

javascriptreactjssetstate