Using jQuery to apply a background image in CSS

Currently, I am attempting to utilize jQuery to set a background image for an HTML element.

<div class="rmz-srchbg">
    <input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox">
    <input type="submit" value="&nbsp;" id="srchbtn" class="rmz-srchico">
    <br style="clear:both;">
</div>

$("#globalsearchstr").focus(function(){
    $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat;");
});

Unfortunately, the above code does not seem to work as expected. When the element is focused, the only change that occurs is that a style attribute is added to the HTML, as shown below:

<div class="rmz-srchbg" style="">

</div>

There is no observable change in the CSS.

javascriptjqueryhtmlcss

Answer №1

Give this a shot:

<div class="custom-search-background">
    <input type="text" id="searchField" name="search" value="" class="custom-textbox">
    <input type="submit" value="&nbsp;" id="searchButton" class="custom-search-icon">
    <br style="clear:both;">
</div>
<script>
$(function(){
   $('#searchField').on('focus mouseenter', function(){
    $(this).parent().css("background", "url(/images/custom-search-bg.png) no-repeat");
   });
});
</script>

Answer №2

Try using:

 $(this).parent().css("background-image", "url(/images/r-srchbg_white.png) no-repeat;");

as opposed to

 $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat;");

For more instances, check out this link

Answer №3

give this a shot 

 $(this).parent().css("backgroundImage", "url('../images/r-srchbg_white.png') no-repeat");

Answer №4

Give this a shot

$("#globalsearchstr").focus(function(){
    $(this).parent().css("background", "url('../images/r-srchbg_white.png') no-repeat");
});

Answer №5

Take out the semi-colon following no-repeat, in the url and give it a shot .

$("#globalsearchstr").focus(function(){
    $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat");
});

Answer №6

To properly format the css rule string, the semicolon needs to be removed:

