Experiencing difficulties with the background image in a specific section

I am facing a simple issue that I can't seem to solve. My goal is to have a gif as the background, showing flowers growing, with a campaign logo and a donation button overlay. However, there seems to be an issue with the background getting cut off at the bottom when in full screen mode. It appears fine on mobile screens but not on desktop. Any ideas on what might be causing this problem?

Here is the Campaign Page. Your help would be greatly appreciated! Thank you.

.header-wrapper{
        width: 100%;
background-image: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif);
        background-size: cover;
position: relative;
margin: 0 auto 0 auto;
font-family: "museo-sans", Helvetica, Arial, sans-serif;

}
.centered { margin-left: auto; margin-right: auto; }
.align-center { text-align: center; }
.campaign-logo {
    max-width: 70%;
position: relative;
height: auto;
}
.padding-3x { padding: 45px; }
.button1{
    color: #fff;
    display: inline-block;
    font-size: 18px;
    letter-spacing: .75px;
    padding: 15px 21px;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    vertical-align: middle;
}
.green-bg { background-color: #8ec63f;}
<div class="header-wrapper contained-12 centered align-center middle">
<img class="campaign-logo" src="https://secure3.convio.net/little/images/content/pagebuilder/horticulture_logo.png"/>
<p class="padding-3x"><a class="button1 green-bg" title="Give Now" href="Donation2?idb=[[S76:idb]]&amp;df_id=1540&amp;1540.donation=root">Give Now</a></p>
</div>

htmlcss

Answer №1

Simply include the following code: background-position: bottom; within the header-wrapper section

Answer №2

To align the background image in the center bottom, you can use the CSS property: 

background-position: center bottom;

.header-wrapper {
  width: 100%;
  background-image: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif);
  background-size: cover;
  background-position: center bottom;
  position: relative;
  margin: 0 auto 0 auto;
  font-family: "museo-sans", Helvetica, Arial, sans-serif;
}

.centered {
  margin-left: auto;
  margin-right: auto;
}

.align-center {
  text-align: center;
}

.campaign-logo {
  max-width: 70%;
  position: relative;
  height: auto;
}

.padding-3x {
  padding: 45px;
}

.button1 {
  color: #fff;
  display: inline-block;
  font-size: 18px;
  letter-spacing: .75px;
  padding: 15px 21px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  vertical-align: middle;
}

.green-bg {
  background-color: #8ec63f;
}
<div class="header-wrapper contained-12 centered align-center middle">
  <img class="campaign-logo" src="https://secure3.convio.net/little/images/content/pagebuilder/horticulture_logo.png" />
  <p class="padding-3x"><a class="button1 green-bg" title="Give Now" href="Donation2?idb=[[S76:idb]]&amp;df_id=1540&amp;1540.donation=root">Give Now</a></p>
</div>

Answer №3

  .header-wrapper  {

        width: 100%;
        font-family: "museo-sans", Helvetica, Arial, sans-serif;
        background:  url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif) no-repeat center center fixed; 
        background-size: cover;

      }

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

Changing the class name in HTML depending on the size of the screen

I'm attempting to dynamically change the class tag's name when a user visits the page based on the screen size. Below is the code snippet I've used: <!DOCTYPE html> <html> <body onload="changeClass()"> <section class=" ...

javascriptjqueryhtmlcss

Initiating the click event on a designated element

I'm working on a grid of team members represented by figures with figcaptions. I want to be able to trigger a click function only for the specific figure that has been clicked, rather than applying the function to all figures at once. Here is an exam ...

javascriptjqueryhtmlclick

Exploring ways to access and display images from local files using JavaScript or alternative methods

Is there a way to load local images in JavaScript without requiring user input? Situation: Our php/js tool on a webserver allows users to process data, accessing numerous large images stored on the same server. However, the high traffic from loading thes ...

javascripthtml

How can I display only four decimal places by default within textboxes in HTML?

Looking for assistance with configuring textboxes in a cshtml file. The textboxes are bound to decimal fields in a view model and currently display nine zeros after the decimal point. I would like to limit the display to only four digits by default witho ...

javascriptc#htmlcssasp.net

Only implement the CSS styles if there are multiple elements that have the same class

I have 2 cards with the class card displayed within a card-stack. There can be any number of such cards. <div class="card-stack"> <div class="clear"><button name="clear" value="Clear all" onclick=&qu ...

htmlcss

Steps to trigger a Bootstrap modal when the user clicks anywhere on the webpage

