Troubleshooting CSS Problems: Issues with background repeating and footer placement

I am currently in the process of transitioning my website to a CSS layout, and so far it's looking good. However, I am facing two specific issues with the page layout that I need help with:

1) The background image of the left-most column is not repeating, even though the background color extends the full length of the page.

2) My copyright footer is displaying to the right of my two layout columns instead of at the bottom where it should be. I have tried various solutions but haven't been successful in fixing either problem!

You can view the page and the code here:

(In the future, I plan to eliminate the layout table currently being used in the main section, but one step at a time!)

Thank you for your assistance!

Answer №1

http://codepen.io/anon/pen/lpDKs

Avoid using tables to align content as it is not recommended. Instead, utilize floats without absolute positioning for layout. The repeating background is set on the main container with a minimum height of 100%.

Keep in mind that there is still room for improvement. This serves as a basic concept.

 html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}  
body {
  background-color:#597d4f;
}
.container {
  position: relative;
  width: 850px;
  margin:0 auto;
  overflow: auto;
  min-height: 100%;
  background-color:#597d4f;
  background-image:url('http://agdequine.com/images/banner_top_02.jpg');
  background-repeat:repeat-y;
  background-origin:border-box;
}

.topframe {
  position: relative;
  height: 323px;
  background-color:#597d4f;
  background-image:url('http://agdequine.com/images/banner_top_01.jpg');
  background-repeat:no-repeat;
  background-origin:border-box;

}

.leftframe {
  width:196px;
  float: left;
}

.mainframe {
  width: 654px;
  float: left;
  background-color:#faf4d1;
  padding-bottom: 80px;
}

.title_main {
  font-size: 46px;
  font-variant:small-caps;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  color:#6f4e4a;
  font-style: italic;
  padding-left: 30px; 
  padding-top: 30px;
}

.nav_container {
  width: 196px;
  height: 190px;
  position: relative; 
  margin-top: 5px;
  background: rgba(167,192,74,0.4);
  }

.footer {
  position: relative;
  width: 850px;
  margin: -80px auto 0 auto;
  clear: both;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 12px;
  color: #4e3d41;
}
.footer p {
  text-align: right;
}

ul.nav {
  list-style-type: none;
}

