The background image for a pseudo element is not functioning as expected

After researching various solutions on Stack Overflow, I attempted to set fixed dimensions for the pseudo element (height: X px; width: X px;), but this is not an ideal solution for me as I require a scalable and responsive image that fits its parent element. How can I ensure that the background-image shows up while also being automatically scalable?

HTML:

<h3>This is a title</h3>

CSS:

 h3:before{
   background-image:url('https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg'); 
   background-size: contain;
   background-repeat: no-repeat;
   display: block;
 }
htmlcss

Answer №1

Here is a suggestion: 

h3:before{
    background-image: url(https://example.com/image.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    content: '';
    height: 120px;
    display: block;
}

Answer №2

experiment with these style adjustments for your pseudo element

content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;

Answer №3

To enhance the design, I have included the code content: '';, set a specific height, and defined a minimum width with min-width for the pseudo element.

p:before {
  content: '';
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMdl8cg3CDenBgBdDey8W2KUfDIfKO7ZcPk6c5KtuLn8OJBzu8');
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  min-width: 100px;
  height: 30px;
}
<p>
  This is a paragraph
</p>

Answer №4

Utilize the background property within the h3 tag and adjust the size using background-size.

Interactive Code Snippet Below:

h3 {
  background-image: url(https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg);
  background-size: auto 40px;
  background-repeat: no-repeat;
  display: block;
  padding-top: 40px;
}
<div class="wrapper">
  <h3>This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</h3>
</div>

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

Can someone show me how to code a function that transforms my paragraph into an image when I hover over it?

< p id="p1" onmouseover="this.style.color='transparent';flipPara()"> < p id="p2" onmouseover="spookyPara()"> function spookyPara() { document.getElementById("p1").attribute = "All_Images/ghost.png"; } I currently have this code sn ...

javascripthtmlcssimagefunction

Is there a way to adjust the size of text to perfectly fit within a fixed size div?

I find this scenario quite common, but I haven't come across any solutions for it: Let's say there is a fixed-width div that displays dynamically changing numbers. How can we adjust the font size so that larger numbers fit well within the fixed ...

javascriptcsshtml

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

htmlcss

Turn off smooth scrolling in Bootstrap 5 using HTML and CSS techniques

On my website, I have implemented anchor links that activate smooth scrolling when clicked, thanks to the Bootstrap feature. However, the unique layout of my website requires me to turn off smooth scrolling in either the HTML or CSS code. I appreciate an ...

htmlcssbootstrap-5

Showcasing data from Django models in a tabular format

I am new to django and seeking assistance. I have developed a website but it's not fully operational yet. The model I created looks like this; from django.db import models class InductiveSensors(models.Model): Part_No = models.CharField(max_lengt ...

pythonhtmldjangourldjango-models

Ways to modify the jquery script to display on page load rather than on scrolling action

Currently in the process of working on my site, www.runebs.dk. Utilizing a script to activate information for each project. JS.. $('.showHide').on('click',function(){ $(this).toggleClass('active'); $( '#subHead ...

jquerycss

How to Create a Compact JavaFX ComboBox

I'm attempting to create a more compact version of the ComboBox, but no matter what I try, the space between the text and arrow button remains consistent. When using the following CSS: .combo-box-base > *.arrow-button { -fx-padding: 0 0 0 0; ...

csslayoutcomboboxjavafxsize

What is the best method for swapping out an iframe with a div using Javascript?

Having an issue with loading an external HTML page into an iFrame on my website. Currently facing two main problems: The height of the iFrame is fixed, but I need it to adjust based on the content's height. The content inside the iFrame does not inh ...

javascriptiframehtml

Is the form data in AngularJS not submitting correctly?

Why is my HTML form data not being submitted using POST method? HTML View Page:- <div class="col-sm-12"> <div class="card-box"> <form class="form-inline" name="addstock" ng-submit="saveStockPurchaseInvoice()"> <h ...

angularjshtmlcodeigniter-3

Toggle Canvas Visibility with Radio Button

As I immerse myself in learning Javascript and Canvas, the plethora of resources available has left me feeling a bit overwhelmed. Currently, I am working on a dress customization project using Canvas. // Here is a snippet of my HTML code <input type=" ...

javascripthtmlcanvas

Unexpected Visual Basic Web Label Formatting

I am facing an issue with the styling of a complex label. The CSS code doesn't always apply as expected. Interestingly, when I ran this code on two different machines, the styles were inconsistent. The code seems messy and disorganized to me, but al ...

htmlcssasp.netvb.net

The timing of the RequestAnimationFrame function varies based on the dimensions of my canvas

In my application, I have a canvas that dynamically adjusts its CSS size based on the window size. The main gameplay loop in my code looks like this: run = function(){ console.log(timerDiff(frameTime)); game.inputManage(); game.logics(); ...

javascripthtmlcanvasrequestanimationframe

What are some ways to utilize CSS variables for enhancing component styles within Svelte?

Presented here is a straightforward component called Text.svelte. It utilizes a CSS variable to prevent unnecessary duplication: <div> <span class="t1">t1</span> <span class="t2">t2</span> </div> ...

csssveltevite

What is the best way to modify the background color of a whole div when hovering over it

Recently, I encountered a challenge while working on my website. I want to set up a link inside a div that changes color when hovered over. However, the desired effect is not quite coming out as expected. Before hovering, I aim to have a border around the ...

htmlcss

Can we show the dropdown with the active button?

Can someone assist me in transforming my sidebar buttons into dropdowns when viewed on a responsive layout? I'm looking for something similar to the sidebar (on the left) featured on this website: If possible, I would like the dropdown to only displa ...

javascriptjqueryhtmlcssdrop-down-menu

Tips for redirecting to the index page instead of the login form after pressing the back button on the navigation

Hey everyone! I've been struggling with a problem for the past 4 hours and could really use some help. After logging in, the page redirects to a certain page, but when I press the back button in my browser, I want it to redirect back to that specific ...

phphtml

What is the best way to format each <li> element onto a separate line?

Creating a review section for an item on my website required me to organize the reviews and comments. I utilized the following code structure: <ul> <li> Comment code </li> <li> Comment code </li> </ul> Within the ...

htmlcss

What steps should I follow to align these unordered lists side by side?

Is there a way to align these lists (unordered lists inside list items 1 through 4) side by side using CSS3? I've tried different methods, but I can't seem to figure it out. Here is the code I've been using: <footer> <ul> ...

htmlcsshtml-listsinline

Easy steps to include HTTP authentication headers in Spring Boot

I have been customizing my spring boot authorization server to fit my needs. Upon logging in with a username and password from my custom HTML page, I am aiming to redirect back to the /oauth/token endpoint to retrieve the access token. While this process ...

htmlspring-bootoauthauthorization

What could be the reason for the extra tags being returned by YQL?

Currently, I am executing a query in the YQL console with the following data: select * from html where url='http://www.motorni-masla.net/index.php?main_page=product_oil_info&cPath=140&products_id=294&zenid=c8281021bbfed454176247900b3b9d4a ...

htmljsonxpathyql