Steps for adding an overlaying image in HTML and SCSS

First step: background-size: cover;

Second step: 

background-size: contain; background-repeat: no-repeat;

The third step is what I need: the first background image to be set as cover and the second one as an overlay with no-repeat

Currently, my HTML includes a div element: 

<div class="news" data-background="@item.ImageUrl">

I have attempted some solutions but so far have only been able to add one image and not a duplicate of it.

How can I achieve a layout similar to the example on the right side of the image?

Additional details regarding the SCSS file:

.vertical .news {
    position: relative;
    box-sizing: border-box;
    border-radius: 18px;
    background-position: center;
    background-size: cover;
    background-color: $DarkTurquoise;
    max-height: 85vh;
    height: 80vh;
    width: 30vw;
    margin-bottom: 3vw;
    margin-right: 1vw;
    margin-left: 1vw;
    overflow: hidden;
}
htmlcsssass

Answer №1

To create a visually stunning effect, you can set up an outer-container with a background-image and an inner-container with the CSS property backdrop-filter: blur(5px). Inside the inner-container, place an img element that is restricted to the width of the outer-container:

body {
  margin: 0;
}

.container {
  margin: 0 auto;
  height: 500px;
  width: 500px;
  background: url("http://lowcadence.com/wp-content/uploads/2012/08/josiahrides.jpg");
  background-size: cover;
}

.image {
  display: flex;
  align-items: center;
  height: 100%;
  backdrop-filter: blur(5px);
}

img {
  width: 100%;
}
<div class="container">
  <div class="image">
    <img src="http://lowcadence.com/wp-content/uploads/2012/08/josiahrides.jpg" />
  </div>
</div>

Please note: The backdrop-filter property may not be compatible with Firefox browsers.

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

Tips on stopping slideToggle from opening and closing when clicked for the first time

When using the slideToggle function, I'm encountering an issue where the content div briefly shows on the first click but then immediately slides closed. Subsequent clicks work as expected and slide open correctly. This is the Jquery script I have be ...

javascriptjquerycssslidetoggle

The Bootstrap modal is not properly clearing all attribute properties when it is hidden

Alrighty, so I've got this modal set up: <div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content center-block" style="displ ...

javascriptjqueryhtmlcsstwitter-bootstrap

SEO tip: concealing lightbox images from search engines

Our website primarily uses lightboxes loaded via Ajax for images, meaning search engines may not index them when crawling the page. Is there a way to enhance SEO for these lightbox images? Thanks for your help! ...

htmlajaxseolightboxgoogle-image-search

Troubleshooting a Node.js server issue with a two-dimensional array

I am currently facing an issue with submitting a form that contains two-dimensional array fields on a post request in node.js. The problem lies in the fact that the server side is receiving a one-dimensional array with all the values combined. Below is an ...

javascripthtmlarraysnode.js

Evaluate the user's answers to a database using a SQLite 3 C++ Quiz

Currently, I am in the process of writing a C++ program that utilizes SQLite. The main aim is to enable users to specify their preferred hotel room options. Subsequently, the program compares these user selections with the information stored in a database. ...

htmlc++sqlite

What is the best way to ensure that an input group expands to fill the entire horizontal space

I am currently utilizing bootstrap 4 and have a responsive navbar for smaller screens. On this navbar, I am trying to implement a search input group that spans the full width from left to right up until the menu bar icon on the right side. You can view my ...

csstwitter-bootstrapflexbox

Tips for arranging the items within the slider according to the specified direction (rtl, ltr) in the Owl Carousel slider for Angular

Is there a way to dynamically change the direction of the owl-carousel-o angular slider based on the selected language? Currently, I have set rtl: true in the owl-carousel configuration during initialization. However, when the user switches to a different ...

javascriptcssangularowl-carousel

Does HTML elements come with a pre-set background color of white or transparency by default?

Feeling a bit confused about a straightforward issue. Can someone clarify for me - What is the original background color of HTML elements? Is it white by default or transparent? ...

htmlcss

Prevent secret select fields from being submitted within a form

In my interface, there are a couple of dropdowns where a user can select the first option and based on that selection, a new dropdown will appear. Currently, when posting the form, all the select dropdown values are included in the post data, even the hid ...

javascriptjqueryhtml

Setting an action when clicking on a slice of a Doughnut chart using Chart.js

I have been working on integrating chart.js into my Django Project, and so far it has been going smoothly. I successfully created a doughnut chart with two slices. Now, I am trying to implement separate actions for each slice when clicked, such as redirect ...

javascriptpythonhtmldjangochart.js

What is the process to include a CSS file in PHP?

Can anyone guide me on how to include my CSS file in PHP? require('config.php'); $cssFile = "style.css"; echo "<link rel='stylesheet' href='/books/style.css'>"; What is the process of adding CSS to a PHP appl ...

phpcss

Using the Firefox API to determine if a tab is currently active

I remember hearing about a feature that was introduced in some recent versions of Firefox allowing developers to check if a tab is active or not using JavaScript. However, I am having trouble finding more information about it online. Can you share the li ...

javascripthtmlfirefoxbrowser

Issue with .html causing .hover to malfunction

Attempting a basic image rollover using jQuery, I've encountered an issue with the code below: HTML: <div class="secondcircle" id="circleone"> <p> <img src="/../ex/img/group1.png"> </p> </div> JS: $("# ...

javascriptjqueryhtml

Is there a way to change the domain for all relative URLs on an HTML page to a different one that is not its current domain, including in HTML elements and JavaScript HTTP Requests?

I am dealing with a situation where my page contains "domain relative URLs" like ../file/foo or /file/foo within a href attributes, img src attributes, video, audio, web components, js ajax calls, etc. The issue arises when these URLs need to be relative ...

javascripthtmlurlurl-routingrelative-path

PHP Debate: Static vs Non-Static - Which is the Superior Choice?

Static and non-static functions as well as class properties really had me puzzled when I attempted to launch my website. Could someone clarify whether it is preferable to have the entire website coded using static functions rather than relying on non-stat ...

phphtml

Could you advise on the best placement for my upcoming JQuery animation?

Here is the code I am currently working with: $(function() { $("button").click(function() { $("#box1").animate({ left: $(window).width() - 800 }, { complete: function() { $("#box1").hide(); } }); $("#box2").a ...

javascripthtmljquerycss

Creating a custom CSS overlay for a jQueryUI widget

Having some trouble darkening the widget overlay provided by jQueryUI's "dialog". Despite trying to override the CSS used by jQuery, specifically the class ui/widget-overlay, I can't seem to apply my own styles successfully in my stylesheet. I a ...

jqueryhtmlcssjquery-uijquery-ui-dialog

Change the background color on hover without affecting the text color

I am having some trouble with my code. I can only change the color of the "popup1_btn" button when hovering, but the text color remains the same. If I use .popup1_btn a:hover, it only changes the background and text color of the text, not the entire button ...

htmlcss

Removing an element with a specific class that was created with Javascript can be done by clicking outside the box

I needed to eliminate an element that was created using JavaScript of a specific class when clicked outside the box. I have created a color-picker using .createElement and added a class to it. Now, my goal is to remove that picker whenever a click occu ...

javascripthtmlcss

How to position collapsible buttons in Twitter's Bootstrap framework

I have successfully created two buttons on the same line. The second button is collapsible and when clicked, it adds a row of two more buttons to the view. However, the newly collapsed row of buttons appears aligned with the second button. I would like th ...

jqueryhtmlcsstwitter-bootstrap