$(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat");

Answer №7

<div class="rmz-srchbg">
  <input type="text" id="searchInput" name="search" value="" class="rmz-txtbox">
  <input type="submit" value="Search" id="searchButton" class="rmz-srchico">
  <br style="clear:both;">
</div>

$(document).ready(function() {
  $('#searchInput').bind('mouseenter', function() {
    $(this).parent().css("background", "grey");
  });
});

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

Creating PNG and JPEG image exports in Fabric.js with the help of Node.js

Exploring the wonders of Fabric.JS specifically designed for Node.JS, not intended for web applications, I've successfully created a Static Canvas and added a rectangle to it. Now, it's time to export the image. Take a look at my code snippet bel ...

javascriptnode.jspngfabricjsfs

Vue.js - Maintaining input value when model declines updates

I am working on a text input that allows users to enter numbers with a maximum of three digits after the decimal point: <v-text-field type="text" :value="num" @change="changeNum($event)" /> <p>{{ num }}</p> ... export default { data: ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Is there a way to cancel hiding on a q-dialog?

I'm currently working on integrating a confirmation modal within a dialog box that includes form input fields. The purpose is to alert the user when they try to exit without saving their changes. The modal should appear every time the user modifies th ...

javascripthtmlvue.jsdialogquasar

Is there a way to create a Vue component that can process dynamic formulas similar to those used in

I am looking to create a component that has the ability to accept different formulas for computing the last column. The component should use these formulas in Vuex getters to store the total state values passed to it. Here are the specifications for the c ...

javascriptvue.js

Having trouble getting the CSS Transform property to be affected by ScrollTop

Hello everyone, I am attempting to create a ball that has a 50% radius and rolls left based on the user's scroll movements. So far, I have successfully made it move left in relation to ScrollTop, but unfortunately, I cannot get the transform property ...

jquerycssjquery-animatecss-animationsscrolltop

The hide-columns feature in Ng-table does not allow for manual column hiding from the controller

I've configured ng-table with checkboxes to toggle column visibility, and it's functioning smoothly. Here's the HTML: // Switchers to show/hide columns <div style="margin-bottom: 20px"> <label class="checkbox-inline" ng-repeat= ...

javascripthtmlangularjsngtable

The data visualization tool Highchart is struggling to load

As I try to integrate highcharts into my website, I encounter an unexpected error stating TypeError: $(...).highcharts is not a function. Below is the code snippet in question: @scripts = {<script src="@routes.Assets.at("javascripts/tracknplan.js")" ty ...

javascriptjqueryhighcharts

Unlimited Possibilities in Designing Shared React Components

Seeking the most effective strategies for empowering developers to customize elements within my React shared component. For example, I have a dropdown and want developers to choose from predefined themes that allow them to define highlight color, font siz ...

javascriptcssreactjssassnext.js

The application of CSS transition fails in the context where top property is set as auto

I have been exploring an online tutorial that almost met my requirements. However, I encountered a challenge with the CSS 'transitions' effects. Basically, I need the text to be positioned at a specific distance from the top because the title wi ...

htmlcsscss-transitions

Is it possible to utilize a map in Python or incorporate other advanced functions to efficiently manage indices?

When working with higher order functions in JavaScript, we have the ability to access the element, index, and iterable that the function is being performed on. An example of this would be: [10,20,30].map(function(element, index, array) { return elem + 2 ...

javascriptpythonlambdahigher-order-functions

Having trouble getting overflow:auto to work with CSS3 transformed child elements? Looking for a recommended workaround?

Issue: Browsers (FF5, Chrome12, IE9) are not recognizing css3 transforms applied to a child element inside a div when calculating the scrollHeight and scrollWidth of the containing div's scrollbars with "overflow: auto;". <style type="text/css"> ...

htmlcsscss-transforms

Is it possible to delete and substitute all content following a specific DIV tag?

Is there a way to utilize JavaScript or jQuery to remove all content following a specific div element and insert new code? The div elements are generated dynamically, and I need to remove everything after the last div that looks similar to: & ...

javascriptjqueryreplace

Can someone please explain the functionality of "next()" in middleware and how it operates?

Currently, I am following a tutorial by Net Ninjas on node.js and attempting to create my own examples to solidify the concepts in my mind. For reference, I refer to the GitHub source code available on their profile. However, I have encountered an issue at ...

javascriptnode.jsexpressservermiddleware

Discovering the font-weight attribute in Selenium IDE

Currently, I am working with Selenium IDE and aim to detect when a text element has the 'font-weight:bold' CSS property applied to it using 'verifyAttribute'. The specific CSS locator being used is: css=body.home.es ul#languages li:nt ...

cssdomseleniumcss-selectorsselenium-ide

What is the best way to compare dates in order to obtain the necessary results?

Question : Filter the JSON array to retrieve specific entries 1: All entries with name "Sam". 2: All entries with date "Dec 2019". // JSON Data provided below. var data = [{ "id":"27", "0":{ "name":"Sam", "date":"2021-02-28" ...

javascriptnode.jsangular

Is there a method to view text options that are too long within a fixed width <select multiple> HTML box?

Here is the code I am working with: <div id='div2' style='height: 430px; width: 350px; overflow:auto;'> <select multiple id="id" size="28" style="FONT-SIZE: 12px; FONT-FAMILY: Arial; width: 100%"> It's a challenge bec ...

htmlcssselect

Sending data via req.body from middleware

One middleware function is defined as follows: app.use('api/', authenticate, bar); In the authenticate function, a variable is being attached to req.body like so: req.body.user = foo; However, when trying to access req.body.user inside the ba ...

javascriptnode.jsexpressmiddleware

Starting up jQuery VSDoc in WebMatrix

Just a quick question - I'm attempting to enable jQuery intellisense in WebMatrix 2 Beta using the CDN. So far, I've created a blank .js file with the following reference (note that WebMatrix 2 Beta uses "file" instead of "path"): /// <refere ...

jqueryvisual-studiowebmatrixjavascript-intellisense

Contrast between the expressions '$(<%= DDL.ID %>) and $('<%= DDL.ID %>')

I spent hours trying to attach an event to a drop-down list with no success. I even sought help in a JavaScript chat room, but couldn't find a solution. However, by randomly attempting the following code: $('<%= ddl.ID %>').bind(&apos ...

javascriptjqueryasp.net

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below: The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages ...

htmlcss