Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,

I have created a unique SVG image to use as a background, but it's not displaying in Internet Explorer 8 and earlier versions. I tried using tools like or http://code.google.com/p/svgweb/, but they only support SVG for IMG and Object elements, not backgrounds.

Here's the code I used:

background:url('img/bck_hero.svg');

Does anyone know how to set an SVG as the background in IE8/7 or provide a fallback image? Are there any javascript libraries that can help with this?

Thanks in advance,

Harley

htmlcssinternet-explorer-8svgbackground-image

Answer №1

One method involves utilizing JavaScript to identify support for SVG and then applying different styles based on that determination.

By incorporating modernizr, you can implement the following approach in your CSS:

#myElm.svg { background:url('img/bck_hero.svg'); }
#myElm.no-svg { background:url('img/bck_hero.png'); }

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

Tips for accurately aligning a relative p tag within a td

Description: I am trying to prevent text overflow in a table cell and position the text underneath a header without wrapping it under an image. I have tried setting a static width for the image and adjusting the left property, but it is not working as expe ...

htmlcsshtml-tableposition

ReactJS creating trouble with incorporation of CSS in Table

I've noticed some strange behavior with the alignment of my table data. It seems to be all over the place. How can I fix this issue? Is there a way to specify column widths and ensure the text starts from the same position? Take a look at the table b ...

cssreactjscss-tables

I require an HTML <select multiple> element that includes a disabled option

Can anyone help me figure out how to create a multi-select box with a disabled element? I want the box to have the following options: All ----or---- option 1 option 2 I don't want the "----or----" option to be selectable. Here's the code I&a ...

htmlselect

Discover the elusive tag that holds the specified text

My code snippet in HTML looks like this: <body> <div class="afds"> <span class="dfsdf">mytext</span> </div> <div class="sdf dzf"> <h1>some random text</h1> ...

pythonhtmlbeautifulsouphtml-parsing

Incorporating Ace Editor into a jQuery UI Resizable Element

I am attempting to create a resizable Ace editor by placing it inside a resizable component. Despite my efforts with the jQuery UI Resizable component, I am unable to get the ace editor to display within the resizable component. Code: <!doctype html> ...

jqueryhtmljquery-uiace-editor

Is it possible to eliminate the background color by double clicking on a row within an HTML table?

I am currently working on an HTML table with jQuery functionality that allows for highlighting a row when selected, and double-clicking to remove the highlight. Additionally, I would like to ensure that only one row is selected at a time. The code below s ...

jqueryhtml

Inserting a crisp white divider between items in breadcrumb navigation in the form of arrowheads

I have designed a unique custom breadcrumb with an arrow shape : <ol class="breadcrumb-arrow"> <li class="active"><a href="#">1. Foo<span class="arrow"></span></a> </li> <li ...

htmlcss

Jquery Timer that can be toggled on and off with a single button

I'm really struggling to find a way to make this work smoothly without any bugs. The button in the code below is supposed to perform three actions: Initiate a countdown when clicked (working) Stop the countdown automatically and reset itself when it ...

javascripthtmljquery

What are some alternative ways to arrange this main navigation bar?

Check out the website, below the map you'll find an unordered list: HTML code: <ul class="play_navigation"> <li class="active"><a href="#" class="barino_story_bottom">The Story</a></li> <li><a href="#" ...

jqueryhtmlcssxhtml

Using `preventDefault()` will also block any text input from being entered

Note: I am looking for a way to clear the text box using the enter key after typing some text. My apologies for any confusion caused. Update 2: The missing event parameter was causing all the issues. I feel like a failure as a programmer. I am trying to ...

javascripthtmlpreventdefault

Tips for positioning buttons using HTML and CSS

Looking for some help with my HTML page design. I have a few buttons that I want to style like this: https://i.stack.imgur.com/3UArn.png I'm struggling with CSS and can't seem to get them positioned correctly. Currently, they are displaying "bel ...

htmlcss

Ways to position divs without causing them to collapse or override existing divs

I am currently developing a demonstration in which users can select jQuery areas to create square blocks. When a user selects an area and adds a comment with color, the entire block is displayed at a specific position. This feature is working perfectly as ...

javascriptjqueryhtmlcssjquery-ui-selectable

Connect a controller in AngularJS to a service property

I've been encountering an issue with updating my value in the controller. Initially, it works fine with the property value but fails to update later on. Despite trying various methods and going through multiple threads, I can't seem to get it to ...

htmlangularjs

How can I position my navbar above my background image using Bootstrap?

I am a newcomer to using bootstrap and I am attempting to create the following design: https://i.sstatic.net/EV9A1.png In the design, the navbar is situated on top of the background image. However, with my current setup, this is what I have: <!DOCTYPE ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for customizing the appearance of an HTML5 progress bar using JQuery

Here is my method for obtaining the bar: let bar = $('#progressbar'); Styling and animating it is no problem, using either of these methods: bar.css(...) bar.animate(...) However, I am wondering how to adjust the CSS specifically for the prog ...

jquerycsshtmlanimationstyles

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

I encountered a problem in my Angular 2 project using TypeScript that I could use some help with. I am making a request to an API and receiving a token successfully. In my response handler, I am checking for errors and displaying them to the user. Oddly en ...

javascripthtmlangulartypescript

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Currently facing a puzzling issue with an 'undefined' exception. Developing a tool to track distance traveled between two locations, leveraging Google Maps distance matrix. Upon selecting a vehicle, entering an origin and destination, and clickin ...

javascripthtmlgoogle-maps

Is it possible for me to position an element beside the element before it?

Imagine a traditional layout consisting of paragraphs grouped with a sidebar. However, there are two issues with this setup: first, the browser displays the sidebar (typically used for navigation) before the main content, causing problems for screen reader ...

htmlcssresponsive-design

Difficulty with the responsiveness of a website due to issues with the bootstrap grid system

I've been working with a Bootstrap grid that you can find at . While it works perfectly on large desktop screens, everything is a bit messy on mobile devices. The "NEW" text specifically is not visible on mobile and doesn't seem to be responsive. ...

cssbootstrap-4grid

Rapid HTML coding dilemma

Currently, I am in the process of quickly marking up my webpage. One issue I am facing is that I would like my title to be displayed below my <nav> tag instead of beside it. Can anyone provide guidance on how to achieve this? Here is the current HT ...

csshtml