Problems with Displaying Background Images in Bootstrap

I'm new to this and I've encountered an issue that's baffling me when trying to display a background image. Everything works perfectly fine when I link to an image like this:

.backg {
  height: 100%;
  background: url(http://formdoctors.com/creese79/msc/pages/med_background.jpg);
  background-position: center center;
  background-size: cover; 
}

However, when I attempt to point to the image path like this, the background fails to show up.

.backg {
  height: 100%;
  background-image: url(med_background.jpg);
  background-position: center center;
  background-size: cover; 
}

If I can successfully link to it using the first method, I assume the file name is correct, it exists in the folder and displays perfectly fine, and the CSS is accurate with no other overrides present. Why does the first method work but not the second one??

Answer №1

Are the image and CSS stylesheet located in the same directory as the HTML page?

Verify the file path of both the image and CSS file. The path should be relative to the CSS file, rather than the HTML file.

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

Utilizing Bootstrap to set a dynamic background image that spans the entire width of a table

The background image on my About page is not displaying correctly. The first < div > in my container shows it as intended, but the second < div > has white bars on the sides of the table. As a newcomer to Bootstrap and HTML, I hesitated to see ...

Ensuring multi-line text is properly aligned with Font Awesome icons

I'm facing a challenge with aligning an icon with text to its right in a multi-lined content. Currently, the setup looks like this: <p style="text-align: left;"> <i class="fa fa-example-icon" style="margin-right: 20px;"></i> ...

Animation effects compatible with iOS devices are professionally crafted using CSS

I just implemented a custom hamburger menu with animation using HTML, CSS, and JavaScript on my website. The animation works perfectly on Android devices but not on iOS. Any suggestions for fixing this issue? I attempted to add the Webkit prefix to each p ...

How about: "Is there a way to show items in a list without using

I have removed the bullet points from an unordered list, but I am having trouble displaying Log with every message. The code I have doesn't seem to be working as expected. I want users to be able to differentiate between messages easily, without seein ...

CSS - Make the entire div clickable while leaving a specific area non-clickable

I have a block containing some information. Within this div is a hidden button labeled .remove. Clicking on the main block will take you to another page, while hovering over the div will reveal the button. However, clicking the button also navigates you aw ...

Tips for utilizing flexbox and React-Native to ensure a cropped image takes up the entire View

I'm trying to create a cropped image that fills the entire screen in my app. Currently, my code looks like this: https://i.stack.imgur.com/9DtAc.png However, I want the small square of Homer eating donuts to occupy the entire screen, similar to the ...

Animate.css: activate animations upon entering the viewport during scrolling

I'm currently testing out animate.css for my project. Here's a snippet of my code: <h2 class="lazyload animate__animated animate__rotateInDownLeft" data-link="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min ...

What is causing this particular area to remain unaffected by the blur effect?

issue I followed a tutorial to create a mouse trailer from this video - https://www.youtube.com/watch?v=kySGqoU7X-s. However, when I tried adding text and other elements inside a div, the blur effect just didn't show up. I attempted using z-index but ...

Clicking on the mat-icon-button with the matSuffix in the password field will always trigger a

Seeking assistance with implementing mat-icon-button matSuffix in Angular for a login page. This is my first time working with Angular and I am facing an issue with the password field. I have used mat-icon-button matSuffix, but whenever I click on the ico ...

Some div elements are not compatible with the jQuery hover function

Being from Germany, please bear with me as I navigate through my English :D I've been working on implementing a hover function in jQuery to change the background color of certain divs on my webpage. However, I've encountered an issue where not e ...

How to use jQuery to extract a particular text from an anchor tag

If I want to choose a specific anchor text and make changes to it, I can do so by targeting anchors with a certain href attribute. For example, on a page with multiple unordered lists, each containing different links: <ul> <li><a href="v ...

Scroll vertically to navigate through sub-menus in the menu bar

My goal was to design a vertical menu containing numerous sub navigation options, but due to the overwhelming number of sub nav items, it exceeds the size of the window. Setting overflow: auto; and a specific height resolves this issue, however, the third ...

Utilize an A-frame conditional statement to check a variable and dynamically display various glTF models depending on its value

Is it possible to use JavaScript and A-frame () to create a scenario like this? I want to have an onload function named load() that will evaluate the value of variable x. If x is equal to one, I want the gltf with the ID of 1 to be visible while hiding th ...

Styling Scrollbars in Datatables

I need assistance on styling a specific datatable scrollbar using Webkit. Below is the code snippet: id ::-webkit-scrollbar-track { background-color: transparent; border-radius: 5px; } id::-webkit-scrollbar { width: 13px; } ...

What is the best way to extract data from dynamically generated radio buttons?

UPDATE I previously attempted the recommended adjustments in the initial response, but encountered issues with radio buttons allowing multiple selections and the label number controlling the top radio button. Subsequently, I have experimented further...I w ...

The mobile application on iPad only supports rotating in three specific directions

There seems to be an issue with the app not rotating when my iPad is in portrait mode, with the home button at the bottom and the camera at the top. However, rotation works fine in all other directions - landscape and portrait (when the camera is on the bo ...

challenges in populating arrays with Javascript

After performing certain actions, I have generated an array of data. Upon submitting the page, the control will redirect to the second page where I need to populate the array data into tables using Javascript only. The problems I am currently facing are: ...

Switching out images in a responsive column grid on hover using JQuery

I'm currently troubleshooting my code and would appreciate any help with debugging. The main goal is to swap out the image within the ".col" element on mouseenter and revert back to the original image on mouseleave. Additionally, I'd like to prel ...

Troubleshoot: Issues arising when loading DataTables using AJAX with MYSQL

For some reason, I'm receiving an invalid JSON response from this code. The objective is to showcase SQL data in a table with search and sort functionalities using https://datatables.net/. Can you pinpoint where the issue might lie? GET.PHP $mysqli ...

Sliding Toggle: Panel Revealed with Button Slide

Currently, I am working on implementing a jquery slide tab feature. The functionality is working fine on button click. However, I want the button to stick with the panel and slide along with it. At the moment, the button remains fixed while the panel slide ...