Placing an emblem after the header wording

Within my h1 tag, I have a header text that I would like to display alongside a small icon on the right side.

The length of the text can vary, which presents a challenge in alignment.

I attempted to use a background image with no repeat, but it ends up positioned too far to the edge of the div element.

Is there a way to ensure that the background image always lines up at the end of the text? Perhaps using a different approach than the one I previously tried?

h1 {
background-image:url(images/quotemarks.png);
background-repeat:no-repeat;
background-position:right;
htmlcssimagebackground

Answer №1

Give this a shot:

p:before {
    content:url(img/quotes.png);
}

EXAMPLE

Answer №2

If I follow correctly, by including a span element with an image inside the h1 tag along with some CSS styling, you should achieve the desired outcome... possibly...

HTML:

<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="end"><img src='some icon.png'/></span>
</h1>

CSS:

h1{
    display:inline-block;position:relative; padding-right:2em
}
.end{
    position:absolute; right:0; bottom:0; width:2em
}

View the live demonstration here: http://jsfiddle.net/aXjzg/2/

For more insights, visit: Place 'floating' contents at the bottom right of a paragraph of text

Answer №3

If you want your heading to display inline and have some extra padding on the right side to contain a background image, you can try something similar to this:

<style>
    .h1-with-image {
    display: inline-block;
    padding: 0 15px 0 0;
    background: url('/image.jpg') no-repeat top right;
        }
</style>

<h1 class="h1-with-image">Heading</h1>

Check out an example here: Example

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 have the sidebar of a webpage slide out over the main body content that is being displayed?

Issue Summary I am experiencing an issue with the positioning of my sidebar, which is initially located 66% offscreen using -translate-x-2/3. The sidebar is meant to be pulled into view onmouseover, however, the main body content remains stuck in place. I ...

javascripthtmltailwind-css

a single column with a div of varying height using flexbox

I need to create a div with a height of 120px using only the CSS property display: flex. I am not allowed to use float and can only use div elements. Here is the code I have so far, but I'm unsure how to achieve the desired outcome: .flex-containe ...

htmlcssflexboxdisplay

What is the process for publishing HTML webpages using IIS?

After successfully developing several webpages, I am now ready to deploy them on my localhost. But how exactly can I go about this process? I attempted to create a virtual directory and transferred the HTML pages, CSS, JS, and images into it. Unfortunatel ...

htmliis-7

Can a small white pop-up be triggered by clicking a button?

While exploring the website , I noticed that clicking on Availability Zones opens a small window with text on the right side of the page. Is it possible to achieve a similar feature on a leaflet map without using JavaScript? This functionality would be tri ...

javascripthtmlcssleafletwindow

The functionality for selecting text in multiple dropdown menus using the .on method is currently limited to the first dropdown

Having trouble selecting an li element from a Bootstrap dropdown and displaying it in the dropdown box? I'm facing an issue where only the text from the first dropdown changes and the event for the second dropdown doesn't work. <div class="dr ...

javascriptjqueryhtmltwitter-bootstrap

What is the process for integrating three.js code manually into an iframe?

I recently posted a question on Stack Overflow inquiring about how to input code into an iframe without using a file or URL. While I was successful with simple cases like <h1>Hello World</h1>, my ultimate goal is to integrate three.js into thes ...

javascripthtmliframethree.js

Require a selection from the menu on the right side needed

I am looking to have the logout link displayed on the far right when the other menu items are hidden. Currently, it is appearing in the center. Is there a way I can make it show up on the right? <div class="nav-content container"> &l ...

htmlcssasp.net

Mixing percentage width with a fixed minimum width in CSS results in divs failing to align in a single line

Having an issue with the responsiveness of a website layout that includes three columns (let's say 'A', 'B', and 'C') each 96% high, along with a footer. Columns A and C have a width of 35%, while column B is set to be 30 ...

htmlcssresponsive

Utilizing CSS to Select Specific Sections

I'm curious about how to target a section element with a specific id like #dress in CSS3. Here is my code snippet: <section id="dress"> <p>Lorem Ipsum..................................of Lorem Ipsum.<> </section> Here's ...

css

Click to switch divs

I am struggling and in need of help. I have been trying to rotate divs on click using jQuery, which was successful until I had two sets of divs that needed to be rotated independently on the same page. When clicking on the arrows to rotate the content in t ...

jqueryhtmlcss

What steps can I take to enhance the responsiveness and overall performance of this code using bootstrap?

Struggling with making your website responsive? No worries, we've all been there. Whether you're a pro at coding in react.js and vue.js or a complete beginner, we all need to start somewhere. Any suggestions or tips on how to improve responsivene ...

htmlcssbootstrap-4

Combining the Power of Bootstrap with Yii Framework

As a newcomer to the Yii framework, I am looking to incorporate my Bootstrap design into this platform. One issue I have encountered is related to my custom CSS. In Bootstrap, we use navbar-default for styling the navbar. I customized my navbar color by ...

phpcsstwitter-bootstrapyii

Tips for displaying span value within asp.net web pages

I have an HTML code snippet that looks like this: <tr> <td> <span>Full Name:&nbsp;</span> </td> <td> <span id="FullName_PDLabel"><b>--</b></span> </td> & ...

htmlasp.net

apply a border-radius to the top right corner only without affecting the other sides or background

I have been working on creating the top right triangle design shown in the image. However, I encountered an issue where applying border radius seems to affect all sides instead of just one as intended. Despite using border-top-right-radius: 5px;, I am not ...

htmlcssborder-box

New replacement for routerState.parent feature that has been deprecated in angular2

During my work with Angular 2 rc5, I encountered the following code snippet. this.router.routerState.parent(this.route).params.forEach((params: Params) => { url = params['url']; id = +params['id']; }); I had to resort to th ...

javascripthtmlangularjsangularangular2-routing

Issue with transition delays on specific elements within a containing element

I'm currently developing an intro animation for a website, where the children are supposed to slide up from the bottom (margin-top: 80px). The container is set with a fixed height and overflow:hidden to create a smooth appearance. Each child has a tr ...

javascripthtmljquerycssanimation

Firefox's keyup event

Is it possible to detect a keypress using the jQuery keyup function, as I am facing an issue where it works in Chrome, Edge, IE, and Opera but not in Firefox. $(".textfield").contents().keyup(function(evnt) { document.getElementById("btn_save").style. ...

javascriptjqueryhtmliframejquery-events

CSS3 animations can sometimes result in incorrect element sizing due to the animation-fill-mode property

After experimenting with CSS3 animation, I encountered an unusual issue. Adding animation-fill-mode to the "parent" <div> caused the width of the "child" <div> to be less than 100% upon completion of the animation. Can anyone shed light on why ...

cssanimation

Value of MySQL in a web form

Currently in my PHP code, I have the following: echo '<input type="email" name="email" value=''; I am looking to automatically populate the value with a data from a MySQL row (let's say ['name']), but I am encountering syn ...

phphtmlmysql

"Enhance User Experience with Multilevel Dropdowns in Bootstrap 4 - Submenus Aligned to the Top

I recently embarked on a project that involved using Bootstrap 4.4, The project is an eCommerce grocery store with departments comprising categories and subcategories. The main menu became very lengthy when using the default code, so I encountered some al ...

javascripthtmljquerycssbootstrap-4