I need assistance with setting up a Bootstrap dialogue modal to open at the clicked position on a mousedown event when a user interacts with the page. Despite my attempts, the dialogue modal is not opening where it should be. Here's what I've tri ...

javascriptjquerycsstwitter-bootstrap-3modal-dialog

Aligning the passwords in the middle of the screen

I need guidance on how to center these labels and inputs on my webpage. Can you help? <form> <div class="row mb-3"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> < ...

htmlbootstrap-5

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Could use a little help here. Thank you :) I'm having trouble figuring out how to get the outer div to wrap around the inner div and expand upwards with the content inside the inner editable div. The inner div should expand from bottom to top, and t ...

javascripthtmlcss

Converting HTML to plain text on an Android device

I need help converting HTML text to plain text and displaying it in a TextView. However, I am encountering an issue where additional paragraphs are being added after the conversion. Please refer to the image https://i.sstatic.net/SxSf0.jpg Can someone exp ...

androidhtml

Using BeautifulSoup4 in Python to extract text data from a nested tag within an h1 element

Seeking assistance in extracting the text content within an anchor tag that is nested inside a heading tag. <h1 class="branded-page-header-title"> <span class="qualified-channel-title ellipsized"><span class="qualified-channel-title-w ...

htmlpython-3.xtagsbeautifulsoupweb-crawler

How can I annotate the overall count of occurrences of a keyword across multiple models following filtration in Django?

I have a situation where my 'Keyword' model stores keywords for 4 other models, each with a 'key_list' field that is a ManyToManyField pointing back to the 'Keyword' model. The models have multiple keywords, and I am successfu ...

pythoncssdjangopython-3.x

Leveraging Angular and HTML to efficiently transfer the selected dropdown value to a TypeScript method upon the user's button click

I am experiencing difficulty accessing the .value and .id properties in {{selectItem}} in order to send them back to the typescript for an HTTP post at a later time. Although there are no specific errors, I have encountered exceptions and have tried search ...

htmlangulartypescriptcollectionsdata-binding

Struggling with correctly processing values in an HTML PHP Form

Help! I'm struggling with my online PHP form that has checkboxes. When I leave the checkboxes empty and submit the form, the first checkbox option shows up as selected but the second one doesn't (which is correct). Even when I tick both checkboxe ...

phpjqueryhtmlformscheckbox

Ways to boost CSS transform with GPU acceleration

Is there a way to ensure smooth animations by utilizing GPU acceleration for CSS transforms in browsers? When does this acceleration occur and how can it be forced? For more information, check out this article ...

cssanimationtransformgpu

Enhance your website with a sophisticated jQuery Fancybox gallery - customize your image settings

How can I ensure that an open photo always remains visible in the center regardless of page zoom on phones with desktop version enforcement enabled? You can find the website at: To view the photo without approximation, click here: without approximation ...

javascripthtmljquerycssfancybox

Sticky positioning is not maintaining its position at the top

I've noticed a strange behavior where, when I scroll down, the yellow box goes on top of the blue box. I have set both boxes to have a position sticky so that they should stay in place and not overlap. However, I want only the orange box to be scrolla ...

javascripthtmlcssreactjsflexbox

Text that is curving around a D3.js pie chart

I am currently working on creating a 3D-Js chart and I would like the pie text to wrap around the pie itself. This is the exact effect that I am trying to achieve: https://i.sstatic.net/YOLdo.png I am facing two main issues: I am currently printi ...

javascriptcssd3.jscharts

Adjust the initial slider according to the values displayed in the following four sliders

Having an issue updating the slider value in the first one based on selected values from four other sliders. The selected value should not exceed 50, which is the maximum value in the first slider. Link to Working Fiddle : Below is the HTML code : & ...

javascriptjqueryhtmlcss

Unable to modify the .top attribute style in elements within an arraylist using JavaScript

I need to align multiple images in DIVs on the same line by setting their Top value to match the first image in the array. Here is the code I am struggling with: (addBorder function is called when divs are clicked) <div class="DRAGGABLE ui-widget-cont ...

javascriptjqueryhtmlcss

Viewing content on a mobile device and using the scrolltop

I am working on a website that needs to be mobile-friendly. With the release of iOS 7, I wanted to achieve a depth and blurry effect. I used an iframe with a CSS3 filter applied to it and made it scroll along with the page using jQuery. Everything looks go ...

jqueryioscssscrollviewport