Enhance your visual content by incorporating text onto images with CSS/Bootstrap5

I'm having trouble getting my rows and columns to display on top of my background image. I've been struggling with this issue for a while now. Any assistance on this matter would be greatly appreciated!

I'm fairly new to this, so if it's a simple fix, I haven't come across it yet XD

<!DOCTYPE html>
<html>

  <head>
    <title>Testing</title>

    <!--CSS-->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706c706e733c3b2a3f6f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

    <!--Font Awesome-->
    <script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
    
    <!--Index Stylesheet-->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    
    <!-- JavaScript Bundle with Popper -->
    
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65070a0a11161117041525504b544b57">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>

    <style type="text/css">

    </style>
  </head>

  <body>
      <div id="about-us" class="">
          <a href="https://placeholder.com"><img src="https://via.placeholder.com/1920x618.png" alt=""></a>

          <div class="container-md">
            <div class="row justify-content-center">
              <div class="col-4 about-text-header">
                One of two columns
              </div>
              <div class="col-4">
                One of two columns
              </div>
            </div>
          </div>

      </div>
  </body>
</html>

htmlcssbootstrap-5

Answer №1

To start, update the image path with the correct one and assign a background-image property to the parent div using CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <!--Include CSS-->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8efcf1f1fafdfdfcfffbdfdcbdecfcec8dd9994d4">[email protected]</a>/dist/css/styles.css" rel="stylesheet" integrity="sha384-ABCD1234ABCD1234ABCD1234ABCD1234" crossorigin="anonymous">
    <!--Font Awesome Icons-->
    <script src="https://kit.fontawesome.com/yourfontawesomeid.js" crossorigin="anonymous"></script>
    <!--Custom JavaScript--&g...
    <!-- Bootstrap JavaScript --&...
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914171c1b1b1a19151943161408140114011e0740110450141948111c0410">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-0C3Z5zJ4ytwFRZ6n9oVXFLPlV4IgXYoV4Ht9fUAqBf4g8qI8EpOs/d8mySKkN1" crossorigin="anonymous"></script>
    <style type="text/css">
      #main-div{
        background-image: url('https://example.com/image.jpg');
      }
    </style>
  </head>
  <body>
    <a href="https://example.com">
      <div id="main-div" class="p-5">
          <div class="container-md">
            <div class="row justify-content-center" style=" position: relative;">
              <div class="col-4 text-dark header">
                Content in First Column
              </div>
              <div class="col-4 text-dark ">
                Content in Second Column
              </div>
            </div>
          </div>
      </div>
    </a>
  </body>
</html>

Answer №2

To add an image as the background for your block using CSS, you can update your style.css file as follows:

    #about-us {
      background-image: url('https://via.placeholder.com/1920x618.png');
    }

There are various CSS properties available to customize the background image position, size, and more. You can explore them further here

Update: If you aim to achieve a design like this example:

HTML:

<body>
  
  <!--  Top image GTA, no text so use <img> tag -->
  <div id="hero-img">
      <img src="./yourimg.png" alt="">
  </div>

  <!--  About us section, background image of a car -->
  <div id="about-us">

      <!--  Regular columns and content -->
      <div class="container-md">
        <div class="row justify-content-center">
          <div class="col-4 about-text-header">
            One of two columns
          </div>
          <div class="col-4">
            One of two columns
          </div>
        </div>
      </div>

  </div>
</body>

CSS:

    #hero-img{
      /* Remove space between images to blend car seamlessly with page background */
      margin-bottom: -50px;
    }

    #hero-img img{
      object-fit: cover;
      width: 100%
      height: 600px;
    }

    #about-us{
      background-image: url('./yourCarImage.png');
      background-position: center;
      background-size: cover;
      /* Adjust padding if necessary */
      padding: 100px 0;
    }

This should provide a good starting point; feel free to customize as needed.

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

The dimensions of the box are not predetermined by the size of the photo

I'm attempting to develop a photo gallery that emulates the style of (using the Unsplash API -> ) However, the size of the container box does not adjust properly with the photos. https://i.sstatic.net/1PAQF.jpg <div className="imageGrid_ ...

javascripthtmlcssreactjsgrid

What is the best way to ensure a division's height matches that of the window using CSS?

Is it possible to create a division that covers the total width and height of the screen using just CSS without relying on JavaScript or jQuery? <div id="all"></div> I have tried setting the width and height of the element to 100%, but I am s ...

htmlcssheight

Show information based on a specific letter

So, I've managed to get this page working well but now I'm looking to display data based on a specific letter. Here's the code I currently have: <html> <head> <title>MySQLi Read Records</title> </ ...

phphtmlmysqlmysqli

What sets the target property of the mousewheel event apart from other events like click, mousedown, and touchstart?

