Incorporate images on the left and right to connect with a CSS class

I am trying to include small images to the left and right of a hyperlink. These images will vary, so I want to implement it using CSS classes for reusability. So far, I have successfully added the image either to the left http://jsfiddle.net/XAh2d/9257/

.fuss {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) center left no-repeat; padding-left: 20px;}

or to the right http://jsfiddle.net/k59zhwg3/1/

.fuss {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) center right no-repeat; padding-right: 20px;}

However, when I attempted to use two classes for both left AND right, only one image appeared: http://jsfiddle.net/7jcqxa3v/10/

.fuss-rechts {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) right no-repeat; padding-right: 20px;}
.fuss-links {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) left no-repeat; padding-left: 20px;}

 in HTML: <a class="fuss-links fuss-rechts" target="_blank" href="https://elternwerkstatt.domaincontrol.at">hier mein link</a>

Any guidance on this issue would be greatly appreciated. Thank you

csshyperlink

Answer №1

To achieve the desired outcome, you can adjust your CSS class in the following way:

    .fuss {
       background: transparent;
       background-image: url(https://customdomain.com/image1.png), url(https://customdomain.com/image2.png);
       background-position: left, right;
       background-repeat: no-repeat, no-repeat;
       padding-left: 20px;
       padding-right: 20px;
     }

Answer №2

Indeed, the behavior you are experiencing is as expected. The CSS class fuss-links is taking precedence over the background properties defined by fuss-rechts, since it appears later in the stylesheet. This is due to the cascading nature of CSS rules, where the last rule applied wins.

Based on my understanding, achieving the desired effect solely with the CSS background property is not feasible. This is because it does not offer the option to repeat elements only at the edges; it's either no repetition or repetition across the entire element width. You can refer to this source for more information: https://css-tricks.com/almanac/properties/b/background-repeat/

One workaround could be to move the images to <img> tags within the <a> tag and utilize position: absolute; to achieve the desired visual effect. An example demonstrating this approach can be found here:

https://jsfiddle.net/7jcqxa3v/22/

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 on adjusting a standard CSS layout with JavaScript and jQuery to generate a unique ID for the updated style

My CSS contains IDs that look like this: <style> .HIDE-DISPLAY-k { background-color: orange; position: fixed; width: 100%; height: 100%; top: 10px; bottom: 0px; left: 10px; right: 0px; overflow: hidden; } #SHOW- ...

javascriptjqueryhtmlcss

Text in SVG file misaligned at the edge

After creating an SVG with a base64 background image and two text areas for top and bottom texts, I encountered an issue on Internet Explorer and Edge. The problem is that the bottom text is aligned to the left instead of the center, and its position is in ...

javascripthtmlcsssvgmicrosoft-edge

Having trouble aligning page in the center with flexbox and styled components

Hey there, I'm having some trouble figuring out how to center my page using flexbox within styled components in a Next.js app. Any suggestions or tips? Let me share with you my Blog Component import ReactMarkdown from 'react-markdown' impor ...

htmlcssreactjsnext.jsstyled-components

What is the best way to implement horizontal content scrolling when an arrow is tapped in mobile view?

I recently created a JS Fiddle that seems to be working fine on desktop, but in mobile view, the square boxes have horizontal scrolling. Here are the CSS codes I used for this particular issue: @media only screen and (max-width: 767px) { .product-all-con ...

javascriptjquerycssscrollcss-shapes

Ensure that breadcrumb links remain on a single line by using text truncation in Bootstrap 5

For creating breadcrumbs in Bootstrap 5, the documentation suggests the following code: <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home ...

cssbootstrap-5

Every time I click the highlight button, my navbar link inexplicably shrinks

I am struggling with adjusting the list style in my bootstrap navbar. Whenever I click on the highlight button, it squeezes my navbar and I'm not sure how to fix it. <div id="links"> <a href="index.html">Home& ...

htmlcssheaderbootstrap-5

Achieving text alignment with icons in Angular

I'm having trouble aligning my text with the icon next to it despite trying to adjust margins. I would really appreciate any help or suggestions on how to resolve this issue. <div class="notification" [ngClass]="{'no ...

htmlcssangularformstext

Is it possible to have Mobile WebKit store the click position?

I am in the process of developing a unique framework specifically designed for WebKit devices. One of the features I have implemented is a series of list views that activate a 'hover' class when users touch them. Below is the jQuery/JavaScript co ...

javascriptjqueryiphonecssmobile-webkit

Designing a blurred and distinct margin with the hover effect in html and css

Hey there, I've been attempting to replicate the hover effect on the buttons located on the left-hand side of this site , but unfortunately, I haven't had much success. The effect seems to involve a shift in margin and an unevening of margins tha ...

htmlcssbuttonhover

Font may seem more slender in Firefox and Safari compared to Chrome where the appearance is impeccable

I am currently working on achieving consistent font appearance across Mac Chrome, Safari, and Firefox (IE compatibility to be addressed later). My experiments have included: -webkit-font-smoothing: subpixel-antialiased; The font appears almost identica ...

htmlcssgoogle-font-api

Creating a Responsive Design with Bootstrap 4 - Adjustable Height Structure

I am facing an issue with my website built on Bootstrap 4. I am trying to make a layout that utilizes the full height of the screen. I had expected the new "flex" grid system in Bootstrap 4 to facilitate this, but it seems like I might be implementing it i ...

htmlcssflexboxtwitter-bootstrap-4

What is the best way to apply a semi-transparent background to my navigation bar, while maintaining a blue background across my entire page?

Currently, I have a background set for my website along with a navigation bar that displays my name and additional information. I am looking to make the background of this navigation bar semi-transparent so that it is possible to see through it. I tried ...

htmlcss

Utilizing Bootstrap 4: The Use of an anchor tag in a button element

I am facing a situation where I have an icon represented by the HTML code <a>, which acts as a link redirecting to a different page. This <a> is nested inside a collapsible button, meaning that clicking on the icon expands the menu before actua ...

htmlcssbootstrap-4

Experiencing problem with hover:after effect on Internet Explorer 8

I've been working on incorporating the CSS effect found on this website: Everything seems to be functioning properly except for the fix provided for IE8. I added some conditional code so that the fix is only applied to <= IE8, and as a result didn ...

csspseudo-class

Container contents are spilling out of control after adjusting container height to auto

I'm facing an issue on my webpage where the text overflows the container div, even after setting the height to auto. Here's how the page is structured: <html> <head> <body> <div id="wrapper"> <div id="inner_wrapp ...

htmlcss

What could be causing the misalignment of the Datepicker calendar in Material UI?

I have integrated a datepicker using the library "@mui/x-date-pickers/DatePicker". import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { Locali ...

javascriptcssreactjsmaterial-uidatepicker

Suggestions for creating a <div> that takes up the entire space when using the display property set to flex

html, body { height: 100%; margin: 0px; } .container { display: flex; width: 100%; height: 100%; background-color: yellow; } .box { flex-shrink: 0; } <div> <div class="container"> <div class="box"&g ...

htmlcss

Utilizing a lone web element per row on a responsive webpage: A guide

click here for imageCurrently using the latest version of selenium web driver. Is there a method to utilize a single webelement (as a list webelement) in order to access row data on a responsive web page? For instance, consider the following CSS in the br ...

javacssseleniumselenium-webdriverresponsive-design

I'm finding it a bit difficult to arrange the placement of these DIV

Struggling with a layout issue here. I have a total of 4 DIVs that I want to position in a specific way: Initially, I floated DIV 1 to the left and DIV 4 to the right, which worked as expected. However, things get messy as soon as I try to include DIVs 2 ...

csshtmlcss-float

What could be causing my jQuery function to not correctly update the class as specified?

Presented is a snippet of script that I execute at a specific moment by echoing it in PHP: echo "<script>$('.incorrect-guesses div:nth-child(2)').removeClass('empty-guess').addClass('incorrect-guess').text('2' ...

phpjavascriptjqueryhtmlcss