The background image is not visible

.imagem-cortada {
    width: 100%;
    background-image: url("imagens/Vector 9.png");
}

The HTML:

<section class="imagem-cortada conteudo-principal"><!--inicio sobre nos-->
    <div class="container">
        <div class="verde h2 fonte-bold">
            Sobre nós               
        </div>
    </div>
</section><!--fim sobre nos-->

Unfortunately, the image is not showing up on the page.

Answer №1

Your HTML and CSS code seems to be correct. I was able to make it work using a different image, which makes me think that the issue might lie in the path to your image file. It's possible that you need to add a "/" at the beginning of the path.

.cropped-image {
    width: 100%;
    background-image: url("https://i.sstatic.net/gJmeJ.png");
}
<section class="cropped-image main-content"><!--start about us-->
    <div class="container">
        <div class="green h2 font-bold">
            About Us                
        </div>
    </div>
</section>

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

Unable to utilize external JavaScript files in Angular 8

I've been working on integrating an HTML template into my Angular project and for the most part, everything is going smoothly. However, I've encountered an issue where my JS plugins are not loading properly. I have double-checked the file paths i ...

Struggling to change the div content with ajax response transmitted through php

I would like to apologize in advance if this question has already been addressed elsewhere. After conducting a search, I came across several relevant posts that have guided me to this point. Below is the form snippet containing 1 input box, a button, and ...

Verify the status of the internet button and display a message indicating whether it has been selected or not

I’ve been attempting to complete this task: opening this particular page in Python, and observing the outcome when the "Remote eligible" button is enabled; do any job positions appear or not? Here's the code I have so far, but it keeps throwing thi ...

Tips for combining multiple lists into a dropdown menu based on selected checkboxes

Imagine a scenario where there are 5 checkboxes, each with a unique value mapped to a specific list of elements. In my particular case, I have an associative PHP array as shown below: [100] => Array ( [0] => Array ( [name] => NameABC [sid] => ...

In MUI v5 React, the scroll bar vanishes from view when the drawer is open

Currently, I am working on developing a responsive drawer in React using mui v5. In the set-up, the minimum width of the drawer is defined as 600px when it expands to full width. However, an issue arises when the screen exceeds 600px - at this point, the d ...

Is it possible for me to traverse a CSS stylesheet using code?

Exploring the depths of jQuery, one can effortlessly traverse the DOM. But what if we could also navigate through a stylesheet, accessing and modifying attributes for the specified styles? Sample Stylesheet div { background: #FF0000; display: blo ...

Show information when table is clicked

I currently have a 9 x 9 table with unique content in each cell. Is there a way to enable the following functionality: Upon clicking on the text within a specific cell, all related content would be displayed right below that same cell? For instance, if ...

Unable to display button image when using both id and style class in CSS

During my transition from Java 7 to Java 8, I've encountered a peculiar issue. Here's a brief explanation: In my FXML file, I have a button defined with style class button-red-big and id btnInput: <Button id="btnInput" fx:id="btnInput" align ...

The image on the landing page is not properly scaling to fit the size requirements

Currently utilizing Bootstrap Studio, I incorporated the code background-size:cover. While it works well in desktop mode, it unfortunately isn't very mobile-friendly. Below are screenshots for reference: Mobile View Example Desktop View Example ...

Chrome's rendering of CSS flex display shows variations with identical flex items

I am facing an issue with my flex items where some of them are displaying incorrectly in Chrome but fine in Firefox. The problem seems to be with the margin-right of the rectangle span within each flex item, along with the scaling of the text span due to f ...

What could be causing the margin property to fail in "container3" even after implementing the clear property in CSS?

Within the main container, you will find three smaller containers as shown in the attached file. The first two containers are styled with "float: left", while the third container has the "clear: both" property applied to it. However, it appears that when ...

Is the MDL drawer not reaching the full height of the page?

I am currently utilizing Material Design Lite to incorporate a fixed header and drawer into my Ruby on Rails application. In the following video, you can observe that when I switch to another page, the drawer menu on the left side of the page fails to fill ...

Picking an art exhibit to visit

Can you provide recommendations for a gallery suitable for my web project? The project utilizes: jQuery Bootstrap An ideal gallery would be based on jQuery. Here are the requirements and preferences: Compact CSS and JavaScript files. Utilization of the ...

Issue with logical operator ""!"" functionality in ejs file

Take a look at this code snippet: <% if( !title || title!=="login"){ %> <div class="dashboard-main-cont"> <div class="navigation-option"> <a class="btn btn-primary navbtn" href=& ...

Javascript function failing to execute upon page load

I don't have much experience with JavaScript, but I found the following code in a .htm file. The function doesn't seem to be triggering when it should; It is supposed to activate when the page is directly opened i.e www.site.com/12345.htm This ...

What is stopping this paragraph from being vertically centered with just one line?

After following instructions from another user, I successfully centered text vertically. However, I encountered difficulties when trying to center the entire content vertically. My attempt to enclose the text in its own div did not yield the desired result ...

Updating HTML5 localStorage value upon a click

Currently, I have implemented a countdown timer using the provided code snippet. To prevent the count from resetting upon page refresh or reload, I am utilizing local storage. However, if there is an alternative solution to achieve this functionality, I wo ...

Only a handful of pictures all aligned in a row

How can I style two images to be on the same line? <div> <img src=""/> <img src=""/> </div> While this code gives me images on the same line, there are spaces between them. Using inline display did not solve the issue. Any suggest ...

Styling the `<thead>` tag in Internet Explorer 7 (IE

This code is functioning correctly in IE8, Firefox, Chrome and other browsers. However, there seems to be an issue with IE7 not recognizing the following line: .defaulttable thead{border-right:55px solid #c7c9cf;} As a result, I am seeing no border in IE ...

In situations where there may be a duplicate, what alternative can I utilize in place of the id attribute?

I understand that almost any element in the DOM can have an "id" attribute, and I've used it to track each client in a table of clients. Although ids should not be repeated, my rows are assigned unique identifiers based on each person's "clientId ...