Is there a way to create a fallback for SVG in a CSS pseudoe

As I work on my website, I am incorporating some decorative elements using SVG images, but I am aware that certain browsers may not support them properly. That's why I want to ensure I have a PNG fallback in place.

I am utilizing the :after pseudo-element to add the decoration. Will this method be adequate to implement a PNG fallback?

.section header h3:after {
    content: url("../images/ornament.svg");
    content: url("../images/ornament.png");
    width: 66px;
    height: 33px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -33px;
}

Answer №1

Ensure that the .png file is prioritized.

.section header h3:after {
    content: url("../images/ornament.png");
    content: url("../images/ornament.svg");
    width: 66px;
    height: 33px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -33px;
}

UPDATE:

However, this will not fully address the fallback issue and it is recommended to explore other alternatives. Some options to consider are:

  • Polyfill solutions
  • Implementing conditional statements
  • Converting images on the server side

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

Utilizing Bootstrap Columns for Image Alignment: Struggling to Position an Image in the Center

For my latest project, I used Bootstrap to create a template that adapts well to different device breakpoints. Everything is working smoothly except for the positioning of the arrows on the sides of the image. I want them to be centered halfway down the ...

In CSS, use the p tag to make sure content fills the available space when the browser is resized beyond a certain point

Before I begin, I must clarify that I do not specialize in front-end development and my expertise in UI/UX is limited. With that said, here is my query: I have a div containing p tags. I wish for this div to have a width: 700px when the browser window is ...

Is there a way for me to extend an absolute div to the full width of its grandparent when it is within an absolute parent div?

Here is a structured example of my HTML and CSS: <div class="grandparent"> <div class="row">...</div> <div class="absolute-parent"> <div class="absolute-child">...</div> ...

I require assistance on how to properly arrange images in a div so that they stack

I'm having an issue with arranging a series of images within a div where they stack on top of each other. The div has a CSS width of 450px, and the top image always matches this width. Subsequent images vary in size and need to be aligned flush right ...

I'm having trouble with my dropdown menu functionality

My dropdown menu was functioning properly until yesterday, and now I am unable to determine what went wrong even after double-checking the code. #apDiv2 { position: fixed; width: 100%; height: auto; float: none; z-index: 6; list-style-type: ...

Is there a way to spin the picture but keep the container still?

Is there a way to animate the rotation of the gradient color without rotating the rhombus? I attempted using transform: rotate, but it ended up rotating the entire shape. Any suggestions on how to achieve this effect? .box { position: absolute; top ...

Reduce the transparency of the overlay picture

I have been utilizing the 'Big Picture' template to design a webpage. The overlay.png file adds a lighter background effect by overlaying intro.jpg with a partially transparent blue graphic. Despite my efforts to adjust the opacity and gradient/R ...

Sections stacked with Bootstrap cards are located beneath a different section

Objective The primary aim is to ensure that all sections display correctly on the mobile version of the website. Challenge An obstacle I am currently facing is: Full width (Looking good) https://i.sstatic.net/EDm3N.jpg Mobile version (Issue) There i ...

How can I adjust this button to match the size of the input field?

I'm in the process of creating a simple landing page and I've encountered an issue with the newsletter signup component. The button in the bootstrap input group template appears much larger than the input field. Here is the current code snippet: ...

IE does not support Overflow and Ellipsis in this table

FF v14 has the exact appearance I want. Unfortunately, IE9 is not cooperating as it does not hide overflow or display the ellipsis. Does anyone know how to resolve this issue for compatibility with IE9? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

Creating a list of items using HTML tags should be coded in a way that fits neatly within the main container element

UPDATE: I've come across this code that seems to be functioning somewhat as desired. You can view it live at UPDATE - It's still not aligning properly within the #main div! I've experimented with both 100% and 990px for width in #menu span, ...

Ways to prevent animations from displaying solely in IE

Is there a way to remove a keyframe animation if the browser is IE, while keeping it for Chrome, Safari, and FireFox? The animation I am referring to is defined as follows: // Animations @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } ...

Hide Details tag only on mobile view

How can I easily close the default opened <details> tag on mobile? I am working with Wordpress. Any suggestions on how to achieve this? <details open> <summary>Details</summary> Something small enough to go unnoticed. </ ...

How to Customize the Size and Color of secureTextEntry Inputs in React Native

When it comes to styling a password input like the one below: <TextInput name="Password" type="password" mode="outline" secureTextEntry={true} style={styles.inputStyle} autoCapitalize="none" autoFocus={true} /> I also ap ...

Toggle sidebar: expand/collapse

Looking for some assistance with my website project. I currently have two arrows to open and close the sidebar, but I would like one button to handle both actions instead. Can someone help me edit my code snippet to achieve this? Keep in mind that I am new ...

How to horizontally center a div between two floated elements

Check out this JSFiddle example. I'm facing a challenge in horizontally centering the div class="filter-group" between two floated buttons within the given example. I've tried various methods but haven't been successful so far. Any assistan ...

What can be done to stop Bootstrap columns from shifting positions or stacking on top of each other unexpectedly?

I'm currently working on a testimonial section for my project. The challenge I'm facing is that the content within the 4 divs is not evenly distributed. As a result, when I try to adjust the width of the screen and expect them to align in a 2-2 f ...

Preserve Original Styling Using Embedded Web Links

I'm currently in the process of creating internal page links on a website, but I'm facing a challenge in maintaining the original text formatting, which was a basic h4 heading. Despite various attempts, such as using a style with h4 settings and ...

Has CSS3 been recognized as an official standard?

Can you confirm whether CSS3 has been officially recognized as a W3C standard or is it currently in the status of "CR" (Candidate Recommendation)? ...

Can you explain the concept of fallback color in CSS?

Can you explain to me what a fallback color means? I searched online and found out that it is used to display a color when the specified format is not supported by browsers, like Internet Explorer. Is there anything else I should know about fallback colors ...