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

Let's discuss how to include the scrollTop option

I am new to coding and I need help adding a scrollTop margin of +100px to my code. The page already has some top margin but I can't seem to locate it. I'm also having trouble finding where the margin-top is being set in the JavaScript file. /*** ...

Is there a way to ensure that the div is displayed on the same line?

Check out the jsfiddle link provided: http://jsfiddle.net/HE7yT/ I'm trying to align the Image, content, and Amount in the same line. How can I achieve this? The goal is to have "150" displayed on the same line as the picture. var HTML = $(' ...

Creating a Thrilling Triple Image Transformation on Hover using Material-UI

Here is a Codepen showcasing a triple hover effect on an image: Codepen I attempted to recreate this effect as a styled component in React Typescript using MUI and MUI Image, but encountered an error with my styling that is preventing it from working in m ...

Insert a new item into an existing list using jQuery

I am looking to enhance user experience by allowing them to easily add multiple sets of inputs with just one click. I have been experimenting with jQuery in order to dynamically insert a new row of input fields after the initial set. My current approach i ...

"Enjoying a table header that scrolls freely with autoscroll feature

Resolved - http://jsfiddle.net/CrSpu/11704/ I'm facing an issue with a table that has autoscroll functionality. I am looking to freeze the header of the table when automatic scrolling occurs, or you can test it out using my code pen. I'm uncer ...

Ensure to validate the character length prior to saving data using an ajax request

When I try to save data using ajax/jquery, the character length pattern check does not work as expected. The form tag includes: pattern=".{6,}" oninvalid="this.setCustomValidity('Password must be at least 6 characters')" Below is the form and a ...

Is there a way to adjust the background hues of a React component when a click event is triggered?

Currently, I have 3 React components that each consist of a div element. When I click on one component, I want to change its background color to black. If I then select another component, the previously selected component should return to its normal back ...

Analyzing comma-separated values file and transforming the information into a modifiable format

Need advice on parsing CSV and using foreach loop.. <?php //output Array ( [0] => Array ( [company] => A Company [address] => A Address [telephone] => A Telephone ) [1] => Array ( ...

The results of the query are not showing up on the website

I am encountering an issue with a query/output that is not functioning as expected. Despite ensuring the accuracy of all column table names, no errors are being thrown by PHP error checking. Below is the code segment that is failing to produce any output: ...

Creating a scrollable table with CSS: A step-by-step guide

My table has too many columns causing it to exceed the width of the screen. I would like to make it scrollable horizontally for a neater and more organized appearance. I believe CSS with the overflow hidden property can achieve this, but I am unsure where ...

How can I center one middle position for my inputs and have the span align to the left?

How can I center my input fields with all the spans aligned to the left? I would like the inputs to be centered on the page, with supporting spans aligned to the left or right of the input lane. I am utilizing some Bootstrap 4 classes for this layout. C ...

How can nunjucks templates be accessed from NPM (node modules)?

Is there a solution to make nunjucks imports/includes resolve from the NPM node_modules directory? Let's say we have installed a package as follows: npm i -S @example/cards Now, we need to import from it in a template like this: {% import "@exampl ...

"Placing drop-down animations in just the right spot

I'm currently working on adjusting the dropdown behavior for thumbnails when hovering over them. I want the drop-down to appear beneath the 'Caption Title' instead of above the image, but so far my CSS adjustments haven't been successfu ...

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

Is there a way to dynamically change CSS property values based on user interaction, such as toggling between dark mode and light mode? I am currently exploring the option of setting up a subscription to track these changes, but I want to know how I can act ...

Creating a table with a static first column and vertical text positioned to the left of the fixed column

To create a table with the first column fixed, refer to this fiddle link: http://jsfiddle.net/Yw679/6/. You also need a vertical text to be positioned to the left of the fixed column in a way that it remains fixed like the first column. The disparities be ...

Newbie's Dilemma: Issues with Html, Email, and Distribution Lists

I am looking to add a new feature to my website where users can enter their email address to receive a free promotion and be added to an announcement list. Since I don't have any experience with web programming, I'm not sure where to start. Would ...

What could be causing spacing problems with fontawesome stars in Vue/Nuxt applications?

Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...

Difficulty in implementing a radio button selection form using Django and Bootstrap styles

Currently, I am facing an issue while trying to develop a form with radio button choices using Django. The website is based on Bootstrap 4 theme and encountering a problem where the buttons disappear upon applying the custom-control-input class. I initial ...

Problem with aligning divs in Bootstrap

I am currently facing a challenge when it comes to aligning my div in Bootstrap 3. My goal is to achieve the following: I have experimented with pull and push commands, but it seems like I still need more practice. Code: <div class="container"> ...

Displaying a value in a React component using material-ui's TextField

Can anyone help me with printing the email a user enters into the textfield within the Dialog when a button is clicked? I have been struggling to achieve this due to my function's structure. Any guidance would be greatly appreciated. export default fu ...