Utilizing Boostrap CSS to overlay an image in the header section

I've been struggling to insert an image inside a header within a Bootstrap card. Despite trying various solutions, nothing seems to work.

Below is the code snippet:

<div class="container">
  <div style="padding: 20px 0px;" *ngFor="let blog of blogs">
    <div class="card">
      <div class="card-header" (click)="navigate('Blog')">
        <a (click)="navigate(blog.title)">{{ blog.title }}</a>
      </div>
      <div class="card-body">
        <p class="card-text">
          {{ blog.summary }}
        </p>
      </div>
    </div>
  </div>
</div>

CSS:

.card-header {
  background: rgba(0, 255, 0, 0.61);
  color: rgb(0, 0, 0);
  font-weight: bold;
  cursor: pointer;
}

.card-body {
  background: #43484d;
}

.card-text {
  color: #6cffce;
  font-weight: bold;
}

I've attempted using the following:

background-image: url(imagepath)

However, it didn't yield any results. I also experimented with:

<image src ...>

to create an overlay effect, but that wasn't successful either. My goal is to place an image in the header with transparency and a colored overlay on top (similar to looking through glass).

https://i.sstatic.net/ACwh4.png

cssbootstrap-4

Answer №1

Can't say for sure what you're looking for. Take a look at this code snippet to get some inspiration.

.card-header {
  background: linear-gradient(rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)), url(http://www.tedgoas.com/assets/images/work/stack-overflow/cover.jpg) no-repeat center center;
  height: 200px;
  position: relative;
}

.card-header a {
  color: white;
  font-weight: bold;
  font-size: 50px;
  position: absolute;
  top: 40%;
  left: 40%;
}

.card-body {
  background: #43484d;
}

.card-text {
  color: #6cffce;
  font-weight: bold;
}
<div class="container">
  <div>
    <div class="card">
      <div class="card-header">
        <a>Header</a>
      </div>
      <div class="card-body">
        <p class="card-text">
          Body
        </p>
      </div>
    </div>
  </div>
</div>

Answer №2

Check out the code below to see how you can implement the same card-header design anywhere in your project. You can find a live example at this CodePen link

<div class="container">
  <div style="padding: 20px 0px;" *ngFor="let blog of blogs">
    <div class="card">
      <div class="card-header" (click)="navigate('Blog')">
        <a (click)="navigate(blog.title)">link</a>
      </div>
      <div class="card-body">
        <p class="card-text">
          Para1
        </p>
      </div>
    </div>
  </div>
</div>

CSS styling:

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  color: #f9f0f3;
  background: #D21237;
}

.card-header {
  background: rgba(0, 255, 0, 0.61);
  color: rgb(0, 0, 0);
  font-weight: bold;
  cursor: pointer;
  position:relative;
  height:10vh;
}
.card-header::before{
  content:"";
  background-image: url("http://www.hdnicewallpapers.com/Walls/Big/Abstract/Red_and_Blue_Smoke_Creative_Design_Wallpaper.jpg");
  height:10vh;
  position: absolute;
  top:0px;
  width:100%;
  z-index:99999;
}

.card-body {
  background: #43484d;
}

.card-text {
  color: #6cffce;
  font-weight: bold;
}

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

Ways to make the submenu display underneath the main menu

Click here to view the menu It is important to note that you may need to expand the Result Box in order to see the full menu. The issue I am currently facing involves fixing a submenu that appears when hovering over the Men and Women <li> elements. ...

javascriptjqueryhtmlcssmenu

Stop the Bootstrap navbar from breaking into separate lines when resizing the screen by ensuring it collapses into an icon

I have a straightforward Bootstrap Navbar that contains just a few items. When the width is less than 768, it displays in two rows. How can I make both items display in a single row at all widths without using the collapse feature? <nav class="na ...

csstwitter-bootstraptwitter-bootstrap-3

Activate Auto Navigation Feature on Mouseover using jQuery

I have a series of divs that cycle automatically to display their contents one after the other every few seconds. The same content is also displayed when the corresponding link is hovered over. The functionality is working correctly, but I would like to ...

javascriptjqueryhtmlcss

Align bootstrap button to the center on xs screens

I've spent countless hours on this issue - I just can't seem to get the button centered properly in xs mode. It keeps aligning itself based on the left side, no matter what I try. I've searched through Bootstrap but couldn't find a clea ...

htmlcsstwitter-bootstrap

What is the best way to incorporate an image or custom shape into a divider?