The mousewheel event's target property reveals the DOM element currently being hovered over when using the mousewheel or gesture-capable touchpad. In my experience (specifically in Safari 6, I will verify this in other browsers later), the target ret ...

javascripthtmldomdom-events

Using .get methods with jQuery's .on

I need to retrieve the tag name of the element that is clicked inside an li when the user interacts with it. The li element gets dynamically added to the HTML code. I have implemented the following code, but unfortunately, it does not seem to be functionin ...

javascriptjqueryhtml

Need help incorporating a "section trail" into your website's navigation sidebar using JS/jquery? Here's how you can do it!

My website is quite extensive and contains numerous elements. There are times when I find myself wanting to navigate back and forth between different sections of the page. I've noticed that some websites have a feature called a "page trail," which di ...

javascriptjqueryhtmlcss

Utilize the PHP variable HTTP_USER_AGENT to identify and analyze the user's browser

As I embark on creating a webpage, my goal is to have it display different content based on the user's browser. The SERVER [HTTP_USER_AGENT] variable initially seemed promising for this purpose, but upon inspecting the page in Chrome, I encountered: ...

javascriptphphtmlinternet-explorerbrowser

Is it possible for me to input a variable into the logical process of if(isset($_FILES['whatever']))?

I have recently started learning PHP and I'm in the process of creating a dynamic page that will update based on which form buttons are clicked. The functionality is working correctly, but my goal is to enable users to upload multiple files - either P ...

phphtmlarraysbuttonmove-uploaded-file

The Jquery navigation and image display features are experiencing technical difficulties in Internet Explorer

My website is currently in the development stage and functions well on all browsers except for IE10. Interestingly, both the menu bar and photo gallery, which rely on Jquery, are not functioning properly in IE10. Below is the code snippet: <script ty ...

javascriptjqueryhtmlcssinternet-explorer

Data input not populating in email

After filling out the form, Gmail pops up with no data entered. How can I ensure that the information I input in the form is transferred to the email? <form class="" action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_em ...

htmlcssbootstrap-5

What is the best way to resolve the error message: "__init__() received an unexpected keyword argument 'book_category'"?

I'm currently working on inputting book data and storing it in my database using Django to create a web library. However, I keep encountering the following error: init() got an unexpected keyword argument 'book_category' The issue seems t ...

pythonhtmldjangoweb

Accessing a distinct element of e.parameter

I've implemented a Google App Script on my website that automatically writes form data to a spreadsheet upon submission. With multiple forms on the site, I want all their data to go to the same Spreadsheet but different 'Sheets' (tabs at th ...

javascripthtmljsongoogle-apps-scriptxmlhttprequest

<fieldset> triggering onChange event in React form

I am facing an issue with my React component where multiple onChange functions are not getting fired. After some debugging, I realized that the problem lies with the fieldset element within the form. Removing the fieldset allows all onChange functions to w ...

javascripthtmltwitter-bootstrapreactjsonchange

Click here to navigate to the same or a different page using an anchor

I'm currently implementing this code: $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostna ...

javascriptjqueryhtmlanchor

There seems to be an issue with the main.scss file in your SCSS assets folder: Unable to locate or read the file being

I've been struggling to publish my Jekyll and Bootstrap website on GitHub, but I keep encountering an error message: Your SCSS file assets/main.scss has an error on line 47: File to import not found or unreadable: assets/css/minima/base. Load paths: ...

sassjekyllgithub-pagesbootstrap-5

When you click on the input field, a file manager window will open. You can then select a file and the URL of the selected file will be automatically added to the

I need assistance with customizing the code to open the flmngr window and add the URL of the selected file to the input field when onclick. window.onFlmngrAndImgPenLoaded = function() { var elBtn = document.getElementById("btn"); // Style bu ...

javascripthtmljquery

When applying a maximum width of 100% with automatic height, images may become cropped

I'm a beginner in learning CSS, and since my technical skills are limited, I'll try to keep things simple. Currently, I have an image taking up half of the screen with the following CSS code that I found after reading some articles: <div class ...

htmlcss

Updating the background of a div in HTML through the power of JavaScript

I am having trouble changing the background of a DIV. I believe my code is correct, but it doesn't seem to be working. I suspect the error lies with the URL parameter, as the function works without it. Here is my code: <script language="JavaS ...

javascripthtml

Tips for converting binary image data stored in a database and viewing the images on a web browser

I'm currently working on a web application where users can upload images that are then saved as binary data in my MongoDB using Multer. The issue I'm facing now is how to retrieve and display these images on the webpage. When I try to use the img ...

htmlnode.jsreactjsmongodbimage

By clicking on the image, you can expand it to a specific size, and clicking again will return it to its original size. This feature maintains the exact

There have been numerous inquiries regarding how to make an image larger on click, and then revert back to its original size upon clicking again. I've spent the past 10 hours experimenting with many solutions, but none of them achieve the desired out ...

htmlcssimage