Instructions for creating a background within a container and positioning text in the center of the image utilizing HTML and CSS

I am currently learning HTML, CSS, and JavaScript. I am in the process of building my very first website, but I have encountered a problem. I am struggling to change the background color within the container beneath the images to a specific color (#82b5cf), as most online resources only mention classes like bg-secondary.

Additionally, I need help aligning the text in the center of the image rather than below it. Despite trying to adjust the font and make changes, nothing seems to be working. Any assistance on these matters would be greatly appreciated! :)

main {
  .aboutus-card-title {
    font-size: 30px;
  }
}
<main>
  <section id="UAV" class="...."> //#82b5cf
    <div class="container ">
      <div class="row gx-4 ">
        <div class="col-sm ">
          <img class="uav-photo" src="img/introduction_1.jpg" alt="An orange four-engine drone hovers in the clear blue sky.">
          <p class="aboutus-card-title">Introduction</p>
        </div>
        <div class="col-sm">
          <img class="uav-photo" src="img/UAV_features_2.jpg" alt="An orange four-engine drone hovers in the clear blue sky.">
          <p class="aboutus-card-title">Elements</p>
        </div>
      </div>
    </div>
  </section>
</main>

htmlcsssass

Answer №1

If you're looking to add a fallback color behind your image for your first question, you can achieve this by setting a background-color and then adding a background-image. This way, if the image fails to load, the background-color will still be visible. Here's an example of how to do it: https://css-tricks.com/css-basics-using-fallback-colors/

header {
  background-color: black;
  background-image: url(plants.jpg);
  color: white;
}

Regarding your second question about styling text with the .aboutus-card-title class, make sure your CSS selectors are correct. You can learn more about selectors here: https://css-tricks.com/how-css-selectors-work/. To select that class within main, your selector should be like this:

main .aboutus-card-title{
  font-size: 30px;
}

In most cases, you can simply use this selector without specifying main:

.aboutus-card-title{
  font-size: 30px;
}

The main selector would only be necessary if you want to style the .aboutus-card-title class differently when it is within main compared to other places.

Answer №2

Here are some helpful tips for customizing your webpage:

If you want to change the background color, try using:

background-color: #82b5cf;

or

background: #82b5cf;

To center text on an image, consider using a combination of position, top, left, and transform:

.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

I seem to be having issues with the downloaded files for Bootstrap 4. Is there something I am

After creating a site with Bootstrap 4 and downloading all the necessary files, I encountered an issue where Bootstrap was not functioning properly. Strangely, when using the CDN version of Bootstrap, everything worked perfectly. Could I be overlooking som ...

javascriptcssbootstrap-4file-structure

Utilize the attribute selector to apply styling directly within HTML elements

My job requires me to use a CMS that does not give me access to the head-section in order to utilize attribute selectors. I attempted to address this issue by using inline styles. Here is a simplified version of my HTML code: <div> <style typ ...

htmlcss

Maintain uniform product dimensions for images and configurable swatches in Magento

I am new to using Magento and I am currently working on setting a consistent product image grid size of 500px x 500px for the product detail page. Some of my product images are in square or rectangular shapes, so I need to resize them to fit into the grid ...

phphtmlcssmagentoimage-resizing

Div that scrolls only when children can be displayed without overflowing

I am seeking a solution to ensure that the children inside my scrollable div are only visible in their entirety. HTML <div id="container"> <div class="child"></div> <div class="child"></div> <div class= ...

htmlcss

The height of a div element does not automatically default to 100% in Next.js

I'm encountering an issue with styling pages in next.js. My goal is to create full-height pages. Although I've successfully set the height attribute in the body and html tags to achieve full height (verified in dev tools), I'm struggling to ...

htmlcssnext.js

Adjust the header image as you scroll

Currently, I have a static image in the header of the page. I'm looking to have the image change to a different one when half the page has been scrolled. Do I need to utilize JavaScript for this functionality or is it achievable with CSS alone? bo ...

javascripthtmljquerycss

Options for Printing HTML - Explore Different Techniques for Creating HTML Printouts and Weigh the Advantages and Disadvantages

