Member Avatar for drewpark88

Hey Guys,

I have a thin image that I would like to repeat-x for my footer. So far I have had no luck....not sure what the problem is. I am using wordpress so the footer is in a "footer.php". I am using the wordpress get footer to retrieve the footer, although it is not showing up right. No matter what I do I am having issues.

I want to repeat the image horizonally 100% (expand with browser)


Here is my footer.php code (basic, just needs to work):

<!-- BEGIN FOOTER -->
	
         <div id="footer">
    
    

	</div>	
	
<!-- END FOOTER -->

</body>
</html>

And here is my css file (need to make the background image repeat-x):

#footer {
	position:relative;
	height:362px;
	width: 100%;
        background:url(../images/footer_bg.jpg) 0 100% repeat-x;
}

Would this be the proper way of doing this? If not please help me out, I would greatly appreciate it! : )

Thank You!

  • 2 Contributors
  • 2 Replies
  • 120 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by drewpark88

Dani AI

Generated

Nice troubleshooting by and good catch by — the image-repeat itself was fine; the issue was the element the image was applied to not spanning the full viewport. Below are practical checks and quick fixes that avoid repeating the CSS already in the thread.

Start by verifying what the footer is actually 100% of: use the browser inspector to view the computed width and the element tree. If a parent (for example a wrapper or the body) has a fixed width, a footer set to 100% will only match that narrower value. Also check that the footer has nonzero height — floated children can collapse the parent, so give the footer a clearing method or a min-height while debugging.

A simple clearfix you can add to the site wrapper/footer container if floats are involved:

.site-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

In WordPress, ensure the image path in your CSS points to the correct location (stylesheet-relative paths can be tricky). One reliable option is to generate the absolute URL from PHP and apply it inline or in an injected stylesheet:

<?php $bg = get_template_directory_uri() . '/images/footer_bg.jpg'; ?>
<footer id="site-footer" style="background-image:url('<?php echo $bg; ?>');">
  ...
</footer>

Extra tips: temporarily add a background-color to the footer to see its real bounds, use background-position: left bottom for clearer positioning, and confirm get_footer() is included where expected. For reference on CSS background behavior and generating theme URLs in WordPress see the MDN background docs and the WordPress function reference for get_template_directory_uri():

background (MDN)
get_template_directory_uri (WordPress)

Recommended Answers

All 2 Replies

Member Avatar for JRM

It may be a syntax problem. try:

#footer {
	position:relative;
	height:362px;
	width: 100%;
        background:url('../images/footer_bg.jpg') ;
        background-repeat:repeat-x;

}
commented: JRM Rocks! He has helped me many times! +1
Member Avatar for drewpark88

Thanks JRM,

You are always very helpful! Unfortunately that didn't fix the issue, fortunately I found the problem....I was just dumb and set my body width opposed to setting a container/wrapper. It has been a long weekend, again thank you very much for the prompt response : )

- Drew

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.