Unable to utilize CSS to swap out background image in Bootstrap 3

I am attempting to use Bootstrap 3 to display a smaller image instead of a larger one on small devices.

However, when I implement the code provided, nothing appears. If I directly put the image source in the HTML, both images are displayed in specific views. Do I need to specify a div size for this functionality to work?

Here is the HTML:

<div><img id="logo"></div>

And here is the CSS:

#logo {background-image: url('../images/logo.svg'); }

@media only screen and (max-width: 420px) {
    #logo {background-image: url('../images/logo-small.svg'); }
}
htmlcsstwitter-bootstrapmobilebackground-image

Answer №1

When you adjust the background-image, it alters the image's appearance without affecting the src attribute.

You have the option to showcase the image as the div's background directly (without using the img element):

<div id="logo"></div>

 #logo {
   background-image: url('../images/logo.svg');
   background-repeat:no-repeat;
   background-size:cover;
   width:200px;/*image width*/
   height:60px;/*image height*/
}

Remember to specify the div's dimensions as well.

As of now, there isn't a universal way to modify the src attribute of an image via CSS since it's related to content rather than style.

Some browsers may support the css rule content-url while others might not (such as Firefox). The code would look something like this:

#yourimageid {
 content:url(yourimage.jpg);
}

Nevertheless, it's not a foolproof method across different browsers.

An effective alternative is to use Javascript/jQuery for updating the src attribute directly.

$('#logo').attr('src','yourimage.jpg');

I hope this information proves useful!

Answer №2

Not sure if you have found your answer yet, but here is some helpful information.

If you want to customize the background image of an element for two devices with different dimensions using CSS, you can create separate CSS files for each device size. One for smaller devices and another for larger ones. Use the following code to ensure that the browser applies the correct CSS file for each device:

<link rel="stylesheet" media="(max-device-width: 420px)" href="css/style_420.css">
<link rel="stylesheet" media="(max-device-width: 768px)" href="css/style_768.css">

You can adjust the value of the media attribute based on your needs. For example, if your page is meant to be displayed on a device with 420px width in landscape orientation, you can use this code:

<link media="(max-width: 420px) and (orientation: landscape)" href="css/style_420_l.css">

Here is a helpful link: http://www.w3.org/TR/css3-mediaqueries/

Make sure to include this tag in the header of your page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

For customizing content values, you can refer to this link: http://dev.w3.org/csswg/css-device-adapt/

It's advisable to have a global CSS file containing common styles for all devices and separate files for each individual device.

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

Top tip: Utilize jQuery for the most effective method of adding content to the HTML of a paragraph situated

One interesting challenge I'm facing involves a textarea that stores dynamic HTML content within paragraph (p) tags. Initial HTML: <textarea rows='7' class='form-control' id='comments'><p>My variable HTM ...

javascriptjqueryhtmlreplaceparagraph

Elevate the expanded card above the others on hover instead of displacing them downward

I'm working on a grid of cards where hovering over one card expands the bottom section to reveal more content. The issue is, when it expands, it pushes all other cards down. What I actually want is for it to overlay on top of the card below it. Here ...

htmlcss

Show the checked items in the table based on the ID value stored in the array

When I click the button labeled Show checked if id values are 1 and 5, I encounter an issue in displaying checked items in the table based on their corresponding id value in the array. Essentially, I want to show the checked items in the table only if thei ...

javascripthtmljqueryarrayscheckbox

Python script utilizing Selenium is returning an empty string when trying to extract data from

When I try to retrieve the value from a dynamically loading table by clicking on the TD element, it works fine. However, when I attempt to fetch the text from the same TD element, it returns an empty string despite trying XPATH and CSS Selector methods. H ...

pythonhtmlseleniumselenium-webdriver

Steps for modifying a cell within a table using a button click

Hello, I am currently working on a project where I want to display a specific div portion when a user clicks on an image icon within a table. However, I am encountering an issue with the JavaScript code as it only shows the div portion in the first row and ...

javascripthtml

When utilizing table-cell, the padding will automatically increase within the <div>

