Inserting a picture using CSS

I attempted to include an image in a footer div, but I have not been successful with the following approach:

Here is the HTML code I tried:

<footer>
 <div class="imagenFooter" style="background-image: url(&quot;./images/footer-bg.jpg&quot;);"></div>
 <div class="footer-fluid" itemscope="" >
  <div class="container">
   <img class="logo_footer" alt=""><span class="direccionFooter" itemprop="address"></span>
   <nav class="enlacesFooter">

I expected the image to appear in the Image footer section based on my CSS attempts below, but it did not work.

.imagenFooter {
    background-image: url('/images/footer-bg.jpg');
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

I need to add the image using CSS only. Any help would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

To make sure the image appears, adjust the padding within your <div> element. You can play around with the padding value to find the right fit for your image size. Additionally, remember to use !important to override any conflicting styles in your HTML code. Here's a sample snippet you can try:

.imagenFooter {
    background-image: url('https://via.placeholder.com/500x100')!important;
    padding-top: 20%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
} 
<footer>
 <div class="imagenFooter" style="background-image: url(&quot;./images/footer-bg.jpg&quot;);"></div>
 </footer>

Answer №2

Erase 

 visibility: hidden;

By setting visibility: hidden, the content remains there but hidden from view.

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

Angular's ng-disabled feature seems to be experiencing a delay in functionality

While editing the file, I have the ability to modify the filename and add additional files for versions. Once a file has been chosen, the filename edit field should be disabled immediately. Despite attempting the following code, the field remains enabled u ...

htmlangularjsfileangularjs-ng-disabled

Can a single character within a span be located and customized using only CSS techniques?

My inquisitive mind believes that the answer lies in the negative, however, CSS3 pseudo-selectors have the ability to work their magic almost like performing illusions on a stage. In an absurd context, I am determined to locate and style the period charac ...

csscss-selectors

Combining D3.js tooltip positioning with CSS overflow styling

I am encountering an issue with displaying tooltips in D3 when combined with CSS overflow. Is there a solution available for this particular problem? CSS code: #chart1 { overflow-x: auto; overflow-y: hidden; max-width: 800px; max-height: 22 ...

cssd3.js

Obtaining connection data in jsPlumb can be accomplished through a variety of

I have created a compact table of nodes that allow me to drag and drop connections or manually input node IDs to establish connections between them. Despite searching through the documentation and scouring the internet for examples, I am struggling to fin ...

javascriptjqueryhtmljsplumb

Using $app->render() in Slim PHP allows you to specify the relative path to external dependencies

When rendering an actual HTML site that includes external dependencies like JavaScript and CSS using PHP, there may be issues with resolving the dependency paths when using methods such as $app->render("./somewhere/index.html") or simply echoing out the ...

phphtmlrestslim

Altering the ASP DropDownList's background color solely with CSS modifications

Is there a way to change the background colors of dropdownlists in my C# web app using CSS instead of specifying each one individually? In simpler terms, I'm trying to avoid having to write out code like this for multiple dropdowns: private void For ...

c#cssasp.netdropdownbox

Utilizing CSS Grid to dynamically stretch and wrap rows based on adjacent siblings within a flat DOM structure

Looking for a way to create a grid layout that adjusts row sizes based on adjacent siblings. Interested in SCSS or CSS solutions using grid, flexbox, or other techniques. https://i.sstatic.net/Ump5U.png I am working with a dynamically generated list base ...

csssassflexboxcss-grid

Saving HTML form data to a text file

I have a form on my website's index.html that looks like this: <form id="demo" action='submit.php' method='post' enctype='text/plain'> link: <input type='text' name='web'></br> <i ...

phphtmlforms

Scrolling horizontally through content of unspecified width

Imagine having a content div displaying a long line of text. I want this content to be enclosed within a wrapper div that has a fixed height and the ability to horizontally scroll if the content exceeds the width of the wrapper div. Here are two possible ...

htmlcss

Adding a unique custom button to a Bootstrap input field

I found something similar to what I need: input[data-icon] { padding-left: 25px; background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left; background-size: 20px; } https://i.sstatic.net/WYJZj.png However, thi ...

bootstrap-4

List style image does not serve its intended purpose

I attempted to personalize my webpage by adding an image to a list, but I couldn't get the list-style image to work. You can view the page at Below is the code I used: CSS /* Fleet List */ ul#flotta li { list-style-image:url("http://ctp.serviziew ...

csshtmlimageliststyles

What is the best way to remove bootstrap when transitioning to a new microfrontend?

Our team is facing an issue with styling when using a combination of React, Bootstrap, and Tailwind. The problem arises when linking our micro frontend to modules that use Tailwind, as the Bootstrap styles persist despite the change. Since both Tailwind an ...

cssreactjswebpackbootstrap-4

Is there a way to verify if an AJAX request calls HTML content?

Here is the HTML code for a mosaic of images. <div id="container"> <img id="1" /> ... <img id="20" /> </div> This script creates a mosaic layout from the images on the page after it has loaded or been resized. <script& ...

jqueryhtmlajaxonload

Why do the back button and custom scroller behave differently on two different webpages?

I’ve added the malihu custom scroller to my website, but it’s behaving differently compared to how it works in the demo. I can’t seem to figure out what's causing this discrepancy. For reference: Demo: check here Website: visit here The fo ...

htmljquery-pluginsback-buttonscroller

Is there a Page Views tracker in sinatra?

Help needed with implementing a page views counter using Sinatra and Ruby. I attempted using the @@ variables, but they keep resetting to zero every time the page is reloaded... Here's an example: Appreciate any advice! ...

javascripthtmlrubysinatra

Employing delegate for switching roles between classes

I'm having trouble using the jQuery delegate function to toggle classes. What I want to achieve is toggling the class of <li class="unselected-values"> to <li class="<li class="unselected-values"> when the client clicks on the label ...

jquerycssrazordelegates

Simply drag your files onto the form for quick and easy uploading upon submission

Would like to know how to enable drag-and-drop file selection for uploading files synchronously upon form submission. Understanding the basics of file uploading using HTML and PHP, I am seeking a way to process these files in PHP along with those in the $_ ...

phpjqueryhtmluploaddrag-and-drop

Is it possible to display or hide a spinner within a span using Javascript and AJAX?

When submitting a contact form, I want to display and hide a spinner on the submit button. The spinner should be visible while the form is being submitted and hidden once the submission is complete. Below is the code for my submit button with the spinner: ...

javascriptjquerycssajaxtwitter-bootstrap

Design a clickable div element embedded within an interactive article using HTML5

Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code: HTML: <article id=&apo ...

javascriptcsshtml

A common occurrence is for jQuery/Javascript Ajax POST to generate 6 identical posts when used within a .each loop, happening approximately 20

Context: Building a jQuery mobile phonegap application with multipage-ajaxload and sisyphus enabled form that utilizes an AJAX POST loop to interact with a GUI database. The process involves posting 171 section entries, along with one summary entry to a se ...

javascriptjqueryhtmlajax