What is the best way to place a background image at the top left and bottom right corners of an HTML element?

I have a paragraph and I would like to visually mark the beginning and end of the paragraph for the user.

I have successfully displayed a background image in the upper left corner, but I am unsure how to position the background image in the lower right corner. Here is my CSS for positioning the image in the upper left:

p[class] {
    background-image: url("../../image/my_image.gif");
    background-position: left top;
    background-repeat: no-repeat;
}

I am seeking a solution that only uses CSS, without adding any additional HTML elements! I cannot use pseudo-elements in this case due to the paragraph already having pseudo-before and pseudo-after elements. So, my question is:

How can I position a background image in the top left and bottom right corners of an HTML element using only CSS (without pseudo-elements or additional HTML elements)?

javascripthtmlcssbackgroundbackground-image

Answer №1

Cyrille is close but not quite there. It should be 

background-position: right bottom;

In general, you can use numerical values. For 

background-position: right bottom;
, you can also use background-position: 100% 100%;, and background-position: left top; would be equivalent to background-position: 0 0;

For more information, refer to the W3C specifications here: 

http://www.w3.org/TR/css3-background/#the-background-position

Regarding Sree's previous comment: left: 0px ; top:0px; actually pertains to positioning the HTML element itself when using position:relative or position:absolute

Edit: If you'd like to use multiple backgrounds, you can do so as follows:

p[class] {
    background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif");
    background-position: left top, right bottom;
    background-repeat: no-repeat;
}

Check out http://caniuse.com/#feat=multibackgrounds for information on cross-browser support

Best regards,

Tom

Answer №2

In case browser compatibility is not an issue, you have the option of utilizing CSS3 multiple backgrounds. You can find more information here:

Answer №3

Have you considered experimenting with 

background-position: bottom right
as an alternative to left top?

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 is the best way to insert a chart into a div using *ngIf in Angular?

I just started using chart.js and successfully created the desired chart. However, when attempting to implement two tab buttons - one for displaying tables and the other for showing the chart - using *ngIf command, I encountered an error: Chart.js:9369 F ...

javascripthtmltypescriptchart.js

The MVC framework causing the Morris chart to omit the final xkey value

I am facing an issue with my Morris Chart where it is not displaying the last xkey value. Any thoughts on why this might be happening? https://i.stack.imgur.com/mHBQd.png Here is the data I am working with: [{"Date":"2016-07-17","Average":0.0},{"Date":" ...

javascriptasp.net-mvcmorris.js

Enhance your user interface by adding a tooltip above a button

