The div element is refusing to display the background image

I'm struggling to add images as background to a div. When I try inline styling, the background-image appears fine. However, when I attempt to use an external CSS file, the image does not show up. I have carefully checked the link and made sure that the external CSS file is properly linked. Here is the code that I have tried:

.txt-op {
  background: url("assets/images/star.svg");
  border-radius: 30px;
}
<div class="container text-center">
  <p class="main-title">ABOUT US</p>
  <div class="row">
    <div class="txt-op col-sm-6">

      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>

    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

It seems that the issue only arises when linking the image via an external CSS file. However, other links within the same external file work perfectly fine.

Any help would be greatly appreciated!

Thanks :)

htmlcss

Answer №1

Another option is to encode the svg as a data-url using this tool and then use it without specifying any path 

.txt-op {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='210' width='500'%3E%3Cpolygon points='100,10 40,198 190,78 10,78 160,198' style='fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;'/%3E Sorry, your browser does not support inline SVG.%0A%3C/svg%3E");
  background-repeat: no-repeat;
  border-radius: 30px;
}
<div class="container text-center">
  <p class="main-title">ABOUT US</p>
  <div class="row">
    <div class="txt-op col-sm-6">

      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>

    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

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

I am looking to create buttons that can switch between two different styles of a specific element, like an h1 tag, when clicked. However, instead of toggling

//In this HTML document, I am trying to achieve a functionality where my buttons can toggle the style of an h1 element between the colors yellow and purple when clicked. However, I have encountered an issue where the buttons disappear during a transition ...

javascripthtmljquerycss

Exploring the usage of slots in WebComponents without relying on shadow DOM

I am working on developing a WebComponent without utilizing ShadowDOM. So far, everything has been going smoothly. However, I now aim to create a component that wraps other components similar to how it is done in Angular with @ViewChild / @ViewChildren. (I ...

javascripthtmltypescriptweb-component

The angular component cannot be bound as it is not recognized as a valid property

In an attempt to conditionally assign a class based on the value of a boolean variable, I have declared the variable in the parent component: public alteredSidebar: boolean; This is my approach for dynamically setting the classname: <div [class ...

cssangularcomponents

The fixed navbar in Bootstrap is missing a bottom margin

I have created a basic theme using bootstrap 4. The navbar in this theme has a fixed-top class. Right below the navbar, there is a div that displays the page title as its content. <div class="aloldal_text_div"> <div class="container"> < ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Changing a p element to a div and adding a class in Bootstrap 4.5

To maintain consistency, I prefer using <div class='something'>BIO</div> over <p>BIO</p>. In Bootstrap 4.5, is there a similar class that achieves the same result? I'm not very skilled in CSS, so please forgive me i ...

csstwitter-bootstrapbootstrap-4

Responsive navigation menu featuring dynamic dropdown menus using HTML and CSS

Looking to design a responsive HTML and CSS navigation menu with multiple dropdown menus? You're in the right place. I've scoured countless YouTube videos, but haven't quite found the perfect template for a two-part navigation menu that tic ...

htmlcssheadernavigationresponsive

Prevent an interruption in the flow of content by keeping the line unbroken

Having an issue with a visible line break between the content of an HTML element and its :after content. The problem arises in a sortable table where a small arrow is displayed at the top. To view the problem, check out this fiddle http://jsfiddle.net/ceu ...

htmlcsscss-content

Rearrange the position of one div to be placed next to another div and assign the float property

I have numerous divs located on my webpage, including .rightColumnBar and .divAttributes. HTML <div class="mainContent"> <div class="pageContent"> <form id="createLead" class="frmDiv clear" action="/leads/create_lead.html?lead_id=3287" nam ...

javascriptjqueryhtmlcss

Managing a significant volume of form data transmission to PHP backend

I have a moderately large HTML form with Javascript functionality to dynamically create additional 'records' within certain sections of the form. There could potentially be over 50 INPUT elements in total. I am contemplating the most effective a ...

javascriptphpjqueryhtmlforms

How about this: "Is it possible for the accordion to open when clicked and show

Screenshot illustrating the issue I need assistance with implementing a hover preview for the contents of the accordion, followed by keeping it open upon clicking. The codepen link is provided below for reference: Visit the codepen here <script src=&q ...

javascripthtmljquerycss

What is the best method for retrieving data from a database using PHP?

Currently, I am dealing with a specific issue regarding reading an auto-incremented value and utilizing it in my database. Here is the structure of my database: mysql_query("INSERT INTO category (category,image) VALUES ('$name','$default_ite ...

phphtmlmysqldatabase

What could be causing one of my images to not appear on my Gatsby page?

Hey there, I could use some help with this issue: Recently, I created a website using Gatsby.js and deployed it to my web server (which is running NGINX on Ubuntu 20.04). The site uses Gatsby Image for querying and displaying images, and everything seems t ...

javascripthtmlgatsbygatsby-image

Using an image as an onclick trigger for a JavaScript function

I am working on a registration page as part of my university project where users can create an account and store their information in a MySQL database. One feature I'm implementing is the ability for users to select an avatar picture. Below is the co ...

javascripthtmlimageonclickavatar

Use PHP to highlight the row that has been selected in an HTML table

I am currently working on a project where I have styled multiple HTML tables on my website using alternating gray and white bands. Now, my goal is to highlight the selected row in a darker shade of gray. I have experimented with various solutions, and the ...

javascriptphpjqueryhtmlcss

What is the best way to responsively position a bootstrap button?

Recently diving into the world of CSS and Bootstrap, I encountered an issue with a Bootstrap button on my webpage. Despite my efforts, I couldn't seem to make it responsive to window resizing. It feels like there's a glitch in the code somewhere, ...

htmlcssbootstrap-4

Utilize Bootstrap to incorporate a "Show More" and "Show Less

I need to create a paragraph that will display "Show more option" if the content exceeds 3 lines. When clicked, it will expand the paragraph and show a "Show less" option. Clicking on "Show less" will collapse the paragraph. This functionality must be im ...

htmlcssbootstrap-4

Compatibility of Blackberry Webworks

As I prepare to build a Webworks app, the documentation indicates that it is designed to function only on devices equipped with OS 5.0 or later. However, I am curious if there exists a way to make the app compatible with devices running an OS version lower ...

javahtmlblackberry

AngularJS mdDialog not supporting Tinymce functionality

I'm attempting to integrate the TinyMCE editor into an AngularJS mdDialog. Working Plunker: http://embed.plnkr.co/s3NsemdcDAtG7AoQRvLh/ Plunker with issues: http://embed.plnkr.co/fL8kGLl3b4TNdxW1AtKG/ All features are working fine except for the d ...

javascripthtmlangularjstinymce

What steps can be taken to modify the `select` element in IE?

I came across a solution to display an arrow on a select element in this answer: select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1 ...

css

IE11 retains radio button selection even after page reload

I am facing an issue on my webpage where I have implemented radio buttons for filtering a list. ALL (default selected with checked='checked') MATCHED REST <input type="radio" value="ALL" name="options" class="radioStyle" checked autocompl ...

htmlinternet-explorer-11