Unable to incorporate CSS background image

https://i.sstatic.net/3ZLq3.jpg[

I've been working on designing the main page using Bootstrap, but I'm facing an issue with adding a background image. I've tried multiple methods such as adding it to the CSS body and directly in the HTML code, but unfortunately, nothing seems to be reflecting on my website.

body {
  line-height: 1.7;
  color: gray;
  font-weight: 300;
  font-family: "Work Sans", sans-serif; 
  background-image: url("/images/slider_3.jpg")!important;
}

::-moz-selection {
  background: #000;
  color: #fff; }

::selection {
  background: #000;
  color: #fff; }
.btn
{

  width: 21%;
 height:250px;
  border: none;
  background-color:  #70B1D1;

  padding: 14px 28px;
  font-size: 40px;
  cursor: pointer;
  text-align: center; 

}

.btn:hover {
  background-color: #f7f5ed;
}
a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  a:hover {
    text-decoration: none; }

.text-black {
  color: #000 !important; }

.text-white {
  color: #fff !important; }

/* Navbar */
/* Blocks */
.site-section {
  padding: 7rem 0; }


The snippet above is a portion of my current CSS file that I am working with.

Answer №1

It's possible that your background image has been overwritten. Try utilizing the important option to ensure its functionality.

Answer №2

Be sure to indicate the path correctly by following this format:

background-image: url("../../images/slider_3.jpg");

Alternatively, if your images are stored in a folder at the root level, you can use:

background-image: url("/images/slider_3.jpg");

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

Modify the text color upon clicking with a TouchableOpacity component

Would appreciate help from experienced coders. I'm just starting out with coding and React. My goal is to be able to change the text color with a click, and then change it back to the original color with another click. function handleColorChange() { ...

Dynamic filtering of items using Knockout's foreach binding based on value change

I'm working on some HTML/Knockout code where I want to display a dayDivider div only when there is a new date. This means that messages from the same day should appear under a date banner. Typically, I would save the last value in a temporary variable ...

Utilizing localization files to implement language settings based on region

Having a list of countries in three different languages as: countries-fr.js countries-en.js countries-de.js The goal is to require these files inside the component based on the selected language. Currently, the approach involves importing all files ...

Code in JavaScript often includes the use of variables to store and manipulate data

Do these blocks of JavaScript code serve the same purpose? // First Code Sample var first = prompt("Enter the first number:"); var second = prompt("Enter the second number:"); var sum = Number(first) + Number(second); alert(sum); // Second Code Sample ...

Combine and convert an array of objects

Implementing JavaScript functional programming techniques, how can the `status` field of `arr1` be aggregated/counted and then transformed into an array of key/value objects in `arr2`? arr1 = [ {'task':'do something 1', 'status& ...

The content spills out of the container

I'm currently working with a div that displays scrolling text when it overflows. I am wondering if there is a way to hide the scroll bars until the text actually overflows? Additionally, is there a method to make the overflow occur only vertically and ...

Tips for transforming JavaScript array object information based on its null key value

Below is the data I currently have: let activityList = [ { "2-createdAt": "2019-12-27T13:11:04.300+0000", "2-modifiedAt": "2020-01-02T13:28:18.877+0000", "2-createdBy": "admin_tna", "2-lastModifiedBy": "admin_tna", "2-id": 2, "2-name": "Activity 2", "2- ...

Trying to draw a comparison between a text box and an individual element within

I am having some difficulty comparing user-entered text in a textbox with an element in an array. function checkUserInput() { var str = imageArray[randomNumber]; var index = str.indexOf(document.getElementById('textBox').value); ...

Highlight the text element that has been clicked

I'm looking to create a list of text elements that can be underlined when clicked individually. Adding the text decoration to the tabText applies it to all items, but I need a way to remove the underline from the previously clicked tab when clicking o ...

While creating a customer profile sample, I encountered an issue where I received an error message stating "POST http://localhost:3000/cusprofiles/add 400 (Bad Request)" when attempting to add data

I'm having trouble creating a customer profile for a vet clinic in my code. I'm unable to add and edit customer details, and I'm not sure where I've made a mistake. The only method that seems to be working is the GET method. Can someone ...

What is the best approach to managing data organization within a websocket API?

We currently have a ReactNative page that displays live data using a Websockets based API. We want to provide users with the option to sort the data based on their selected field. What is the best way to implement data sorting? I am considering two possi ...

Is there a way to clear a @font-face downloaded font from the browser cache?

Recently, I realized that I made an error in my webapp release by using a limited version of "Droid Sans" with @font-face for Latin characters. The font files are hosted on my server. To rectify this issue, I have now updated the font to the full version s ...

The picture won't stay within the confines of the container

As I work on my fitness site, I wanted to incorporate a sponsor section. While exploring some code that matched the style of my website, I discovered this snippet below. However, being new to CSS, I struggled with fixing it to ensure that the images fit ...

"Enhance User Experience with Multilevel Dropdowns in Bootstrap 4 - Submenus Aligned to the Top

I recently embarked on a project that involved using Bootstrap 4.4, The project is an eCommerce grocery store with departments comprising categories and subcategories. The main menu became very lengthy when using the default code, so I encountered some al ...

Is there a way to create optional sections within a reusable component's template in a Vue 3 application?

Recently, I've been immersed in developing a Single Page Application (SPA) using the powerful combination of Vue 3, TypeScript, and integrating The Movie Database (TMDB) API. One interesting challenge I encountered was with my versatile movie card co ...

Error in designing the ReactJS navbar (utilizing internal Bootstrap CSS)

I am facing an issue with the navigation bar in my project. When I use a link to an external source for the navigation bar, it works fine. However, when the internet connection is slow, I notice a brief loading time for the navigation bar which is quite bo ...

Tips and tricks for ensuring images maintain their aspect ratio and height when resizing for responsiveness

I am facing an issue with my two-column layout. One column contains an image and the other column has text and buttons with a fixed height. To ensure the image is responsive, I have set the width to 100% and height to auto. However, upon resizing, the aspe ...

Trouble encountered while retrieving the data structure in order to obtain the outcome [VueJs]

I am facing an issue while trying to save information from an HTTP request into a structure and then store it in local storage. When I attempt to retrieve the stored item and print a specific value from the structure, it does not work! Here is my code: / ...

A guide on organizing dates in a datatable using the dd-MMM-yyyy hh:mm tt format

I have encountered an issue with sorting the date column in my datatable. Here is a screenshot showcasing the problem. Below is the code I am using: <table id="tbl" class="table table-small-font table-bordered table-striped"> <thead> &l ...

How should one correctly align various classes in a cascading manner within CSS?

Here is an interesting challenge - I want each of these buttons to have their background image change when hovered over. However, I'm struggling with the class setup in my code. I've been trying to understand how to distinguish between divs and c ...