The image for our "About Us" section is not loading

I'm facing a challenge with displaying an image in the about us section of my website. Even though the image is present in the folder, it doesn't show up on the site. I've tried various methods such as moving the picture to different locations within the folder and adjusting the CSS styles, but the issue persists.

Here's the code snippet:

<section id="about">
    <div class="container">
        <div class="section-header">
            <h2>About Us</h2>
        </div>

        <center>
            <img src="img/about%20us.jpg">
            <br>
            <br>
            
            <h3>The Off Beats are a young punk band based in Lichfield. Formed at college in late 2017, we love putting on high-energy performances. We all have different music tastes, so our songs cater to everyone. Our main influence is punk music. We began fully forming in 2018, developing our unique sound and playing local gigs where we discovered our distinctive style.</h3>
           
        </center>
    </div>
</section>

The expected result is for the image to display in the about us section.

Here's a link to a video demonstrating the issue: https://youtu.be/uwxjTKFTx0Y

htmlcss

Answer №1

Your code includes a before pseudo element that covers the entire section it's positioned against. To troubleshoot, start by removing this pseudo-declaration entirely and check if that resolves the issue (which it should).

#about {
    background-size: cover;
    overflow: hidden;
    position: relative;
    color: rgb(0, 0, 0);
    padding: 60px 0 40px 0;
}

/* ——- comment out or remove this block
#about:before {
    content: "";
    background: rgba(255, 255, 255);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
*/

If you simply want to add a full white overlay to the section, consider adding it as a separate element inside the #about section with a higher z-index, like the example below:

<section id=“about”>
    <div class=“overlay”>
    <img src=“...”>
</section>

.overlay {
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   z-index: 25;
}

img {
   z-index: 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

Determine the output by applying a constant value to the input

I'm having an issue with a loop function. The goal of the code is to allow users to enter a quantity of goods they want to buy, and then JavaScript calculates a fixed value based on the chosen quantity, which should be printed out. This functionality ...

javascripthtmlcss

Breaking apart a string and mapping it to specific fields

My issue is relatively straightforward. Upon loading my page, a long string representing an address is generated. For example: 101, Dalmations Avenue, Miami, Florida, USA, 908343 With the help of jQuery, I can split the string using: var address = sel.o ...

javascriptjqueryhtmlsplit

When clicked, the onClick feature will reduce the number each time instead of initiating the timer

Currently, I am working on a meditation application using React. As a starting point, I implemented a 25-minute countdown feature. The challenge I am facing is that the timer starts counting down each time the button is clicked, rather than triggering it ...

javascripthtmlcssreactjsjsx

JavaScript - Issues with Cookie Setting

I created a function for setting cookies: function storeCookie(cname, cvalue, exdays){ var d = new Date(); d.setTime(d.getTime() + (1000*60*60*24*exdays)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + ...

javascripthtmljsonfunctioncookies

Issues arise with Bootstrap's navbar dropdown menus, rendering them inoper

Currently I am developing a bootstrap website using the "Butterfly" template. Everything is functioning properly except for the navbar when viewed on mobile devices. The dropdown menu fails to open on mobile devices, and I suspect it might be related to th ...

htmlcsstwitter-bootstrapdrop-down-menunavbar

Adjust the table cell width to match the width of the ASP image

Below is the ASP image within a table cell: <tr> <td> <asp:Image runat="server" Width="64px" Height="64px" ImageUrl="~/Images/user64.png" /> </td> ...

htmlcssasp.nethtml-tablewebforms

Animate the menu as you scroll

I am attempting to create a jQuery top menu that adjusts its height based on the window scroll position. Using $(selector).css("height", "value") works fine, but when I try to animate it, it doesn't behave correctly. Here is my code. Thank you for you ...

jqueryhtmlcsstwitter-bootstrap

The hamburger icon is not visible on smaller screens when using the Bootstrap 5 navbar

'The stylesheets for Bootstrap CSS and JS have been included in the file. The content shows up fine with default colors, but not when I customize them.' ''' <li class="nav-item"> <a class= ...

htmlcssbootstrap-5

Issue on my website specifically occurring on Google Chrome and mobile devices

Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...

htmlcssmobile

Issue with Vue2: DIV does not adjust height when using v-for loop

I have a div set up like: <div class="pt-4"> <h5>Genres:</h5> <div class="inline-block float-left" v-for="(genre, index) in moreData.genres" :key="index"> <span v-if="index < ...

cssvue.js

Tips for making rounded corners with CSS styling

Can someone help me create a border like the one shown in this image? https://i.stack.imgur.com/b0GIa.png .child::before { content: ""; position: absolute; width: 13px; height: 13px; left: -1px; background: transparent; border-bott ...

htmlcss

What causes the offsetWidth attribute to be zero in an array of elements within the DOM?

I am encountering an issue with a script that sets widths for certain elements in the Dom. Specifically, when I use the code var elements = document.querySelectorAll("p.caption"), the first 12 elements display the correct offsetWidth, but the remaining hal ...

javascriptjqueryhtmldom

Words spilling onto the picture

The issue of the text col-xs-9 col-md-9 overlapping with the image col-xs-3 col-md-3 has been persistent. Even after attempting to add the img-responsive class to the img src, it continues to not work as expected. Interestingly, CSS was intentionally avoid ...

htmlimagetextresponsivebootstrap-5

What could be causing my CSS/Layout to alter once AJAX/JavaScript has been executed?

When the user clicks, an AJAX call is made to retrieve data from a third-party API. The frontend/layout renders correctly before this action; however, after the data is fetched and displayed in the frontend, the layout changes. Upon debugging multiple tim ...

javascriptjqueryhtmlcss

Is there a way to create triangles on all four corners of an image using canvas in JavaScript?

In my code, I am currently working on drawing rectangles on the corners of an image using JavaScript. To achieve this, I first extract the image data from a canvas element. // Get image data let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height) ...

javascripthtmlcanvasfilterpixel

Tips for Resizing google reCAPTCHA

The problem's image is shown below: https://i.sstatic.net/ph2EX.jpg Below is the code snippet related to the issue: <div class="text-xs-center" id="DIVCATCHA" runat="server"> <asp:HiddenField runat="server" ID="hdnImageSelected" /> ...

htmlcssasp.netrecaptcha

Is it feasible to automate the cropping process with selenium?

Exploring a new challenge: simulating a cropping feature. I understand that replicating human cropping is impossible, but the image I intend to crop remains a fixed size each time I run the test. My goal is to establish the cropping WebElement at a constan ...

cssseleniumselenium-webdriver

Expand the image size when hovering using CSS

I want to make a simple image link button that enlarges when I hover over it. The code below accomplishes this, but I also want to move the paragraph when the image gets larger. Any suggestions on how I can select and move the paragraph when I hover over ...

htmlcss

How to Align Title in the Center of a Section Containing Multiple Images?

I have a situation where I am using a StyledHead section to display 10 images from an API. The images are wrapped in another section called StyledHeader, which also contains an h1 element. How can I center the h1 element both vertically and horizontally so ...

cssreactjsstyled-components

Bootstrap component malfunctioning and not performing as expected

Currently, I am learning how to use Bootstrap and attempting to replicate the example themes found on their official website. The specific theme I am focusing on is available at this link: https://getbootstrap.com/docs/4.3/examples/pricing/ Unfortunately, ...

htmlcsstwitter-bootstrap