a.menuitem {
  text-decoration: none;
  font-variant:small-caps;
  font-size: 24px;
}
a.menuitem:link {color:#6f4e4a;}
a.menuitem:visited {color:#6f4e4a;}
a.menuitem:hover {text-decoration: underline;
}

a.main:link {color:#6f4e4a;}
a.main:visited {color:#4e3d41;}
a.main:hover {color:#FF0000;}
.image-cont {
  width:200px;
  position:relative; 
}
.img-left {
  float: left;
  margin: 10px 10px 10px 0;
}
.img-right {
  float: right; 
  margin: 10px 0 10px 10px;
}
p.main {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 14px;
  color:#4e3d41;
}

p.largemain {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 16px;
  color:#4e3d41;
}

p.caption {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 12px;
  color:#4e3d41;
}

.emphasize {
  color:#FF0000;
  font-weight: bold;
}

Answer №2

For proper background positioning, avoid using the - between values:

background-position: top left;

The reason the image isn't stretching vertically is because you specified absolute positioning. To make the image height relative to the content rather than the parent container, use a percentage for the height.

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

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

Struggling to display a function's output on a separate web page within a flask application

After spending close to 10 hours on this, I find myself stuck. My restaurant search app is functioning perfectly when I print the output to the terminal. However, I can't seem to figure out how to display it on a new page. Here's a snippet of my ...

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

My dilemma involves an HTML5 video where I am utilizing jquery to interact with the player using the code snippet: video.currentTime += 1;. However, when Internet Explorer switches to Flash plugins, my JQ commands cease to function. How can I manage and co ...

Best practices for evenly distributing images within a navigation bar?

Within a horizontal navbar, I have various small images that are currently spaced out with different intervals between them. Each image has its own unique spacing from the others. I am looking to achieve consistent spacing between each image in this horiz ...

Changing the text color of Material UI Accordion Summary upon expansion

How can I update the color of an Accordion summary text in Material UI when it is expanded? <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} className={classes.root}> <AccordionSummary ...

Curved edges achieved without the need for relative positioning

Can anyone help me with a specific code snippet to achieve rounded corners for this page ? Currently, I am using the PIE.htc file which only works when I declare position:relative; throughout the layout, causing disruptions. Is there a code workaround that ...

Keeping the color of CSS buttons consistent can be achieved by setting specific

Here is my CSS code: .horizontalcssmenu ul{ margin: 0; padding: 0; list-style-type: none; list-style:none; } .horizontalcssmenu ul a:active{ color: #00FFFF; background: #FF0033; text-decoration: none; } /* Styles for top leve ...

Angular 4 allows the addition of an image from right to left upon clicking

I've been working on angular 4 and I've successfully implemented the functionality of adding flags. However, the issue is that the flags are currently appearing from left to right. What I'm aiming for is to have the images appear from right ...

jQuery counter no longer updates when scrolling

I'm having trouble with my jQuery counting function when using the scroll feature on a specific div ID. The numbers freeze if I keep scrolling before they finish updating on the screen. Whenever I scroll to the defined div ID, the counting function k ...

Responsive design involves ensuring that web elements such as divs are properly aligned

I am currently working on aligning 2 divs in a specific way that is responsive. I would like the right div to stack on top of the left div when the screen width reaches a certain point, as opposed to them both taking up 50% of the container's width. ...

Ways to display notifications when the user is not actively browsing the website?

How can websites display notifications even when the user is not actively on the site? Take Facebook messenger, for instance. Even with the page closed, notifications still pop up. The same goes for Twitter, which also sends push notifications. I ...

Instructions on creating a non-editable text area where only copying and pasting is allowed

I am looking to simply copy and paste content into a textarea without needing to make any edits within the field. <form action="save.php" method="post"> <h3>Text:</h3> <textarea name="text" rows="4" cols="50"></textarea ...

Navigating a local and server environment with relative paths in a web server's multiple sites

My ASP.NET website is published to a web server with multiple sites, such as www.example.com/SiteA or www.example.com/SiteB. Before publishing, I test the site locally at localhost:12345. When referencing an image path like /Images/exampleImage.gif, it wo ...

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Is there a way to horizontally center an image inside a div, regardless of the size difference between the image and its wrapper? I am aware of a Javascript solution, but I am specifically looking for a CSS-based solution. The following sample code does ...

Match precisely with a specific constituent of the adjacent cell

Is there a way to accomplish this layout using tables? I'm open to suggestions, such as utilizing flexbox, if it's not possible with tables. In a table with two columns, the left column contains text while the right column holds an image and add ...

When you click on the logo, it will automatically redirect you to a designated Bootstrap Tab and set that tab

After searching through numerous posts, I am still struggling to find a solution to my straightforward issue. My requirement is simple: when a user clicks on the brand (logo), it should not only redirect them to a specific tab but also make it appear as a ...

The process of combining a CssStyleCollection with a System.Web.UI.WebControls.Style

I am working with a list item and trying to apply styles using System.Web.UI.WebControls.Style. However, I noticed that there isn't a MergeStyle option similar to what's available for controls. Instead, there is an Attributes.CssStyle property of ...

What are the steps to clipping a canvas using CSS clip-path?

When it comes to clipping a canvas, there are multiple methods that can be used. One way is to create a path with getContext('2d') and set globalCompositeOperation. Another method involves using -webkit-clip-path or clip-path, though the latter m ...

What is the best way to add color to a Table Header?

I'm working on a HTML/CSS table and I want the header row to have a specific background color. Below is my code: <table class="contentTable"> <tr class="contentTableHeader"> <th>No.< ...

The center alignment doesn't seem to function properly on mobile or tablet devices

I've designed a basic webpage layout, but I'm facing an issue with responsiveness on mobile and tablet devices. The problem seems to be related to the width: 100% property in my CSS, but I can't seem to pinpoint the exact solution. While tr ...