Is there a way for me to place an image in the background with CSS? When I try to do so, the upper curve looks great, but the bottom of the image appears flat

.bg-pink{
          background-image:url(https://i.sstatic.net/eF8tF.png);
          background-size: cover;
          margin-bottom: 44px;
          background-position: top;
        }
<body>
      <!-- Top content -->
      <div class="top-content">
         <div class="container-fluid">
            <div class="row bg-pink">
                <div class="col-md-12">
                  <div class="jumbotron text-center">
                    <h1 class="display-3">Thank You!</h1>
                    <p class="lead"><strong>Please check your email</strong> for further instructions on how to complete your account setup.</p>
                    <hr>
                    <p class="lead">
                      <a class="btn btn-success" href="#" role="button">Continue</a>
                    </p>
                  </div>
                </div>
            </div>
         </div>
      </div>
   </body>

I see this type of background image but 1

I want a shape similar to the one at the bottom from this 2

When using this HTML and CSS, I have tried adjusting the background size and padding, but I am still unable to achieve the desired shape.

htmlcssbootstrap-4

Answer №1

It appears that this solution should do the trick. However, I would recommend utilizing a higher quality image if it's going to be displayed on high-resolution screens.

I have made adjustments to the background-size and background-repeat properties in the CSS code snippet below.

.bg-pink{
    background-image: url(https://i.sstatic.net/eF8tF.png);
    background-size: 100% 100%;
    margin-bottom: 44px;
    background-position: top;
    background-repeat: no-repeat;
}
<body>
      <!-- Top content -->
      <div class="top-content">
         <div class="container-fluid">
            <div class="row bg-pink">
                <div class="col-md-12">
                  <div class="jumbotron text-center">
                    <h1 class="display-3">Thank You!</h1>
                    <p class="lead"><strong>Please check your email</strong> for further instructions on how to complete your account setup.</p>
                    <hr>
                    <p class="lead">
                      <a class="btn btn-success" href="#" role="button">Continue</a>
                    </p>
                  </div>
                </div>
            </div>
         </div>
      </div>
   </body>

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

Ways to align three divs next to each other in an HTML structure?

I am currently working on a website layout that consists of three sections positioned horizontally. I am aiming for the left division to take up 25% of the width, the middle one to occupy 50% of the width, and the right division to fill 25% of the width so ...

htmlcsslayoutposition

Struggles with ajax and JavaScript arise when attempting to tally up grades

Currently, I am facing an issue with my JavaScript. The problem arises when trying to calculate marks for each correctly chosen answer based on information from the database. If an incorrect answer is selected, the marks are set to '0', otherwise ...

javascriptjqueryhtmlajax

Move the modal dialog so it appears closer to the top of the page

I am facing a challenge with my jQuery modal dialog. While it is loading properly, I am restricted to using an older version of jQuery (1.12.4) and cannot upgrade it. My goal is to center the modal close to the top of the page, similar to how it is positio ...

javascripthtmljquerycss

Switch tab colors when clicked

I'm encountering an issue with two tabs in bootstrap. My goal is for the tab color to change from black to yellow when pressed. I have attached 2 screenshots showing the code and design. Thank you. https://i.sstatic.net/GBOSf.png Second https://i. ...

htmlcssbootstrap-4

Which HTML element does each script correspond to?

Are there any methods to identify the script used in certain HTML elements? For instance, if I wish to determine the script responsible for creating a drop-down menu, I can locate the HTML and CSS for the menu but not the JavaScript (or other scripts). I ...

javascriptjqueryhtmlcss

Issue with displaying Bootstrap 4 Navbar toggle on iPad devices

I am encountering an issue with the Navbar header in Bootstrap 4 beta on my iPad. While it works perfectly on small devices, it is not displaying correctly on my iPad. Can someone please assist me in fixing this issue? If you need to see the problem in act ...

twitter-bootstrapbootstrap-4

Issues with jQuery horizontal sliding gallery functionality

My attempt at creating a jQuery sliding video gallery is not working as I hoped. Instead of scrolling through the images when clicking arrow buttons, the entire div moves left or right depending on the direction. HTML: <div id="videocontainer"> & ...

jqueryhtmlcss

Creating a dynamic table in HTML with Angular by programmatically inserting rows using components

There's a peculiar issue that I'm facing and I just can't seem to figure out why it's happening. My goal is to display an HTML table using Angular 4. When I use the following syntax to output the table, everything works perfectly: < ...

htmlangular

Determine if the input number exceeds a specified threshold by implementing JavaScript

My attempt at performing calculations on a page is not yielding the desired results. I have tinkered with the code below, but it doesn't seem to be working as expected. Can anyone provide guidance on where I might be going wrong? Specifically, I want ...

javascripthtmljquery

Bug in canvas rendering for Chrome versions 94 and 95

The Canvas drawing functionality in the Chrome browser seems to have some visible bugs. Here's an example of code that demonstrates this issue: const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d&apo ...

javascripthtmlgoogle-chromecanvas

Can anyone provide a reference or resource that explains the best scenarios for utilizing display:block, display:inline, and display:inline-block, and the reasons behind their usage?

Can you recommend a quality article discussing the guidelines for using display:block, :inline, and :inline-block in CSS, along with explanations on when to utilize each one? Additionally, in what scenarios should we override the display property through ...

cssxhtmlsemantic-markup

How to Keep Images Within Table Borders From Overlapping?

I am in the process of experimenting with creating a newsletter and have developed a template. I am very new to design and have created a table of album releases that is not fitting within the border I established. How can I resolve this issue? The code s ...

htmlcssresponsive-design

Unnesting Django Endless Pagination in a Twitter-style format, how can I move a div outside of another div?

After implementing Django Endless Pagination with the Twitter Style and Show More option, everything seems to be working smoothly without any issues. I've even included media queries in the HTML render to help visualize the problem more clearly when r ...

jqueryhtmlcssajaxdjango-endless-pagination

Matching Regex Patterns for Parents and Children

Regex has always been a struggle for me, so I could really use some guidance. I'm attempting to create opening and closing 'tags' with the same regex permitted inside these tags. For example, a tag might look like: <: tagname("[captur ...

htmlregexgo

Facing a blank page with no errors displayed during the HTML rendering process in Angular version 6

One of the most frustrating aspects of working with Angular is the lack of information provided when there is a render error in an HTML page. Instead of specifying which page the error is in, Angular defaults to the route page and provides no further detai ...

htmlangular

Tips for Preventing Ant Design from Overriding Existing CSS Styles

Currently, I am working on a ReactJS project. Initially, the entire project was designed using pure CSS. However, I decided to incorporate a small Antd component into my project. Following the provided instructions, I imported the component like this in on ...

cssreactjssassantd

Struggling to locate a straightforward sidebar solution without relying on Bootstrap. Finding an easy-to-use answer seems

I have a lightweight and easy-to-understand code for a website project with two panels. The first panel on the left is a large navigation (270px width, top to bottom, similar to a wiki) with approximately 30 unordered list items. Next to it is the second ...

javascripthtmljquerycsssidebar

Tips for scaling an image in HTML and CSS without distorting its appearance

Is there a way to resize an image using only HTML and CSS, maintaining its proportions and applying a crop effect without any server code? I want to specify a width for the image while keeping its proportions intact, but if the height exceeds a certain val ...

htmlcssimage-resizing

Modify the Embed Audio Player in Google Drive

I am looking to integrate audio files from Google Drive into my website. While I have successfully embedded them, the issue lies in not being able to customize the player (as shown in the image below). Is there a way to modify the player? <iframe ...

javascripthtmlcssgoogle-drive-api

The menu will showcase all currently active sub-category items whenever an item below is selected (using Joomla/Mosets Tree)

I am currently managing a Joomla website that utilizes Mosets Tree for a business directory. One issue I have noticed is that on the right side of the site, all the categories are listed. When you expand sub-categories and then roll over to another menu it ...

phphtmlcssjoomla