What is the best way to incorporate a dynamic background image into a panel heading using Twitter Bootstrap 3 for a responsive design?

Hey everyone! I'm having trouble adding an image as a background to my panel heading and also including an h3 inside it. Below is the code I am using:

 <div class="row col-wrap">
            <div class="col-lg-4 col">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>Simple</h3>
                    </div>
                    <div class="panel-body">
                        <ul class="list-group">
                            <li class="list-group-item alert alert-success">Smth
                            <span class="glyphicon glyphicon-ok pull-right"></span></li>
                            <li class="list-group-item alert alert-danger">smth1
                            <span class="glyphicon glyphicon-remove pull-right"></span></li>
                            <li class="list-group-item alert alert-danger">Smth2<span class="glyphicon glyphicon-remove pull-right"></span></li>
                            <li class="list-group-item alert alert-danger">Smth3<span class="glyphicon glyphicon-remove pull-right"></span></li>
                            <li class="list-group-item alert alert-danger">Smth4<span class="glyphicon glyphicon-remove pull-right"></span></li>
                        </ul>
                    </div>
                    <div class="panel-footer clearfix">
                        <h5 class="col-lg-6 col-xs-6">19 999р.</h5>
                        <button class="btn btn-success pull-right col-lg-6 col-xs-6" type="submit" data-toggle="modal" data-target="#standartCta">Choose</button>
                    </div>
                </div>
            </div>

Below is the CSS I am using:

.panel-heading{
background-image: url(../img/flowerbg.svg) no-repeat;
background-position: center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

}

Unfortunately, the background is not changing and it is still filled with the default bootstrap color.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Consider removing the "no-repeat" from the background-image property :)

The "no-repeat" should be part of the "background-repeat" property, unless you are using the plain background property, in which case you can follow the other answer suggestion :)

If you need more information, you can check out some documentation on shorthand CSS declarations here: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

