My issue is with the <div> that has a css rule for a background image.
HTML
<div class="myclass">Hello world</div>
CSS
.myclass
{
background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
background-repeat: no-repeat;
background-position:left;
border: 1px red dotted;
}
Is there a way to align the background-image inside the div with the text?
P.S: I am unable to add another div (or any other element) within the current div
To adjust the text, add padding to the div element.
.myclass
{
background-image: url('http://www.travel-adventure.com/icons/spinner.gif');
background-repeat: no-repeat;
background-position:left;
border: 1px blue dashed;
padding-left: 30px;
}
Utilizing the ::before pseudo element can help achieve this effect.
Check out a demo on jsFiddle here
.myclass:before {
background-image: url('http://www.example.com/spinner.gif');
background-repeat: no-repeat;
background-position:left;
content: "";
display: inline-block;
width: 16px;
height: 16px;
}
One of the main benefits of using this technique is that it will only indent the first line of text, even if the text spans multiple lines.
Include the text-indent CSS property in order to keep the background image pinned at the top, preventing it from moving when text wraps to a new line.
.myclass {
background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
background-repeat: no-repeat;
background-position: 2px 2px;
border: 1px red dotted;
text-indent: 20px;
}
Check out this CSS snippet DEMO HERE
.myclass
{
border: 1px red dotted;
}
.myclass:before
{
background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
background-repeat: no-repeat;
background-position:left;
padding-left:20px;
content:'';
}
I am currently working on making a webpage responsive. I have successfully created a logo div that resizes accordingly. Now, I am facing a challenge with centering the buttons in the menu list. Despite my efforts, the buttons are not aligning in the center ...
In my HTML, I have a table as shown below: var selector = $("#searchResultsArea"); $.getJSON(url, null, function (data) { selector.empty(); var html = "<table id=\"tabRoom\" style=\"width: 950px; border:none\" class=&b ...
My goal is to create a feature where users can drag and drop words from a list into input fields. I want the capability to do this multiple times with the same word, allowing it to be placed in different input fields. This functionality will essentially i ...
Hello everyone, I am currently working on a project using node.js in a Windows environment. With the help of the express module, I am trying to create a static page that includes a Submit form. When someone clicks the "Submit" button, I intend to execute a ...
I'm facing a challenge that I've been trying to resolve using just CSS, but I've hit a roadblock. The issue at hand involves aligning multiple spans next to each other and making them equal in height. The height is not fixed and depends on ...
I have been encountering an issue with my PHP code that is used for performing calculations. The code is designed to take inputs from textboxes and calculate the total based on those values. However, when I click the button intended for calculating the tot ...
Why is it so challenging to create a two-column form layout using CSS? All I'm trying to achieve is: Name: John Smith Age: 25 Description: A long text that should wrap if it exceeds the border, while still aligning with the first l ...
Looking to run a PHP script using AJAX or JavaScript from an HTML form and then receive the results on the HTML page. This is what my changepsw.php file looks like: <?php // PHP script for changing a password via the API. $system = $_POST['syst ...
My PHP page is programmed to refresh and retrieve values from the database, but unfortunately it goes blank after some time. The refreshing process works perfectly fine, but the issue arises when the page suddenly becomes blank. The code I utilized for re ...
I am facing an issue in my Angular project where the scss rules that define how components should look when within the context of another component are not being applied when I build for production and put it live. Here is an example: :host-context(my-tabl ...
How can I achieve a gradient effect within a circle using the following initial code: HTML: <div class="progresss"> <div class="barOverflow"> <div class="bar"></div> </div> <span>10</span>% </d ...
I created a div block that houses a form structured like this: <div class="divClass"> <form id="frm" method="post" action="/NotDefinedYet/index.xhtml" class="frmClass"> <input type="text" name="j_idt9:j_idt10:Username" placehold ...
Within the HTML code, there is a photo already added as an SVG file. I am interested in learning how to enable the user to select between two options - either a cross or a zero. Upon clicking on the designated area, the chosen figure should appear (resembl ...
Does anyone know how to import CSS files into Vue components so that their scope is limited to the components only? I attempted importing the files into the style tab of a single component file with the scoped property, but it seems like all the CSS gets ...
I'm in the process of creating a newsletter signup form that can segment subscribers into distinct audiences using a checkbox as a toggle. Those in group one (who have not checked the newsletter box) will be categorized under the "Tutorial Audience", ...
I'm experiencing an issue with the dropdown menu on my blog (). It doesn't seem to be functioning properly. I've included the HTML & CSS codes below. Even after trying to change the display properties to block and inline, the dropdown m ...
Currently, I am in the process of developing a menu that seems to have some flaws. One issue is that it appears a bit choppy, but the more concerning problem is the half-second delay after clicking an item before it animates. The concept behind this menu ...
I am currently in the process of building a website that requires the inclusion of images along with corresponding headings and descriptions. When viewing the website in full screen, the heading displays on a single line. However, as the browser width decr ...
In my application, there is a menu that opens the document properties window when clicked. However, I am facing an issue where the application menu gets inherited by the document properties window itself, allowing you to open another document properties wi ...
I'm currently facing an issue with a dynamically generated HTML table from a JSON file. Each row in the table consists of a dropdown list and a checkbox. I need the checkbox to be disabled when the default value is selected in the dropdown, and enable ...