Tips for including a background image using the :after pseudo-element in Angular 2

I'm facing a challenge with passing a URL image from my HTML to my CSS in Angular, and I can't seem to figure it out:

Here is a snippet of my CSS:

card-profile_visual {
      height: $visual-height;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%), saturate(darken(#3A4A7B, 15%), 20%));
      &:before,
      &:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;       
        background: url(myUrl) no-repeat center center/cover;
        opacity: 0.5;
        mix-blend-mode: lighten;
      }

    }

And here is the relevant part of my HTML:

<div class="card-profile_visual" [style.background-image]="'url('+offer.photo_url+')'"></div>

I'm seeking advice on how to successfully pass the offer.photo_url to the CSS property:

background: url(myUrl) no-repeat center center/cover;

Any guidance or assistance is greatly appreciated.

javascriptcssangularsass

Answer №1

Utilize ngStyle along with CSS Variables in the following manner:

Instead of:

CSS:

card-profile_visual {
      height: $visual-height;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%), saturate(darken(#3A4A7B, 15%), 20%));
      &:before,
      &:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;       
        background: url(myUrl) no-repeat center center/cover;
        opacity: 0.5;
        mix-blend-mode: lighten;
      }

    }

HTML:

<div class="card-profile_visual" [style.background-image]="'url('+offer.photo_url+')'"></div>

Use this:

CSS:

card-profile_visual {
      height: $visual-height;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%), saturate(darken(#3A4A7B, 15%), 20%));
      &:before,
      &:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;       
        background: var(--my-image) no-repeat center center/cover;
        opacity: 0.5;
        mix-blend-mode: lighten;
      }
    }

HTML:

<div class="card-profile_visual" [ngStyle]="{'--my-image': ' + offer.photo_url + '}"></div>

I trust this will be beneficial for you.

Answer №2

Utilize the url within the content attribute

content: url(imageUrl);

Answer №3

Give this a shot

<div class="card-profile_visual" [style.backgroundImage]="'url('+offer.photo_url+')'"></div>

If you want to add a background image in a pseudo element using CSS, you can try the following approach

.card-profile_visual:after{
  background: url(myUrl) no-repeat center center/cover;
}

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 causes the vertical movement of my Bootstrap v5 card when resizing the window?

Issue: While working on my website and implementing three cards using Bootstrap, I encountered a problem. When I resize the window vertically, all the elements shift upwards and overlap with other elements, ruining the look of the site. I suspect the issu ...

htmlcssoverlapbootstrap-5bootstrap-cards

Obtain headers from receiving an external JavaScript file

I am trying to find a way to import an external .js file and access the response headers from that request. <script src="external/file.js?onload=callback"> function callback(data) { data.getAllResponseHeaders(); } </script> Unfortunately, ...

javascriptajaxhttphttp-headers

Enhancing Child Elements with CSS - Evaluating Rating Systems

Is there a way to change the opacity of certain images inside my div when hovering over them? Specifically, I want the 4th image and the first three to have an opacity value of 1. I've looked into using nth-child but am unsure how to implement it for ...

javascriptjqueryhtmlcss

Is it possible to convert an object with properties of equal length into a list of objects using JavaScript?

