Having issues with background image of a section

debugcn Published at Dev

Jennifer Mejia

This is probably something simple that I can't quite figure out. But I am trying to have a gif as a background to create an illusion of flowers growing with a campaign logo image over it and a donation button.

When in full screen, the background gets cut off at the bottom. Somehow the image is being pushed down. As you make the screen smaller for mobile responsiveness, the full image starts to appear (in height). I'm not sure what I am doing wrong.

Campaign Page

Any help would be much appreciated! Thank you. Below is the code I am currently using.

.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>

A-312

Uou can use : 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>

Collected from the Internet

Please contact [email protected] to delete if infringement.