Trying to display logo using 'content' property in CSS

I've been trying to display a logo on the header of my website, but I'm having trouble getting it to show up. I attempted to set the logo using HTML syntax as well as the following CSS code:

.div 
{ 
content: url (...jpg);
}

However, both methods only resulted in a small box with a question mark inside. I can't figure out why the logo won't display.

Here's what it currently looks like:

And here is the CSS code I have:

.logo::before {
  content: url(new-bcu-logo.jpg);
}

HTML:

<div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
                    <span class="sr-only">Toggle navigation</span>

                </button>

                <div class="logo navbar-brand">Student Dashboard</div>
            </div>

If you have any ideas on how I can successfully display this logo, I would greatly appreciate it.

htmlcss

Answer №1

Ensure that the file new-bcu-logo.jpg is located in the same directory as your CSS files. If you are using inline styling, confirm that the image is also in the same folder as 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

Automatically trigger a PHP reload/refresh based on user input

My website has a form that populates a table with data. Currently, after the user submits the data, they have to manually refresh the page in order to see the new data displayed. Is there a way to automatically refresh the table every time the user hits ...

phphtml

Shake up your background with a random twist

Seeking assistance with customizing the Aerial template from HTML5UP. I am interested in selecting a scrolling background randomly from a pool of images. Can someone guide me on how to achieve this? Presently, the background is defined within a code block ...

javascriptjquerycss

Troubleshooting a malfunctioning custom controller in AngularJS

<html ng-app> <head> </head> <body data-ng-controller="Myfunc"> <ol type="i"> <li data-ng-repeat="c in cust | filter:name"> {{ c.name | lowercase}} - {{c.city | lowercase}}</li> </ol> ...

htmlangularjs

Using the power of HTML5, store data locally on

I am curious about the possibility of using local storage on a different page. I want to track clicks made on one page and display it on another, but I'm not sure how to go about it or if it's even feasible. Any help you can provide would be grea ...

javascripthtml

Duration of Animated Text

Despite trying various methods, I'm struggling to adjust the duration of my animations. I want each animated text to be displayed for 2-3 seconds, as they are currently moving too quickly. How can I resolve this issue? Please note that the specific pl ...

csscss-animations

Ways to eliminate or conceal solely the play/pause symbol or button from the media player within the video tag

[Please see the screenshot attached, I am looking to remove the play/pause icon that is highlighted] [screenshot] How can I hide or remove only the play/pause button from the media player of a video tag? When I dynamically add the controls attribute using ...

javascriptjqueryhtmlcss

Tips for decoding Dropbox Public folder images in HTML

Is there a way to read and display all images from a Dropbox public folder using jQuery loop? I have successfully displayed a single image like this: Simple Image "" But how can I access all images in the Dropbox public folder if their number is unknown ...

jqueryhtmldropbox

Effortlessly browse through directory with the seamless integration of AngularJS or

Hey there! I'm working on a really cool feature - creating a list with editable inputs. However, I've encountered a bit of an issue. Is there any way to navigate through this list using arrow keys and focus on the desired input? .content ul { ...

javascripthtmlangularjs

What could be causing the incorrect updating of React State when passing my function to useState?

Currently, I am in the process of implementing a feature to toggle checkboxes and have encountered two inquiries. I have a checkbox component as well as a parent component responsible for managing the checkboxes' behavior. The issue arises when utiliz ...

javascripthtmlreactjsonchange

Expand the size of bootstrap-datepicker to fill the entire screen

I've implemented the plugin from https://github.com/uxsolutions/bootstrap-datepicker Check out the JSFiddle demo: https://jsfiddle.net/j3b089gr/ In my example, I have the calendar displayed along with the HTML code: <div class="row"> <di ...

jquerycssbootstrap-4bootstrap-datepicker

Transient Flash of a jQuery Dropdown Menu

I'm currently developing a jQuery/CSS dropdown menu for a website, and everything is functioning well except for one issue. When navigating between sub-menu items, the text color of the selected main menu item briefly changes because of the CSS border ...

javascriptjqueryhtmlcss

Is there a feature on the webpage that allows users to save clicked xy points and display them as text?

Is there a way to incorporate a feature on a website that displays clicked xy points as text, allowing them to be easily copied and pasted? ...

jsonhtmlcanvas

Submitting information to an HTML page for processing with a JavaScript function

I am currently working on an HTML page that includes a method operating at set intervals. window.setInterval(updateMake, 2000); function updateMake() { console.log(a); console.log(b); } The variables a and b are global variables on the HTML page. ...

javascriptjqueryhtml

Discover the joy of reading with wrap/unwrap to consume more content in less

I am experimenting with a 'read-more read-less' feature using a wrap method that currently only works for the 'show more' functionality. So, to clarify, if the text exceeds a certain length, I truncate it and insert a read-more-link ( ...

javascripthtmljquerycssshow-hide

Maintain the image's aspect ratio by setting the width equal to the height when the height is

I am uncertain if achieving this purely with CSS is possible, but it would be ideal. I currently have an image: <img src="#" class="article-thumb"> CSS: .article-thumb { height: 55%; } Is there a way to set the width equal to the height? My g ...

htmlcss

Change the parent title attribute back to its original state

This is in contrast to queries similar to the one referenced here. In my scenario, there is a child element within a parent element (specifically a matSelect within a matCard, although that detail may not be significant) where the parent element has a set ...

htmlangulartypescriptproperty-binding

The outcome of data binding is the creation of a connected data object

I am attempting to link the rows' data to my view. Here is the backend code I am using: [Route("GetCarCount")] [HttpGet] public async Task<long> Count() { return await _context.Cars.CountAsync(); } ...

html.netangulartypescript.net-core

Sending values to URL using the <a> tag in HTML

I currently have the selected language stored in a variable (var lan= urlParam('language')). I am trying to pass this language as a parameter (without PHP) in a URL within an "a" tag, like so: <a href="http://hotelscombined.sitewish.gr/HotelN ...

javascripthtml

What is the solution for the error message "Unhandled Runtime Error" with the description "TypeError: videoRef.current.play is not a function"?

I am currently working on implementing custom controls for a video on a Nextjs website. When using a standard HTML <video> component, the code functions as expected and clicking the custom play button successfully plays the video. However, when I swi ...

javascripthtmlreactjsnext.js

Automatically pre-fill and send hidden form

I'm working on a form and have set up a handler for the submit button like this: $( '#submit_btn' ).click( function( data ){ theForm = document.getElementById( 'realForm' ); theForm.meetingName.value = document.getElement ...

javascriptjqueryhtml