Adjust the default dimensions of the background image

My CSS file includes the following code:

input.myInput {
background-image:url('search.png');
background-size:120px 120px;
}

In my HTML file, I have the following input element:

<input type='text' class='myInput' >

I would like to change the background image size. Can anyone help me with this?

Answer №1

Make sure to set the image URL using background-image instead of background-size.

input.myInput {
    background-image:url('search.png');
    background-size:120px 120px;
}

If you want to adjust the size of the image, simply change the pixel units in the background-size. For example, try background-size:60px 60px;.

To make sure your image fills 100% of its container, use

background-size: 100%;

or

background-size: contain;

Answer №2

This method is foolproof. Click on the Codepen link to see it in action.

Cascading Style Sheets

.customInput {
  background-image: url('http://www.freeiconspng.com/uploads/search-icon-png-21.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
}

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

Populate an HTML select with data as users click the create button

Encountering an issue when loading data into an HTML select after users press or click a button. The situation is as follows: A button is available to create another button dynamically Upon clicking the created button, a form is displayed Once the form i ...

Creating a personalized music player using an audio tag with HTML, CSS, and JavaScript

I am currently working on developing a unique music player from scratch without utilizing the "controls" tag within the audio element. My goal is to build something akin to the SCM Music Player. I've chosen not to use the SCM-provided player due to it ...

What is the most efficient way to organize an array by date?

Here is the data I have: const data = [{date: "2022-05-10 13:36:00", open: 155.535, low: 155.4, high: 155.67, close: 155.44}, {date: "2022-05-10 13:35:00", open: 155.23, low: 155.2102, high: 155.62, close: 155.53}, {date: "2022-05 ...

Enhancing User Experience with Bootstrap V5 Form Validation and Sweetalert2: Displaying a Message of Success Upon Successful Submission

I am currently working on implementing a simple form using Bootstrap 5 that includes validation. My goal is to display an alert message when the form field is successfully submitted using Sweetalert2. Below is the code I have: HTML <form action=&q ...

Create a copy of a JQuery slider

Hello there, I'm a first time poster but have been reading for a while now. I've been working on creating a simple jQuery Slider and I'm facing an issue... I want to create a slider that utilizes minimal jQuery and can be easily duplicated o ...

What is the best way to prevent a Bootstrap modal from refreshing the page when clicking an ASP.NET button?

I've encountered an issue while trying to display data in a Bootstrap modal view. The data is fetched from a database and successfully shown, but only for a brief moment before the page automatically refreshes. Below is the HTML code: <div class=" ...

Swap out the variables in your function with the values selected from the dropdown menu

I've recently started delving into writing JS functions and I'm facing a challenge with the following scenario: On an HTML page, I want to change a variable within a lodash function based on the value of a dropdown and display the result in a HT ...

Navigation buttons that move the user either up or down the page

I am a beginner in programming and I wanted to create two buttons for my webpage. One button should appear when the page is scrolled more than 300px and take the user to the top, while the other button should be displayed immediately and scroll the user to ...

I am interested in incorporating jQuery into my React development project

I'm trying to implement jQuery in React. I have an input field in my project that I am using to create a match event with 'this.state.value'. When the content of the input field matches, I want the borders to turn green and red if they do no ...

Achieving full child div coverage within a bordered parent div on Chrome

I am encountering an issue where I am trying to insert an image into a bordered div, but in Chrome 96.0 there are unexpected margins appearing from the top and left that I cannot seem to remove. Below is the code I am using: .wrapper { width: 36px; ...

Interactive section for user input

I am looking to add a commenting feature to my website that allows for dynamic editing. Essentially, I want users to be able to click on an "Edit" span next to a comment and have it transform into an editable textarea. Once the user makes their changes and ...

Having trouble with the tool tip not showing up correctly in Internet Explorer?

Check out the code snippet below: <table> <tr> <td class="bgimg" valign="middle" width="10%" title="some title" nowrap> <img src="images/SomeLogo.gif"/> </td> </tr> </table ...

A single background image split into several div elements

I am facing an issue regarding the background image placement in multiple divs. When I set the position to fixed, the image repeats when I resize the screen. However, changing it to absolute causes each div to have its own image. Is there a solution to fi ...

jQuery Slider Showing Incorrect Images

My jQuery slider is acting strangely. It hides the first image, shows the second one, but then just repeats the cycle by showing the first image again instead of loading the third one. I'm puzzled about what could be causing this issue in my code. Do ...

What impact do varying screen sizes have on the width of CSS?

Can someone explain what this CSS code actually does: .class { width: 800px; } I've noticed that on my laptop screen, the element appears to be exactly 800 pixels wide. However, when I view it on my tablet screen, it shows up as 1600 pixels wide. Th ...

Tips for incorporating fading text and a CTA into your content block

I am looking to protect the full content of my blog posts and allow access only to subscribed members. I want readers to see just a glimpse of the article before it disappears, prompting them to take action with a Call to Action (CTA) like in the fading te ...

Creating a personalized scroll bar for an Angular Material Table while retaining the original table styles

Is there a way to maintain the table style of an Angular Material table while using a custom scrollbar with a transparent background? Currently, the issue arises when the scrollbar has an extended width, causing the table style to disappear. https://i.ss ...

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...

The Jquery css on my website is not functioning properly

After creating a website feature where clicking on a specific div triggers an onclick event processing a chat_generate function, I encountered some issues. This funciton should insert HTML for the chat into a designated .open_div based on the id generated ...

Is there a way to relocate the play again button below the box?

How can I ensure that my "Play Again" button moves up to align perfectly under the black border box? The black border box is styled with a class named .foot .button { background: rgb(247, 150, 192); background: radial-gradient(circle, rgba(247, 1 ...