Utilizing CSS to create a repeating background image within a specified container

I'm currently working on setting up a container with a background image that repeats only when the contained div elements are long enough. However, I seem to be encountering issues getting the image to repeat properly within the #container code.

This is the current HTML structure:

<body>
  <div id=container>
    <div id=textblock>
      <div id=maintext>
        <p>text here</p>
      </div>
    </div>
  </div>
</body>

Below is the CSS being used:

body {
    background-color: #888;
    background-position: top;
    height:100%;
    margin:0;
    padding:0;
}

#container {
    background-position: relative;
    width: 960px;
    min-height: 720px;
    margin-left: auto;
    margin-right: auto;
    font-family: Antelope H;
    font-size: 1.5em;
    color: #c60;
    background:url(images/containerback-01.png) repeat-y;
    background-color: #fc6;
}

If you'd like to view the site as it currently stands, click here.

csscontainers

Answer №1

When it comes to styling containers, it's important to consider clearfix. Container elements often only recognize the height of non-floated children elements. To address this, you can include this in your css file:

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden;   
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

Also, make sure to update your container div to include 

<div id="container" class="clearfix">

Answer №2

This is actually unrelated to CSS concerns.

To resolve the issue, simply add a 

<br clear="all" />

right after your 

<div id="mainText"></div>

Whenever floats are used, remember to include a clear statement.

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

Group in group, glitch in outdated browser

Facing an issue with IE6 while writing HTML/CSS code. I am looking to create dynamic divs using classes: Here is a simple example (not real-project code): .top {width: 50px;} .top.selected {background: #f00;} .mid {width: 114px;} .mid.selected {backgrou ...

htmlcssclassinternet-explorer-6

Utilizing Unicode characters within the content of a pseudo element in data-content

Is there a way to include unicode in the data-content attribute using JQuery for pseudo element content? I'm having trouble with the correct formatting. How can I properly display unicode characters? Currently, all I see is &#x25BC;. a::after { ...

jquerycssunicodepseudo-element

Wrapping text around an image using two distinct Angular components

Can text wrap around an image in Angular even if they are in separate components? Or do the text and image have to be within the same component for this to work, regardless of whether the image is on the left or right side? https://i.stack.imgur.com/hdlxD ...

cssangular

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...

javascriptjqueryhtmlcss

Issues with CSS overlays arise when attempting to display a welcome page on top of a flash component

Can anyone help with fixing the issue of my overlay being hidden behind the flash element? The blue bar with the 'Continue' button still shows up on top. I need some CSS changes to make sure that the overlay appears above everything else below it ...

htmlcssflashiframe

html and css code to create a linebreak ↵

I received a JSON response from the server, and within this data is a "return line" in the text. {text: "I appear in the first line ↵ and I appear in the second line"} However, when I try to display this on an HTML page, the "return line" does not show ...

javascripthtmlcss

At a specific media query breakpoint, links are disabled while the rest continue to function without any

Today I encountered a puzzling issue on my website with a responsive layout that utilizes @media queries and breakpoints. At one specific breakpoint (or resolution, as I am still learning the terminology), the links in the navigation bar are inexplicably d ...

htmlcssresponsive-designmedia-queries

What is the best way to divide the height of one div evenly among three other divs?

I have three child divs inside a parent div and I'm looking to distribute the height of the parent div evenly among the three children. Here is the HTML code: <div class="frameright"> <div class="divright"> <t ...

htmlcss

Creating an Angular Universal Dockerfile and docker-compose.yml file: A step-by-step guide

After struggling to Dockerize my Angular universal app and integrate it with an existing dockerized Spring Boot REST backend, I found myself hitting a wall in terms of available resources and assistance online. Despite making various adjustments, the Docke ...

angulardockerdockerfilecontainersangular-universal

A guide on dynamically accessing an image from the src directory using props in a Vite + React application

export default function Card(props) { return ( <card> <img className={cardCss.card__img} src={`../assets/imgs/card/${props.img}`} alt="" /> <div className={cardCss.card__stats}> ...

cssreactjsreact-propsdynamic-importvite-reactjs

Storing the background color in a JavaScript variable

I've been experimenting with creating a fade in and out effect for a background image on a website. I've also been attempting to capture the background color of a div and store it in a variable. Here's what I have tried: elem = document.ge ...

javascripthtmlcss

What is the best way to add a media query to a <style> element?

I have implemented Skrollr for my Parallax animations, allowing me to use Parallax keyframes without writing them inline. To make the plugin utilize external stylesheets for the keyframes, it uses AJAX to locate the stylesheets imported via <link>. ...

jquerycssajaximportcss-animations

Utilizing conditional statements and time to dynamically alter the class of an object

I need to change the class of an object based on the time, with two classes available: recommendedspot and notrecommended. The code I've written so far is not displaying the image correctly. Can someone help me troubleshoot this issue? Here is my cur ...

javascripthtmlcssdatetimeif-statement

Adjust the color of error messages in shiny from red

Currently, I am in the process of developing a Shiny app that includes numerous plots. Whenever I adjust any input parameters, there is a brief moment where the plots do not display before they are rendered, accompanied by a prominently displayed red error ...

cssrshiny

Avoid stretching the div to the edge of the screen

In the table on my page, I have implemented a feature using CSS to display additional information in a popup div. This works well when there is limited text, but if there is extensive text in the table, it extends beyond the screen width and becomes diffic ...

htmlcss

`JQuery fadeOut seems to have a limitation where it only applies to the

I have a group of divs, each containing an anchor tag that triggers a JavaScript function (which uses AJAX to delete a row from a table). Here's an example setup: <div id="container"> <div><a id="btn" onclick="deleteRow()">Delet ...

javascriptjqueryhtmlcssajax

Is there a way to dynamically alter the heading color in Shopify liquid code?

After utilizing ChatGPT to review the code, I am uncertain if it is related to the color schemes. I am unsure of what I may be missing or doing incorrectly. While I can successfully alter the heading text, I am unable to change the color. Below is the code ...

htmlcssjsonshopifyliquid

Sloped Divider on the Upper Edge of the Page

I'm currently in the process of developing a new website, and I'm looking to create a unique design for the main navigation bar on the homepage. Here is the ideal layout that I have in mind: https://i.stack.imgur.com/pc8z4.png While I understan ...

javascripthtmlcss

Is there a way to attach numerical values to CSS in order to generate a timeline effect?

My goal is to arrange div elements on a timeline based on an array of floats ranging from 0 to 1. The idea is to have the elements positioned along the timeline according to these float values, with 0 representing the beginning and 1 indicating the end. ...

htmlcssangular

CSS menu LI with horizontal spacing

I'm currently working on aligning the boxes for each <li> tag next to each other without any spaces in between. However, at the moment, there is a significant gap separating each box. How can I eliminate this space? Here is the HTML code snippe ...

csshtml-listsspacing