What is the best way to display a background image on top of a border

I have a question about styling a tag. I want to add 25px padding and a 15px border from the left, while also using an arrow background image. Is it possible to display this background image above the border?

Below is the HTML code:

<a id="arrow">List</a>

And here is the corresponding CSS:

a#arrow { 
    background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
    padding-left:25px;
    border-left:15px solid #f1f1f1;
}

You can view a demo of this setup on jsfiddle.

css

Answer №1

One way to add your background is by using the :after pseudo-element

CSS

#arrow:after {
    content:''; /* enable after element */
    position: absolute;
    top: px; /* set the background position */
    left: px; /* set the background position */
    background: url(img/your-bg.png) no-repeat;
    width: px; /* set the width of the background */
    height: px; /* set the height of the background */
}

Don't forget to include position:relative to the #arrow

Answer №2

To display your image using background position, you can follow these steps. Check out this demo

Your CSS code should look like this:

#icon{ background:url('https://cdn3.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-20.png') no-repeat;
padding-left:15px;
border-left:10px solid #e4e4e4;
background-position: -25px;
}

Answer №3

To display them on top, utilize the background-position attribute with pixel values.

For example:

background-position: xxpx (for horizontal) xxpx (for vertical);

Note: xx represents placeholder values that can be substituted with real numbers.

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

What are some techniques for concealing a CSS transition beneath another element in both directions?

Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clev ...

javascriptjqueryhtmlcsscss-transitions

There has been an unexpected transformation in the website design when using Chrome on large widescreen monitors

Last week, I updated the design of my website and tested it across various browsers and devices. It's a portfolio site built with Bootstrap, and everything looked good. However, this morning when I viewed my website on my widescreen monitor using Chro ...

htmlcsstwitter-bootstrapgoogle-chromewidescreen

CSRF validation did not pass. The request has been cancelled. The failure occurred due to either a missing or incorrect CSRF token

Upon hitting the submit button in the login form, I encountered the following error message: Forbidden (403) CSRF verification failed. Request aborted. CSRF token missing or incorrect. settings.py MIDDLEWARE = [ 'django.middleware.security.Secur ...

javascripthtmlcsspython-3.xdjango-rest-framework

Design the border of the highlighted section within the table using CSS

Is there a way to access the edge (top, left, right, bottom) width css for a selectable table using jQuery UI selectable, or do I need to use JavaScript? Update: By "accessing the edge," I mean creating a border around a selected area in a table (selectin ...

csshtml-tablecss-selectorspseudo-class

Tips for making an image resize automatically within a parent Grid container in Material UI

I am attempting to resize the image inside a Grid to match the size of the parent Grid. I have tried using minheight and height properties, but they do not seem to be effective. I also attempted to use a styled component for this purpose. return ( ...

cssreactjsmaterial-ui

Unable to customize the button color within the Bootstrap framework

This button was created using Bootstrap. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <lin ...

htmlcsstwitter-bootstrap

Ways to establish the gradient

Here is the code snippet I am currently working with. .imgcol1 { background-image: url(https://picsum.photos/200/300); background-repeat: no-repeat; background-size: cover; height: 190px; width: 520px; } .col1 { margin: 75px; } .grad { b ...

cssbootstrap-4bootstrap-5linear-gradients

Angular 4: Conditional CSS classes causing issues with transitions

After scouring through stackoverflow, I have yet to find a solution to my current issue. I am utilizing a conditional class on a div that is applied when a boolean variable becomes true. Below is the code snippet in question: <div [class.modalwindow-sh ...

htmlcssangulartypescript

Similar stylesheet produces varying outcomes on browsers other than Chromium

My CSS is producing different outcomes on various browsers, particularly on non-chromium browsers such as Firefox, while the results remain consistent on chromium-based browsers like Google Chrome and Opera. It seems to be a browser compliance issue. How ...

htmlcssgoogle-chromefirefoxchromium

Achieving Vertically Centered Alerts with Responsive Functionality in Bootstrap 5

I have implemented an alert that looks like this: <div id="success-alert" style="display: none; color: darkgreen; text-align: center; top: 50%; z-index: 9999" class="alert alert-success alert-autohide" role="al ...

cssbootstrap-5

What is the best way to add a box shadow to just one side of an element?

Is there a way to apply an inset box-shadow to only one side of a div? I am specifically referring to an inset shadow, not the usual outer box-shadow. For instance, in the JSFiddle below, you can observe that the inset shadow is visible on all four sides, ...

css

Encountering issues with the functionality of my Bootstrap navbar

After diving into the world of bootstrap, I encountered some challenges with the navigation bar in mobile view. Despite adding a navbar and a toggle button, it doesn't seem to be functioning correctly. Following tutorials and examples meticulously, bu ...

htmlcssbootstrap-4

Display fewer search results initially and have the option to view more when hovering

I am working with a PHP function that generates a ul element. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> I am looking to display the list in a li ...

phpjquerycsshtml-lists

Is it feasible to add to an ID using ngx-bootstrap's dropdown feature?

In the documentation for ngx dropdown, there is a feature called "append to body." I recently tried changing this to append to a table element instead and it worked successfully. Now, on another page, I have two tables displayed. If I were to assign each ...

cssangularngx-bootstrap

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

cssvue.jsvuetify.js

Creating a stripped box shadow with just HTML and CSS - a simple guide

Hey there! I'm trying to create a navbar button with a cool stripped box shadow effect when hovered, similar to what you see in this image link. I attempted to achieve this using CSS box-shadow and linear gradient, but unfortunately it didn't qui ...

htmlcss

Use jQuery to calculate the width of the wrapper and evenly divide it among the div elements inside

Seeking assistance with a dynamic div wrapper containing multiple inner divs. The number of inner divs will vary, requiring a script to determine how many are present and adjust their widths to fit perfectly within the wrapper. <div id="wrapper"> &l ...

jquerycss

What is the best way to align the bottom of an element with the browser buttons panel on mobile devices?

When viewing the website on a mobile device, I noticed that the floating button is hidden behind the browser buttons panel. Is there a way to adjust the positioning of the element relative to the browser's buttons panel? I attempted using env(safe-ar ...

htmlcssmobile

Styling tables with borders in CSS

If a table is set to have a border at a high level, how can I ensure that classes inheriting from it do not have any borders set? table,td,th { border: 1px solid #0B6121; } How can I make sure that my other table has no borders at all? table.menu { ...

css

Is JSF h:outputStylesheet converter the solution for creating dynamic CSS?

Recently, I came across the <h:outputStylesheet/> tag with a converter attribute. I tried attaching a dummy (pass-through) converter to it, but to my surprise, nothing happened. Upon further investigation, it appears that the converter is not even in ...

javacssjsf-2