I am currently working on creating a button that can copy content from a variable into the clipboard using TypeScript and Material-UI. Here is what I have tried: const [copySuccess, setCopySuccess] = useState(''); const copyToClipBoard = async ( ...

javascriptreactjsmaterial-ui

Define certain variables within a single document that will have an impact on others

Is there a way for me to avoid having users open a lengthy script just to make simple text changes? I am considering using variables in my index.html document to modify content in my javascript file. For instance: // index.html <script type="text/j ...

javascriptjquery

What could be causing a tooltip to remain visible even after a mouseleave event in a React application

My goal is to display a tooltip when the mouse enters an item, and hide it when the mouse leaves. I created a demo that works perfectly fine. Check out the working demo here The above code successfully shows the tooltip on hover and hides it on leave. I ...

javascriptreactjsreact-reduxreact-hooks

Why does the session variable keep changing after two page reloads?

CodeSnippet.php <?php session_start(); msgbox("Confirm your action: Are you sure?", "confirm"); $Result = $_SESSION['id'] ; print "<p id='txt'> </p>"; if($Result == 1 ) echo "Result is true"; elseif ( $Result == 2 ) ...

javascriptphpajaxsession

Receiving a NaN output rather than a numerical value

Experiencing what seems to be a straightforward syntax error, but I'm unable to pinpoint it. Controller: $scope.startCounter = 3; $scope.startTimeouter = function (number) { $scope.startCounter = number - 1; mytimeouter = $t ...

javascripthtmlangularjsionic-framework

Passport for Node.js: Securing User Access

(code updated with serialization functions - still redirecting to /failedRedirect) I'm attempting to establish basic username/password authentication using the passport library, but encountering difficulties. Even though I have set up the code to alw ...

javascriptnode.jsexpresscoffeescriptpassport.js

When selecting a new tab in HTML, the current page position remains unchanged. However, I would like the page to automatically scroll to the

In the design of my website, I have incorporated buttons that are linked to various pages using navigation tabs. However, when these buttons are clicked, the view maintains its position on the new page (e.g., halfway scrolled through the page). Instead o ...

htmlcss

Expanding Perspective in React Native

Having trouble with implementing a camera feature that isn't scaling correctly. The issue seems to be related to the styling of the container View, as when the camera is rendered independently it works fine. The goal is for the camera to activate when ...

javascriptreactjsreact-nativeandroid-camerasnackjs

Tips for generating JSON data in the correct format dynamically while continuously adding new information to the existing object

In my form, users input their email and password, which then generates dynamic JSON upon submission. However, I encountered an issue where the JSON gets corrupted when logging in with different user details as it updates the existing JSON with a new object ...

javascriptphpjson

The ajax method for loading an xml file results in displaying the undefined message

When attempting to fetch content from an xml file using ajax, the page initially displays "undefined". However, upon refreshing the page, the content loads successfully. Take a look at my code snippet below: $.ajax({ type: "GET", url: "xm ...

javascriptjqueryhtmlxmlajax

Modify the URL and show the keyword utilized in a search module

Does anyone know how to update the URL in a search bar? I'm using Redux to display search results, but the URL remains the same. How can I make the URL show the keyword being searched, like this: http://localhost/seach?q=keyword ...

javascriptreactjsreact-routerreact-redux

What are the distinctions in how jQuery behaves when an element is assigned to a variable versus in Javascript?

I've noticed that when I assign a jQuery element to a variable, it doesn't match the element in a comparison. However, if I assign a JavaScript element, it does... test1 = $(".the_div"); console.log(test1 == $(".the_div")); // This logs false ...

javascriptjquery

Plupload is not compatible with ng-dialog

I'm currently attempting to integrate plupload into a modal window that is generated by ng-dialog. Here is the code I am using: $scope.showManager = function(){ ngDialog.open({ template: '/template/fmanager.html', controller: &apo ...

javascriptangularjspluploadng-dialog

"Trouble arises when event listener fails to function following an append operation

Recently, I delved into the world of HTML/CSS and jQuery in an attempt to create a simple web game. Below is a snippet of my HTML code: function playGame() { var theLine = "<div id = \"line\">"; for (var i = 0; i < 9; ...

javascriptjqueryhtml

Send form data using ajax technology

When testing my code on localhost, everything runs smoothly. However, when I tried running it on the server, it doesn't seem to be functioning properly. $("#MyUploadForm").ajaxSubmit(options); I would greatly appreciate any assistance with t ...

htmlajax

Cease the ongoing Ajax request and switch to a new Ajax call immediately

Within this code snippet, I am capturing user input for typing and then searching it in a database. However, with each character entered by the user, a new AJAX request is triggered without canceling the previous one. My objective is to have the search fu ...

javascriptjqueryajax

Is there a way to combine two addEventListeners into one for a single click event?

preview of a to-do list app I am faced with a situation where I have two addEventListeners, one to change the text color and another to change the circle color. In Condition 1: When I click on the circle, both the text and circle colors are changed. In ...

javascriptdomaddeventlistener

How to Customize the Navbar Position in Bootstrap 3 when the Brand/Logo is Collapsed

I am currently in the process of creating my first website and experimenting with the Bootstrap 3 framework. The navbar I have selected is designed to adjust based on screen size, collapsing into a small button for use on tablets and mobile devices. Howe ...

javascriptjqueryhtmlcsstwitter-bootstrap