As I work on maintaining an application, I am faced with the task of printing out a report. However, my curiosity extends beyond this assignment as I wonder about the various ways to format an HTML page for optimal printing results and the advantages and d ...

htmlcssprinting

Bypassing CSS rules for elements not present in the DOM

In case an element is absent from the DOM, I want to include margin space. Conversely, if the element is present, no margin space should be added. I have experimented with CSS for this purpose: A - To ensure there is no margin-top if the H2 title is displ ...

css

Utilizing MUI alongside Tailwind CSS in conjunction with NextJS: Here's a solution for resolving the transparent button issue without compromising the utilization of Tailwind CSS preflight

Currently working on a project built on top of a NextJS template using TailwindCSS. Struggling to integrate MUI components due to unexpected behavior with the button element (White Button error in NextJS Project). While I am aware of solutions suggesting ...

cssreactjsnext.jsmaterial-uitailwind-css

Adding a bootstrap label on the corner of a div using overlay technique

I'm attempting to superimpose a bootstrap label in the corner of a DIV. My goal is to position the label in the top left corner of the div, partially overlapping it. Thank you <div class="span4" style="border-bottom: none; border-top: 4px s ...

htmlcsstwitter-bootstrap

What causes Windows 7 users to consider the VS Code website unsafe?

What causes Windows 7 users to view the VS Code website as unsafe? Visit the image link here ...

html

What is causing this unexpected text to display in Django when encountering errors while trying to submit a form?

On my website, there is a form that collects an employee number and validates it against another model called Salesman. It also checks if the employee's team field includes 'WF'. The validation process functions correctly and displays everyt ...

pythonhtmldjangodjango-forms

Stop the jQuery custom slide animation when there are no more items to display

I have designed a unique slider for users to view the work process https://i.sstatic.net/FLYne.png When a user clicks the button, the slider will move left or right depending on the button clicked. However, if the user clicks multiple times, the slider ma ...

javascripthtmljquerycss

Disabling collapse in Bootstrap 5 is impossible using stopPropagation() when clicking on a particular element

I'm attempting to prevent an element from collapsing/expanding when clicking a checkbox inside it. In my example on codepen, my code worked fine with Bootstrap v4, but after switching to v5, the stopPropagation function doesn't seem to work. Yo ...

javascripthtmlbootstrap-5

Encountered a problem loading resources - code 500 malfunction detected

I am encountering an issue where I consistently receive a 500 Internal Server Error message in the developer console for all CSS, image, and JS files: Failed to load resource: the server responded with a status of 500 (Internal Server Error) Despite doub ...

htmlasp.netasp.net-mvcasp.net-mvc-3asp.net-mvc-4

utilizing the power of Ajax in Laravel version 5.7

I am seeking assistance in utilizing AJAX to delete and update table rows with a modal in Laravel 5.7. I am new to AJAX and would appreciate any help, especially in explaining how AJAX sends/gets data in the controller and if there are any differences betw ...

phpjqueryhtmlajaxlaravel

Creating a Submenu with HTML and CSS

After trying several guides on creating sub-menus, some involving JS, I decided to attempt a CSS-only approach. Unfortunately, I have encountered difficulty in making the submenu function correctly. You can view my code on fiddle here: http://jsfiddle.net ...

htmlcss

Styling with CSS will keep your content centered on the page, while the background

I'm looking to create a layout with the following specifications: The content wrapper will have a fixed size and be centered: .content { width:960px; margin:0px auto; } My issue is how to implement the left-aligned background bar for the su ...

htmlcss

Python is the way to go for clicking on a link

I have a piece of HTML and I am in need of a Python script using selenium to click on the element "Odhlásit se". <div class="no-top-bar-right"> <ul class="vertical medium-horizontal menu" dat ...

pythonhtmlselenium

Concealed upper TD boundary in IE 8

I've been struggling all day to figure out this style issue without any success. http://jsfiddle.net/9HP9Q/1/ The table lines should have gray borders around them. It's working fine on all browsers except Internet Explorer 8. .order_table tab ...

htmlcsshtml-tableinternet-explorer-8border