I have the following HTML & want to enhance it by adding an image BENEATH the h1 element using CSS.
<div class="wf-wrap">
<div class="page-title-head hgroup">
<h1>Kookshop</h1>
</div>
<div class="page-title-breadcrumbs">...</div>
</div>
This is the image I'd like to include:
How can this be accomplished? While we're familiar with using the ::after selector in CSS to append text after an element, my preference is to insert the image beneath the text instead.
If you're looking for a solution using :after, this approach may be helpful. Setting display: block will make it appear below the heading.
h1:after {
content: url('https://www.fs-d.be/wp-content/uploads/knife-300.png');
display: block;
}<div class="wf-wrap">
<div class="page-title-head hgroup">
<h1>Kookshop</h1>
</div>
<div class="page-title-breadcrumbs">...</div>
</div>Here is a creative approach using position absolute, z-index, and content: url()..
.page-title-head.hgroup {
position: relative;
}
.page-title-head.hgroup::after {
content: url('https://www.fs-d.be/wp-content/uploads/knife-300.png');
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
}<div class="wf-wrap">
<div class="page-title-head hgroup">
<h1>Kookshop</h1>
</div>
<div class="page-title-breadcrumbs">...</div>
</div>experiment with it
additional resources
contentTo accomplish this, utilize the background attribute within the :after selector.
See example code below.
.headline {
position: relative;
}
.headline:after {
content: "";
background-image: url(https://www.fs-d.be/wp-content/uploads/knife-300.png);
width: 150px;
height: 20px;
background-size: cover;
display: block;
}<div class="wf-wrap">
<div class="page-title-head hgroup">
<h1 class="headline">Cooking Supplies</h1>
</div>
<div class="page-title-breadcrumbs">...</div>
</div>Is there a way to extract the first cell from a row when a user hovers over it and then clicks a specific key combination? (considering using jQuery) I have a table set up similarly where placing the mouse over a tr and pressing ctrl+c will copy the ID t ...
I've experimented with margins, padding, and border options extensively, but I still can't get rid of the white space at the end of my navbar. Can anyone provide a simple solution, please? See the attached image for a clear visual of the issue. T ...
Struggling to create three columns within the colmask and threecol div classes, excluding the header and footer. Any suggestions? Check out the website at I've attempted setting the body and html tags to 100% height. I've also experimented with ...
Struggling with the z-index issue on a video tag in Windows Mobile, particularly when it comes to my search box. <div portal:substituteby='common/search::search'></div> The goal is for the search box to appear above the video. ...
I discovered a way to adjust the positioning of a div using jQuery. Check out this example. Is it possible to achieve the same result using CSS? UPDATE: I came across this solution. I also want the horizontal window scrollbar to appear if the fixed elem ...
Presented here are two distinct datalists, one containing patient filenumbers and the other containing states. <input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number"> <datali ...
Currently, I am testing the functionality of the auto complete feature within a search wizard. After entering a search query, I need to select the top menu item that appears as an auto complete suggestion, similar to how it works in Google search. Display ...
Below is the code snippet for a component I have: @Component({ template: ` <div class="container"> <div *ngFor="let connection of connections"> <div class="row"> <div class='col-2'>{{connection.arriv ...
Encountering a problem with page scrolling behavior in an ASP.Net web forms application when using Bootstrap CSS. Here's what's happening: Started a new Web Forms project in Visual Studio 2022 Visual Studio set up the project with necessary fold ...
My main objective is to replicate the functionality of Readability or Safari's Reader service, where the primary content of a webpage is converted to text. I do not intend to display any images, only to extract the important text from the webpage. Cur ...
Currently, I have an email form set up using PHP: <form method="post" action="contactus.php" autocomplete="off"> <label for="Name">Name:</label> <input type="text" name="Name" id="Name" maxlength="60" required/ ...
Is there a way to dynamically change the tabindex of an element based on its visibility in the viewport? I am looking to either reset the current tabindex when entering a new section and assign new values to elements within that section, or disable and re- ...
Having trouble achieving full browser height with my jQuery code. Check out this link for more information -- Below is the snippet of my HTML code: <div class="container contentContainer"> <div class="row"> ...
Having trouble creating a form with a dropdown box for users to select locations from an existing table. Unsure of next steps. forms.py from django import forms from .models import Vehicles from .models import HomeLocation class VehicleForm(forms.ModelFo ...
Looking for some help with designing a menu where the list items float in columns instead of rows. For example, This is how my current menu looks like: I want to change the layout to look like this: My code for the list items is as follows: .mnu-third ...
In order to style a 3rd-party component with custom styles, I need to access the dynamically generated css classname from within an angular component. Angular applies transformations to local css classnames for scoping purposes. However, when trying to st ...
There seems to be an issue with this code as it's not displaying an unordered list of HTML elements as intended. I've written the script and HTML code using Sublime Text, but even after trying to run the script in Chrome's developer console ...
When it comes to spacing out media queries accurately to prevent overlap, how should we approach it? Let's examine the following code as an example: @media (max-width: 20em) { /* styles for narrow viewport */ } @media (min-width: 20em) and (max ...
I have a project where the client requires scanning a barcode that includes an invoice number with 5 digits, followed by pressing 'enter'. I am looking for a way to make the input box ignore the 'enter' key and automatically move focus ...
Struggling to remove data from a datatable when clicking the delete button for quick admin side action. My code isn't functioning properly, even after attempted fixes. Here's my code: <div class="table-responsive"> <table id="datas" cl ...