How to have a background image in the footer

2574
6
01-26-2023 09:55 AM
CIDAdmin
New Contributor III

How can I make a background image in the footer to take up the whole space? As seen in the pic attached there is currently still some padding

Tags (3)
0 Kudos
6 Replies
KlaraSchmitt
Esri Contributor

It's likely you're not attaching your background image to an HTML element high enough in the code structure. Is your background image on .custom-footer?

0 Kudos
RaymondGoodeJr
New Contributor

I'm working on this with CIDAdmin.

I have tried to use .custom-footer but the image does not show.

Here is what I have in the CSS

.custom-footer {
background-image: url("https://dev-intapps.imf.org/depts/CSF/CLab-DemoSpace/PortWatch/footer.png");
background-size: cover;
background-color: #004C97;
padding: 0px;
height: 350px;
}

0 Kudos
KlaraSchmitt
Esri Contributor

Hi @RaymondGoodeJr,

Try putting a different wrapper in your custom footer HTML box and attaching your image that way. I was able to add a background-image using your code to my site with this as the sample HTML and it didn't add any padding. I hooked your CSS to footer-background. I could not verify with your image as trying to load your image gives me a "site cannot be reached error."

<div class="footer-background">
<!-- footer content here -->
</div>

 

0 Kudos
RaymondGoodeJr
New Contributor

Thanks @KlaraSchmitt for the reply but that didn't work either.  I just put in the exact thing you have with no other stuff and it's still not working.  See attached image.

Any other suggestions?  This just seems weird. 

0 Kudos
KlaraSchmitt
Esri Contributor

@RaymondGoodeJr 

Do you have other custom CSS on that site? My next guess would be that you have some inline CSS that is unintentionally having an affect on your footer due to non-specific enough target selectors. You might want to look through any custom styles for classes that have padding or affect sections.

0 Kudos
RaymondGoodeJr
New Contributor

would css in the header affect the footer? I'll continue to look around.

0 Kudos