Just obtained a new Bootstrap Template and currently in the process of personalizing it by replacing the default image with my

I'm facing an issue with the image in the masthead of a Bootstrap Template. I tried to change the image URL to my desired picture in the CSS file of the downloaded Bootstrap files, but even after saving it, the image on the page remains the same old one that I deleted. Interestingly, when I add the new URL in the CSS file using Chrome's Dev Tools, the preview displays exactly what I want. However, implementing the same changes in my actual code within the C9 workspace doesn't reflect any updates, and Bootstrap continues to use the old default image despite me removing it completely from the Workspace. If anyone can help pinpoint where I might be going wrong, I would greatly appreciate it.

The Bootstrap CSS

header.masthead{position:relative;background-color:#343a40;background:url(../img/bg-masthead.jpg) no-repeat center center;}

I am trying to change it to

header.masthead{position:relative;background-color:#343a40;background:url(http://www.4usky.com/data/out/94/164852092-the-riddler-wallpapers.jpg) no-repeat center center;}
cssbootstrap-4

Answer №1

Unfortunately, hotlinking is not permitted on 4usky.com. To use the image, you will need to download it and host it from a different location before referencing it in your background URL.

Answer №2

To achieve the desired result, simply enclose the URL path within quotation marks.

 header.masthead{position:relative;background-color:#343a40;background:url('http://www.example.com/image.jpg') no-repeat center center;}

Hopefully this resolves your issue.

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

Replicate the Bootstrap flexbox grid system with customized media breakpoints

I'm trying to replicate the flexbox grid system found in Bootstrap. Everything is working smoothly except for the media query aspect. The columns are stacking horizontally as intended, but when a specific breakpoint is reached, I aim to have the divs ...

csssassbootstrap-4

When I adjust the height to 100%, Google Maps fails to show up on the screen

When I try to set the height of the gmaps div to 100%, nothing appears on the screen. I am able to set the width to 100%, but for some reason, setting the height to 100% does not work. If I set a specific height like 400px, it works fine. Below is the cod ...

cssgoogle-mapsjsphtml

Is it possible to have a hidden div box within a WordPress post that is only visible to the author of the

How can I create a div box with "id=secret" inside a post that is only visible to the author of the post? I initially made it for the admin, but now I want the id to be visible exclusively to the post's author. For instance: If the author is curren ...

javascripthtmlcsswordpressprivacy

I am experiencing difficulty getting my component to properly implement the bootstrap NavBar and NavIcon styles

I am new to using bootstrap with react and I am facing an issue where the dimensions are not being applied to my Navbar and Navbar Icon. I have already installed dependencies and used className instead of class, but still no changes are visible. import Re ...

javascriptreactjsbootstrap-4

Enhancing dynamic text boxes with jQuery by incorporating additional information

I've recently developed an interactive app that dynamically creates tables based on user input. The app includes a feature where you can specify the number of tables to generate and track the total count of tables added. Currently, I'm exploring ...

jqueryhtmlcss

Trigger a function from a Bootstrap modal

Here is a preview of my HTML code : <form action="form2_action.php" method="post"> <table> <tr> <td>First Name </td> <td>:</td> <td><input type="text" id="f ...

javascriptjqueryhtmlcsstwitter-bootstrap

Text reveal animation in Framer Motion is not functioning as expected

I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...

cssreactjsnext.jsgsapframer-motion

HTML/JS Implementation: Back to Top Visual Element

- This website appears to be quite simple at first glance. However, I have encountered an issue where every time I scroll down and then click on the "About" menu option, it abruptly takes me back to the top of the page before displaying the section with a ...

javascriptjqueryhtmlcss

Sizing elements vertically using CSS

Struggling with getting the content area on my web page sized and aligned correctly. I want it to utilize all the vertical visible screen space, leaving 80px at the top and 20px at the bottom. Sometimes, the page may extend further down, requiring scrollin ...

htmlcssvertical-alignment

increased space between tables in HTML email design for optimal display in Gmail inbox

Here is the link to my code: http://jsfiddle.net/user1212/G86KE/4/ I am experiencing an issue in Gmail where there is extra white space between 2 tables inside the same cell. I have attempted using display:block; margin:0; padding:0; line-height:0; How ...

htmlcsshtml-email

When hovering over an image, another image is revealed

<div> <a href="#"><img src="images/Informasjon_button.png" width="120px" height="120px" /></a> </div> <div> <a href="#"><img src="images/Mail_button.png" width="120px" height="120px" /></a> </div ...

javascriptjquerycsshtml

Direction flex property

Could someone please clarify the significance of maintaining flex direction as column in this scenario? Changing it to row or row reverse causes some parts of the image to shrink in width. Check out the JS Fiddle example: https://jsfiddle.net/fbshqg0c/7/ ...

htmlcssflexbox

Leap over in a similar fashion to the provided demonstration

In my attempt to create a unique project, I have created this CodePen example. The goal is to have one ball on the circle that remains in a fixed position, while another rotating main ball must avoid touching it at all costs. Points are awarded for success ...

javascriptjqueryhtmlcss

Troubleshooting ASP.NET Content Page Error: jQuery Object Expected

Currently working on designing a personal ASP.NET Web page, I have encountered an issue with making a sticky div using jQuery. Despite all my other jQuery functions functioning properly, the sticky div seems to be causing trouble. stickydiv.js $(document ...

javascriptjqueryhtmlasp.netcss

Having trouble sending the information to Parse.com using the website

I am a beginner with the Parse database and I am currently working on implementing a code that allows users to sign up, with their information stored in the Parse database. However, I am encountering an issue where the values are not uploading as expected. ...

javascriptjqueryhtmlcssparse-platform

Is there an efficient way to quickly verify if a large number of elements have a specific class using a query parameter or string

My goal is to create a filtering feature where users can choose from categories "a", "b", "c", "d", and "e". Users can come to the page with a specific query string like http://example.com?cate=a, http://example.com?cate=b, etc. The categories sorting butt ...

javascriptjqueryhtmlcss

Display a div upon loading with the help of Jquery

Two divs are causing me trouble! <div id="loader"> </div> and <div id="wrapper"> </div> "The wrapper div is not located inside the loader div just to clarify." This is my code: $(window).bind("load",function() { $(&apos ...

jquerycssloadingwrapper

Changing badge colors dynamically in Bootstrap

I'm currently working on a simple web application using Django and Bootstrap 4.5. Within one of my models, there is a color attribute that I would like to visually represent using Bootstrap's badge. My goal is to dynamically set the badge's ...

cssdjangotwitter-bootstrapbootstrap-4colors

Having trouble getting Bootstrap 5 to work with a position-relative row?

I am having trouble placing the * sign on the left side. Whenever I try to do so, it only works if I remove the row class. <!doctype html> <html lang="fa" dir="rtl"> <head> <meta charset="utf-8"> ...

htmlcssbootstrap-5

Ensure the background image completely fills the div, regardless of the image's aspect ratio

Can anyone help me figure out how to fill a div's background with an image, regardless of its aspect ratio (landscape or portrait)? I've tried different methods from using background-size: cover; to background-size: 100% 100%;, but the div doesn& ...

htmlcss