I'm looking to replicate this unique divider design. Any suggestions on adding the leaves element to it? Is there a more efficient method than creating the border in photoshop, saving it as a jpg, and then linking it to the divider? The inner section ...

htmlcss

Can the columns of a table be evenly spread out if their width is based on the content within them?

Is there a way to evenly distribute the columns of a table when the width is determined by the content? The table can have 3 or 4 columns that contain dynamic data, with one column potentially having large amounts of data. Here are three example tables: ...

htmlcsshtml-table

Customizing text documents within an iframe using CSS from the parent page

My HTML page consists of multiple iframes, each linking to a text file on the same domain. I have done some research on how iframes behave when they point to an HTML file, but I haven't found much information on what happens when they link to a text ...

htmlcss

Crafting media queries to specifically target Galaxy Nexus and Nexus 7 devices

I am faced with the challenge of testing site design on two different devices: Samsung Galaxy Nexus and Asus Nexus 7 tablet. I am struggling to target these devices individually using media queries, as I am unsure about the appropriate values for max-width ...

cssresponsive-designmobile-websitemedia-queries

Ways to get rid of the white horizontal line generated by bootstrap framework?

I'm currently working on a responsive navbar design and I want it to appear transparent over a background image. However, my front-end knowledge is limited as I've only been learning for a week. Can anyone advise me on how to remove the white bar ...

htmlcsstwitter-bootstrapbootstrap-5

I am having difficulty centering the contents on the page horizontally

Struggling to achieve horizontal alignment, I suspect the floats are causing issues. Removing them disrupts the layout with left_wrap and right_wrap not staying next to each other. Check out this example on JSFiddle .main_wrap {width:100%;} .main_wrap_2 ...

htmlcss

css -- how can I align something to the left of a centered element in CSS?

The image accurately represents my goal. Is this achievable? If you're looking to center without having anything on the left side, check out this resource: How do I center float elements? ...

cssalignmentcentering

Why is it that styling <div> and <img> with a URL doesn't seem to work, even when applying the same styles?

In the example I have, I apply the same styling to an image and a div. Interestingly, the styling on the div makes the image look significantly better, while on the image itself it appears distorted. What could be causing this discrepancy? Both elements a ...

javascriptcssmaterial-ui

Issue with Boostrap Navbar - it won't stay glued to the top

I recently decided to experiment with creating a one-page template from scratch just for fun and to learn something new. As I was exploring examples on Bootstrap's website, I encountered an issue where my divs were not filling the width/height as inte ...

javascripthtmlcssbootstrap-4fullpage.js

Utilizing jQuery for adding/removing classes, however, elements are not refreshed to show changes

I am dealing with a situation involving two elements, similar to two buttons placed side by side. I am dynamically toggling the class "focusd" to alter the highlighted effect. However, I have noticed a peculiar issue where the changes are not always proper ...

javascriptjquerycssrepaint

Positioning a div towards the bottom right corner of another element

I have two divs nested inside another div. One of them is a table displaying a list of items that can be updated by entering text into a textbox positioned next to it. I am struggling to position the textbox in the bottom right corner despite trying variou ...

asp.nethtmlcss

Using jQuery to toggle CSS properties

I'm having trouble switching between a CSS column layout and a normal layout for a div element with the ID 'article'. The jQuery script I wrote doesn't seem to work properly, as the entire thing disappears. Can anyone advise me on how t ...

javascriptjquerycss

What are some strategies to avoid render-blocking when CSS is loaded through HTML Imports?

I am in the process of developing a website using Web Components and Polymer, with assets being loaded through HTML Imports. This is an example of my markup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> < ...

csspolymerweb-componentpagespeedhtml-imports

There is a clear space between the primary content and the column floated to the right

I am struggling with creating a gap between the main content and the floated right column in my website. Despite attempting to adjust it, I cannot seem to achieve the desired spacing between the right column and the main body. <head> & ...

htmlcss

Application of stroke-linecap in SVG limited to single end only

Can a linecap be added to only one end of a stroke, rather than both ends like in the default sample below? <?xml version="1.0"?> <svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> < ...

csssvgstroke

Guide to setting up a subdirectory for an html/php webpage on an Azure Website

Is there a way to customize the URL of my website so it looks like 'https://example.com/mainPage/subPage/anotherSubPage' for a more organized directory structure? I am currently using an Azure web app server and I have been unable to locate the w ...

phphtmlcssazureurl-rewriting