I am working with an object that has multiple keys, each containing a list of equal length: myobj = { 'key1' : [1, 2, 3], 'key2' : ['a', 'b', 'c'], 'key3' : [true, false, true], .. ...

javascriptjsondictionarylodashmap-function

Change the source of another element when clicked

Check out the fixed version of previously broken code here I am facing challenges in changing an attribute on another element from a click function sniping $('#black').click(function() { $('#blackbox').slideToggle('slow&apos ...

javascriptjqueryattributesimage

The imported path is not found in Tsconfig

Hey there! I've been working on getting my project's imports to play nice with typescript import paths. Every time I encounter this error : Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'app' imported from dist/index.js It seems l ...

javascriptnode.jstypescriptmodulees6-modules

Automating the process of sending emails to users upon registration with Firebase Auth in Angular 2

Is there a way to automatically send email verification to users after they create an account? The current code I have looks like this. export class addContentComponent { add: FormGroup; constructor(public fb: FormBuilder) { this.add = t ...

angularfirebasefirebase-authenticationfirebase-securityangular2-forms

Aligning Cards using Bulma Styles

Currently in the process of developing a Pomodoro Timer application and utilizing Bulma as my CSS Framework. I am really enjoying working with it thus far, although still getting the hang of Flexbox. I am seeking advice on the best approach for this projec ...

htmlcssresponsive-designflexboxbulma

Completing Forms with KendoUI Autocomplete

I am currently working with a KendoUI Autocomplete feature within a <form>. One issue I have encountered is that if the user presses the enter key while the autocomplete options are displayed, it only closes the options without submitting the form. S ...

javascriptjqueryformskendo-ui

Guide to accessing object items in v-for in VueJs

Upon inspection, the following results are being displayed: https://i.sstatic.net/oF4Qe.png https://i.sstatic.net/21aHB.png In the Vue template code provided: <select class="form-select" v-model="post_format.wpml_language"> <option v-for="(l ...

javascriptvue.js

Adjusting the dimensions of a Twitter widget to fit the screen size

My website is designed to resize based on screen size, but I encountered an issue when adding a Twitter widget. Despite setting the attribute width:'auto', the widget did not resize properly. Below is the code for the widget: <script charset= ...

csstwitter

Safeguarding intellectual property rights

I have some legally protected data in my database and I've noticed that Google Books has a system in place to prevent copying and printing of content. For example, if you try to print a book from this link, it won't appear: How can I protect my ...

javascriptruby-on-railsajax

Is it necessary to have a Test Adapter in VSTS in order to include a code coverage report?

Currently, I am producing code coverage using Karma-coverage and hosting my output coverage folder on an http-server for local viewing. My question is: How can I display this report on the VSTS code coverage tab? Do I need to re-format my coverage result ...

angularcode-coverageazure-devopsazure-pipelinesazure-devops-rest-api

Utilize JavaScript to send login information to a website

I have a specific task in mind: creating a script that will automatically fill in certain data on an HTML website. To illustrate, let's imagine the site is the StackOverflow login page and I want to input my username and password. For the username fi ...

javascriptjqueryhtmlajax

Is Joomla equipped with shortcodes akin to those found in Wordpress?

One of the great features of WordPress is the ability to use shortcodes to insert information into HTML without the need for programming knowledge in PHP or JavaScript. This simplifies tasks and increases safety. For example (this is just a hypothetical s ...

javascriptphphtmlwordpressjoomla

Looking to display all items once the page has finished loading

I am experiencing a minor issue. Every time I access my store page where all products are listed, I have to click on the size filter to load the products. This is not ideal as I want all products to be displayed automatically when the page loads. What modi ...

javascriptreactjs

Issues encountered while modifying Vue data

In my Vue JS 2 code, I have structured my data as follows: data : { newBus: { name: '', hours: { sunday: '', } } } When setting the data usi ...

javascriptvue.jsvuejs2

Angular's focus function poses certain challenges that need to be addressed

I am seeking assistance as a new programmer facing a beginner's challenge. I have two inputs and I would like to enter a series of numbers in the first input (DO) and have them automatically populate in the second input (communal code). Inputs: http ...

javascriptangularinputfocus

Converting a Number from Negative to Positive in JavaScript and Representing it as 32 Bit Binary

I am facing an issue with converting a number to 32-bit binary data. While converting to 16 or 8 bits works fine, the result is incorrect when attempting to convert to 32 bits. For example, for 8 bits: -1 & 255 //result -> 255 or -1 & 0xFF //r ...

javascriptnode.js

How to adjust the transparency of a background image in a parent div without impacting its child elements? (Using Twitter Bootstrap)

In an effort to enhance the aesthetics of a website, I have been utilizing Twitter Bootstrap. One snippet of my HTML code looks like this: <div class = 'container-fluid bg-1'> <div id ='yield_wrap'> ...

htmlcsstwitter-bootstrap