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

How to find and pair up custom data attributes that are unfamiliar?

Is there a method to select elements with unspecified custom data attributes? When I say unspecified, I am referring to an element that could appear like this: <div data-unknown="foo"></div> or <td data-someOtherCustomDataAttribute="bar"& ...

htmlcsscss-selectors

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

The battle between DataBind and control property settings

When considering these two methods: <asp:Label ID="Label1" runat="server"><%# DateTime.Now %></asp:Label> and Label1.Text = DateTime.Now.ToString(); Which approach do you prefer and what is your reasoning behind it? ...

asp.nethtmldata-binding

Showing a JSON file in an HTML page

I've been attempting to showcase a local JSON file on an HTML page. I stumbled upon some information online, but it's causing me quite a bit of confusion. Here is the JSON file I have: { "activities": [ { "name": "C:&bs ...

javascripthtmljson

Steps for adjusting the position of this div in relation to the main container

Apologies in advance for my lack of HTML skills. I am struggling with a page layout issue. I have a website at . When the window is resized, the ads div on the right side overlaps the main container. What I would like to achieve is to make this ads div re ...

javascriptjqueryhtmlcss

unexpected alteration of text sizing in mathjax within reveal.js presentations

Something strange is happening with the font size in my slides. The code for each slide is the same, but there is an unexpected change between the 3rd and 4th slide. I cannot figure out what is causing this discrepancy. Oddly enough, when I remove the tit ...

javascripthtmlcssmathjaxreveal.js

Incorrectly colored buttons upon clicking

I am experiencing an issue with my website where the color of the container div is not changing to the correct color when a button representing a color is clicked. Instead, it seems to be displaying the next color in the array of color codes that I have se ...

javascriptjquerycss

Establish a table containing rows derived from an object

I am currently dealing with a challenge in creating a table that contains an array of nested objects. The array I have follows this schema: array = [ { id: 'Column1', rows: { row1: 'A', row2 ...

javascripthtmlangulartypescript

displaying information in table cells with jquery

Is there a way to display a table inside a td element with an on-click function without showing all tables in the same column when the function is triggered? I want the table to be shown only for the specific td that was clicked. $(document).ready(funct ...

javascriptphpjqueryhtml

After incorporating some movement effects into my menu, suddenly none of the buttons were responding

While working on my website and trying to add a close menu button, I encountered an issue where all the menu buttons stopped functioning. Here is the HTML code snippet: <div id="openMenuButton"> <span style= "font-size:30px;cu ...

javascripthtmlcss

Align buttons in the center of a card or container using HTML and CSS

Hi everyone, this is my first time posting so please go easy on me. I've been struggling to align the buttons at the bottom of my cards to make them look neater. I've tried using flexbox but it doesn't seem to be working. Some people have su ...

htmlcssbuttonflexbox

Navigate to the adjacent IDs

I have multiple sections with varying content and links (previous and next) to navigate to the next section. Initially, everything functions properly. However, when adding a new section in between existing ones, I am required to update all the ids to ensu ...

javascriptjqueryhtml

Rearrange the order of items in the fancybox gallery

Typically, fancybox displays items in the gallery based on the order they are added in the HTML code. Is there a way to customize the order of items when they are opened in the popup, while keeping the original order when displayed on the page? The solut ...

javascriptjqueryhtmlcssfancybox-2

Transforming functions with dependencies into asynchronous operations with the help of promises

Can I convert both of my functions into asynchronous functions, even though one function relies on the other? Is it feasible for function b to execute only after function a? ...

javascripthtml

Ways to modify the cursor of a disabled ImageButton on an ASP.Net webpage

Within a ListView, I have dynamically generated ImageButtons. If an image does not have a link, I want to make it disabled. In the ItemDataBound event, I attempted the following approach: img.Enabled = False img.DescriptionUrl = "javascript:void(0);" img. ...

htmlasp.netcsscursorimagebutton

I'm looking to create a parent div that adjusts its size dynamically and can contain two child divs, each with variable sizes that can scroll independently. How can I achieve this?

Consider this layout configuration: <div id="PARENT_DIV"> <div id="LEFT_CHILD_DIV"> </div> <div id="RIGHT_CHILD_DIV"> </div> </div> Key features for PARENT_DIV: PARENT_DIV must have a higher z-ind ...

csshtml

Bootstrap allows for multiple items to be displayed on the same line, creating

I am currently utilizing Bootstrap framework and have a total of four items. However, the last item is displaying beneath the other three items instead of being on the same line. The current code snippet is as follows: <div class="text-center linksblok ...

csstwitter-bootstrap

Navigating through child elements within a div using JavaScript

I recently coded a div using this snippet... let sidebarBox = document.createElement("div"); sidebarBox.id = "sidebarBox"; ...and then I created a second div like so... let sidebarAd = document.createElement("div"); sidebarAd.className = "sidebarAd"; B ...

javascripthtml

Is it possible to continuously refresh a DIV element?

After spending the past 4 or 5 hours scouring Stack and various other resources, I am still unable to find a solution to my problem. The issue at hand involves an Iframe within a page that displays 5 lines of information fetched from a database. This info ...

javascriptphpjqueryhtmlpage-refresh

I am having trouble getting my textarea to accept width attributes

Strangely, the text area on my website just won't cooperate with the width I specify. I've double-checked the CSS multiple times to no avail! Take a look at this jsfiddle example that demonstrates what I'm trying to achieve. However, on my ...

htmlcsstextarea