.panel-heading {
  background-image: url(https://c2.staticflickr.com/6/5551/15140731082_a2c3a4a2c4_n.jpg);
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row col-wrap">
  <div class="col-lg-4 col">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3>Simple</h3>
      </div>
      <div class="panel-body">
        <ul class="list-group">
          <li class="list-group-item alert alert-success">Smth
            <span class="glyphicon glyphicon-ok pull-right"></span>
          </li>
          <li class="list-group-item alert alert-danger">smth1
            <span class="glyphicon glyphicon-remove pull-right"></span>
          </li>
          <li class="list-group-item alert alert-danger">Smth2<span class="glyphicon glyphicon-remove pull-right"></span>
          </li>
          <li class="list-group-item alert alert-danger">Smth3<span class="glyphicon glyphicon-remove pull-right"></span>
          </li>
          <li class="list-group-item alert alert-danger">Smth4<span class="glyphicon glyphicon-remove pull-right"></span>
          </li>
        </ul>
      </div>
      <div class="panel-footer clearfix">
        <h5 class="col-lg-6 col-xs-6">19 999р.</h5>
        <button class="btn btn-success pull-right col-lg-6 col-xs-6" type="submit" data-toggle="modal" data-target="#standartCta">Choose</button>
      </div>
    </div>
  </div>

Answer №2

Switch the property from background-image to background, and make sure to include !important at the end of the line (just before the semicolon).

background: url(../img/flowerbg.svg) no-repeat !important;

Check it out on jsFiddle: http://jsfiddle.net/shrmn/79crb7j9/

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

Troubles encountered with doctype while utilizing HtmlAgilityPack

My goal is to generate an XHTMl file from scratch using HtmlAgilityPack. Following the guidance provided in this Stack Overflow post, I attempted to add a doctype to the file: private static HtmlDocument createEmptyDoc() { HtmlDocument titlePage = new ...

c#htmlxhtmlhtml-agility-pack

Could columns in flexbox be stretched? It's up for debate

When using the "old" flexbox implementation, I would typically employ -webkit-box-align: start; to prevent side by side columns from being the same length. However, I am struggling to achieve the same result with the new specification. More information ca ...

cssflexbox

Implementing Mouse Scroll Click Functionality in ASP.NET with C# (Without JavaScript)

How can I add a Mouse Scroll Click (Middle Button) event in ASP.NET and C#? I have already looked into the MouseWheel Event, but it did not provide the solution I was looking for. This is the order in which mouse events occur: MouseEnter MouseMo ...

c#asp.netcsseventsmouseevent

Guide to smoothly scroll to the top of an element containing collapsible panels using Jquery

I've encountered an issue with a series of divs that are set to toggle the state of a collapsible div upon clicking (similar to an accordion widget). The functionality works as intended, but I'm facing a challenge - I want the page to scroll to t ...

javascriptjqueryhtmlscrolltop

Unclear value of button when being passed

In my Welcome.html file, I am attempting to send the value of a button to a function that simply logs that value. This function is located in a functions class that has been imported into my welcome.ts file. <ion-content padding id="page1"> <h1 ...

javascripthtmltypescriptionic-framework

Utilizing a Bootstrap grid system (or an IE-compatible CSS grid) to align elements on the provided

Looking for suggestions on achieving the following layout without using CSS grid, either with Bootstrap or IE compatible CSS grid. On large screens: Head and body stack on the left, with an image on the right covering the height of both. [&mdash ...

htmlcssinternet-explorergridviewbootstrap-4

Centered alignment with floating divs of abbreviated length

My HTML file has a structure similar to the following: <div style="float:right"> A line of text, floating to the right </div> <div style="text-align:center"> And here, several lines of<br /> text which should be centered. </div& ...

htmlcss

"Using html_attr with the attribute "href" does not return any value in the rvest package

My objective is to extract the URLs linked with specific CSS elements on a website using rvest. Despite trying various methods, such as using the html_attr function with the 'href' argument, my current script only returns NA values instead of the ...

htmlcssrweb-scrapingrvest

Creating a dynamic side navigation menu that adjusts to different screen sizes

I have been working on a project's webpage that was initially created by another Software Engineer. After he left, I continued to work on the webpage. The issue I encountered is that he preferred a side menu over a navbar using the left-panel and righ ...

javascriptjqueryhtmlcss

Enhancing jQuery Component while making an Ajax request

When a user clicks a button, I am making an ajax call to send out multiple emails. My goal is to update a "Please wait..." div before and after the call with status updates, as well as report any errors that may occur. However, I have encountered an issue ...

javascriptjqueryhtml

Issue with Fluid Square Divs and Box-Sizing

I'm currently working on creating a responsive fluid div that maintains its square shape as the page is resized. I've come across a method that involves using the following CSS code: div{ width:25% padding-bottom:25%; } However, it seem ...

htmlcss

Creating image links in this jQuery Slider plugin: A beginner's guide

Currently, I am attempting to insert links into each photo within the slider. While I have successfully done this on two other websites, I am encountering difficulties due to variations in the code structure. <a href="http://www.google.com I have expe ...

jquerycsshyperlinksliderimage

Can you provide me with instructions on utilizing PNGs to create edge masks for an image?

After experimenting with border-image and PNGs to achieve textured borders, I'm curious if there is a method for masking in a similar fashion? I recently came across the Rumchata website which showcases what I have in mind. Their background has a blu ...

htmlcssimagepngmasking

Is there a way to specifically dictate the order in which flexbox items expand or contract?

I am facing an issue with my flex container setup involving three children elements. I have specified both minimum and maximum widths for each child, but I want them to grow or shrink in a specific order as the window width changes. Ideally, Item1 should s ...

cssreactjsflexbox

Update the styling of each div element within a designated list

Looking for a way to assist my colorblind friend, I am attempting to write a script. This is the layout of the page he is on: <div class="message-pane-wrapper candy-has-subject"> <ul class="message-pane"> <li><div style=" ...

javascripthtmlcss

Image set as the background on a website

I recently started working with Groovy and Grails, designing my own personal website. I'm looking to set an image (located in the asset folder) as the background for my index.gsp page. How can I achieve this? ...

htmlcssgrailsbackground-image

The function .val() is not a recognized method

hello everyone here is the section of my HTML code: <div class="radio"> <input type="radio" name="certain" id="oui" value="oui"/> <label for="oui"> oui </label> <br /> <input type="radio" name="certain" id=" ...

javascriptjqueryhtml

Utilize Bootstrap's toggle button in the navigation bar to smoothly shift the content to the left

Recently, I encountered an issue with the navbar on my website. In the mobile version, whenever the toggle button in the navbar is clicked, it results in the website shifting to the left and causing the content to be off-center. However, when I view the w ...

cssbootstrap-5

The fixed sidebar refuses to pause before reaching the footer

I am facing an issue while building my blog. I am trying to figure out how to make my sidebar widget sticky and stop scrolling before reaching the #footer section. My widget is overlapping my footer and it would be really helpful if someone could assist m ...

javascriptjqueryhtmlcss

Issues with onClick events not triggering on transformed CSS3 elements

//My mind was completely tangled up. Everything is functioning properly, this question is inaccurate and outdated When I rotate an Element on the Y-axis and attempt to click on it, which has a bound eventListener (onClick), the event does not trigger (hov ...

javascripteventscsstransformcss-transitions