positioning of background images on a web page

I am trying to position my background image in the bottom right of my page:

.bg{
  background-image: url("Wave.png");
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 85%;
  background-position: bottom 0px right 0px;
  background-origin: content-box;
}

The bg class serves as the global container for my HTML

<body class="background">


     <div class="bg">

     </div>
</div>

When there is minimal content on the page, it displays correctly without any issues

https://i.sstatic.net/KbAYO.png

However, when there are more rows in my table, I encounter this problem

https://i.sstatic.net/Rn8xn.png

I'm trying to figure out what's wrong but can't seem to find a solution. Any ideas?

htmlcssbootstrap-4

Answer №1

Give this a try:

.bg{
    background: url("Wave.png") no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    background-attachment: fixed;
    overflow-y: scroll;
    background-size: contain;
    background-position: bottom;
}

UPDATE:

<body>
     <div class="bg">
        <div>
            ...
        </div>
     </div>
</body>

Here are some details to keep in mind: By setting background-attachment: fixed, the background will stay fixed on the page when you scroll. To ensure content stays within the div, use overflow-y: scroll;. This is especially useful if your content, like a lengthy table, needs to be contained within the div with scrolling functionality enabled. It suffices to specify background-position: bottom. I noticed that the closing tag for the body element is written as </div, which should actually be </body>. If you've already closed the body tag elsewhere in your code, you can remove the unnecessary </div.

Answer №2

Give this a shot

.cover-bg{
  background-image: url("Wave.png");
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-origin: content-box;
}

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

Using ngModel for binding can lead to the disappearance of line breaks in text within a textarea

I need to display a string that is returned by an external server in the format of "line1\nline2". However, when using ngModel to bind this string to a textarea, it displays line1\nline2 instead of line1 line2 I also tried using ngBind but that ...

javascripthtmlangularjstextarea

The responsive class seems to be malfunctioning within the Laravel 5.3 framework

I have a project that involves Laravel and Vue.js. In my Laravel project, I am importing Bootstrap CSS using the following line: // Bootstrap @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; This import is done in the app.scss file. ...

csstwitter-bootstraplaravelnpmvue.js

Execute MySQL query when the content of an HTML text field changes

My goal is to check if the value entered in an input text box matches any rows in a database. I want the DB to be searched when text is typed into the input field. <input type='text' name='barcode'> I would like it to search the ...

phphtmlajaxonchange

Looking to execute a jQuery function as soon as the input value matches?

Can anyone help me with this coding issue? I have a code that is supposed to display the #result div when the user enters "TV" into the input field, but I need the page to refresh after entering the text. Is there a way to do this live so that the div wi ...

javascriptjqueryhtml

Having trouble with the DOM className property inside the setTimeout() function?

I'm currently in the process of developing a React component that has the ability to display either a "peg" or a "nopeg" (essentially just an empty space with no peg). This functionality is achieved by simply toggling the class of the Peg component. I ...

javascripthtmlreactjsdom

Ensure that the child elements of a div item with the "container" class in Bootstrap 4 are given a width of 100%

For the parent div, I utilized the container class here: <div class="container"> <main role="main" class="pb-3"> <div style="width:100%; height:300px;z-index:-1" class="col-l ...

csstwitter-bootstrapbootstrap-4

Utilizing local storage functionality within AngularJS

I've been encountering challenges while trying to integrate local storage using ngStorage in my ongoing AngularJS project. Despite fixing what seems to be the root cause of data type problems and errors during debugging, issues persist. Here is the P ...

javascriptangularjshtmllocal-storage

Razor page does not identify Bootstrap as valid code

After creating a new project, I designed a fresh Layout page and integrated Bootstrap in the following manner: <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> ...

razorbootstrap-4

How can I modify the background color of the hamburger menu?

I attempted to modify the background color of the hamburger icon from black to yellow, but unfortunately, I couldn't achieve it. Here's what I tried: //hamburger $(".hamburger").toggleClass("is-active"); var $hamburger = $(".hamburger"); ...

javascripthtmlcss

Center align the text in a vertical group placed over an image

Here is my html page along with its corresponding css code: <div class="container"> <div class="row mt-4"> <div class="col-sm-8"> <h2>blah blah</h2> <p>blah blah&l ...

htmlcssbootstrap-5

Alignment issue detected

I was attempting to center these 4 divs inside a container both horizontally and vertically, but they are stuck at the top edge of the <div>. They aren't moving down and remain fixed at the top. /* Footer */ #footer { width: 100%; hei ...

htmlcss

Steps to align div directly to the left of the button that was clicked

I have a div in my code that is hidden by default. I want to show this div exactly left whenever the user clicks on the show button. Since there are multiple show buttons on my page, I would like to display the div as described above. <div id="me ...

javascriptjqueryhtmlcss

Omit components from the function

After clicking a tab, the window automatically scrolls down because of the code below. How can I keep the smooth-scroll effect while excluding specific HTML elements using jQuery selectors? Here is the code in question: //smooth-scrolling $(function() { ...

jqueryhtml

Exploring the latest features in Bootstrap 4 Alpha and enhancing your

Rumors have it that Bootstrap 4 will make its debut during the year 2016. When duty calls for an upgrade, is a complete re-write truly the best solution? Tackling such a project from Boostrap 2 to 3 was no small feat, and I find myself hesitant to take on ...

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Stop the click event from firing on child elements of a parent element that is currently being dragged

Below is the structure of a UL tag in my code: <ul ondrop="drop(event)" ondragover="allowDrop(event)"> <li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)"> <div class="product-infos"> ...

javascriptjqueryhtmlcss

Building an array of ids that contain the checkbox type using jQuery: What's the best way?

Below is the HTML snippet I am working with: <!-- Parent checkbox code goes here --> <input id="ckbCheckAll" class="custom-check ez-hide" type="checkbox" name=""></input> <!-- Child checkbox codes follow --> <input id="practice_ ...

javascriptjqueryhtmlcheckbox

Tips for Sending <Div> Data to a Servlet

I attempted to pass the content of an entire div in a form action URL using JavaScript. However, when I try to retrieve this request parameter as a String on the servlet side, it is returning [object Object]. Below is my code for the form and JavaScript: ...

javascriptjqueryhtmlservlets

Show or hide a fixed position div using jQuery when clicked

I am new to jQuery and I am trying to create a "full page menu" on my own. However, I am struggling to hide the menu on the second click. I tried using .toggle() but I found out that it has been deprecated. Can someone assist me with this? Thank you so muc ...

javascriptjqueryhtmlcsshide

Choosing img tag titles or alts within td elements using Selenium in C#

In my current setup, there is a table with five columns. The fifth column contains an image icon that changes randomly based on backend data. This image does not have a static id or class. https://i.sstatic.net/pSuYD.png The CSS for this setup looks like ...

c#cssseleniumselenium-webdriverselenium-iedriver

Loading dynamic fonts in React MaterialUI

In our web application, each user experiences a unique style with colors, fonts, border widths, and more based on the Material UI JSON theme retrieved from the database upon loading the app. The challenge lies in handling dynamic fonts. What approaches ha ...

cssreactjsfontsmaterial-uidynamic-content