After creating two tables using table,table-cell, I noticed that increasing padding on the first cell also results in an increase in padding on the second cell, and vice versa. How can this issue be resolved? .desc-one{ width: 100%; margin-bottom: 2 ...

htmlcss

How to partially update a function in Javascript without affecting specific lines of code

Straight to the point. I am working with a function inside a javascript class. For example: export default class gf{ iLoveThis(){ this.state.MakeMeWhole = true; callBoyfriend(); } } My goal is to override this method in another JS ...

javascriptjqueryhtmlreactjs

The AngularJS plugin "chosen" is experiencing issues with the "chosen:updated" feature, despite functioning

After successfully integrating the selected plugin into my AngularJS app, my app.js file now has the following code: myApp.directive('chosen', function() { var linker = function (scope, element, attr) { scope.$watch('countriesL ...

javascriptangularjshtmljquery-chosen

Ways to update the icon on a jQuery button

I am currently trying to modify a button on my website that looks like this: <button type="submit" class="btn blue pull-right" id="RequestNewPwd"> Submit <i class="m-icon-swapright m-icon-white"></i> </butto ...

javascriptjqueryhtml

How to eliminate the bottom border in react-native-material-dropdown

I recently integrated react-native-material-dropdown-v2 into my project using React Native. https://i.sstatic.net/aKVfi.png Is there a way to eliminate the bottom border in this material dropdown component? My React Native version is 0.62.2. ...

cssreactjsreact-native

Connecting to another page based on data list selection

I have created a datalist with multiple options and now I want to redirect to another page when one of the options is selected. Here is my initial attempt where I tried to directly add a hyperlink to the option label, but it didn't work as expected. ...

javascriptjqueryhtmlhtml-datalist

What is the method for including a placeholder with sequential numbering?

When I click on the "Add String" button, it clones the first table row with an input in the table and adds it to the table. I also need to add a +1 number in the placeholder of the copied element. How can I determine the last placeholder before copying and ...

javascriptjqueryhtml

What is the best way to implement CSS properties on Material UI components?

I've recently started exploring Material UI, but I'm having trouble understanding how the spacing properties function. I'm trying to utilize the "spacing" feature for various elements, but it appears that it only works for "Box" components a ...

javascriptcssreactjsmaterial-ui

Can you explain how to retrieve the value element that triggers a modal to display using jQuery?

I'm trying to figure out which "Edit" button triggers the show event on my bootstrap modal. After attaching a jQuery event to the modal's show event, I attempted to retrieve the target element using 'e', but it only returns the modal it ...

jqueryajaxasp.net-mvctwitter-bootstrapbootstrap-modal

Discovering the following div

<button class="volumen-btn" onclick="niceFunction()> <i class="fa fa-volume-up"></i> </button> <div class="volume-control-container" id="container1" style="display:none;"> <input type="range" name="blabla" class="volume-ran ...

javascriptjquerycsshtml

Combining Jquery scripts for seamless integration

I am facing an issue while trying to execute two different jQuery scripts simultaneously - one named balancedgallery and the other museum. Individually, each script works perfectly fine. However, when running them together, the balancedgallery script seems ...

javascripthtmljquerycss

Basic email subscriber form using PHP and HTML

Seeking assistance in creating a basic subscriber email form where users can input their email addresses. Upon submission, I would receive an email notification indicating a new subscription and the client would be informed that we will get in touch with t ...

phphtmlemail

Can you utilize CSS alone to divide a list into two vertical columns?

Here is some code that I am working with: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> I am trying to ...

cssmultiple-columns

While typing in the box I am currently working on, another CSS box is shifting around

Whenever I try to add a paragraph to my box, the other one shifts. I've checked for any issues with margins or spacing, but nothing seems off from what I can tell. I have no clue how to resolve this. Here's how it appears before making any change ...

htmlcss

What is the best method for transforming bullet points into a horizontal list?

Is there a way to display disc bullet points in a horizontal list? I've encountered an issue where setting display: inline; in CSS prevents the class definition list-style-type: disc from working. My workaround involves manually inserting disc bulle ...

htmlcsslist