Member Avatar for tillaart36

ok i just started some work on css and html and I designed a very basic website layout in Photoshop. In photoshop I made vertical slices so i can repeat these images horizontally for each div. I now want to know how i can add a horizontal slice (a slice containing the whole horizontal bottom pixelrow) that I then can repeat vertically as long as the page content gets...

The horizontal repeating images are gradients and when the page gets longer then this gradient I want the bottom row of all the gradients to repeat in vertically direction.

  • 3 Contributors
  • 4 Replies
  • 193 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by opsryushi

Dani AI

Generated

Good progress so far — already found the simplest visual trick (set the div’s background-color to the gradient’s bottom color and tile the gradient horizontally). That handles the visual “bottom color” but doesn’t solve two things you asked for: 1) make the left and right columns match height regardless of content, and 2) have a horizontal slice repeat vertically below the gradient. correctly pointed out background tiling basics and asked for clarification; here are concise, practical options that fit modern workflows and can be adapted to your existing markup.

Make the columns equal height: drop the floats and let the container become a flexbox so both columns stretch to the same height (no JavaScript needed). Keep your gradient at the top of each column and let the column’s background-color provide the rest of the fill.

/* wrapper becomes a flex container so children match height */
#wrap { display: flex; align-items: stretch; }

/* each column keeps a fixed-gradient height at the top, color fills the rest */
.col {
  flex: 0 0 290px;            /* example width/size control */
  background-color: #84e653;  /* bottom color */
  background-image: linear-gradient(to bottom, #fff, #84e653);
  background-size: 100% 290px; /* gradient height */
  background-repeat: repeat-x;
}

If you need an exact 1px horizontal slice to repeat vertically below the gradient (instead of a flat background-color), stack backgrounds: put the gradient (no vertical repeat) on top and a 1px-high bottom-slice underneath repeated-y. Order matters — the first image is drawn on top.

.col {
  background-image: url('gradient-top.png'), url('bottom-slice.png');
  background-repeat: no-repeat, repeat-y;
  background-position: top left, left top;
  background-color: #84e653;
}

Notes and fallbacks: CSS3 multiple backgrounds and flexbox are supported in modern browsers; for very old browsers use display:table-cell or a JavaScript height-sync as fallback, or the classic “faux columns” wrapper background (a single tall image repeated-y). Test with different viewport heights and remove floats/clears inside #wrap when switching to flexbox.

Recommended Answers

All 4 Replies

Member Avatar for mexabet

To repeat a background image horizontally, your CSS style should look like this:

<style type="text/css">
<!--
#der {
	background: url(your_image_name.gif) repeat-x;
}
-->
</style>

and on the BODY of your HTML page where you want to place the DIV tag should be like the code below:

<div id="der">Content for  id "der" Goes Here</div>

To repeat a background image vertically, your CSS style should look like this:

<style type="text/css">
<!--
#der {
	background: url(your_image_name.gif) repeat-y;
}
-->
</style>

and on the BODY of your HTML page where you want to place the DIV tag should be like the code below:

<div id="der">Content for  id "der" Goes Here</div>

If you want to repeat a background image both horizontally and vertically, your CSS style should look like this:

<style type="text/css">
<!--
#der {
	background: url(your_image_name.gif) repeat;
}
-->
</style>

and on the BODY of your HTML page where you want to place the DIV tag should be like the code below:

<div id="der">Content for  id "der" Goes Here</div>

As you can see, the difference in these styles can only be noticed in the CSS files. Horizontal repeating shows as: repeat-x;, vertical repeating shows as: repeat-y; and repeating both ways shows simply as: repeat;

Member Avatar for tillaart36

Thanks for your reply, but these things I allready knew so probably my explanation wasn't clear enough.

I use gradients that change color from top to bottom (too some height after that the gradient will stay one color untill the bottom of the page...) I allready found out something more about my problem. What i do now is set a color for a div (which is the bottom color of my gradient) and a gradient as background image that repeat's in x. What happens when a page extends the dimensions of the gradient image it takes on the color of the bottom of the gradient (exactly what i was looking for).

Here's my code:

CSS:

body, 
html {
	margin: 0;
	padding: 0;
	color:#000;
}

body {
	min-width: 1000px;
	background-color: #84e653;
	background-image: url(images/float_left_bg.gif);
	background-repeat: repeat-x;
}

#wrap {
	background-image: url(images/float_left_bg.gif);
	background-repeat: repeat-x;
	width: 920px;
	margin: 0 auto;
}

#header {
	background-image: url(images/header_bg.gif);
	float: left;
	width: 590px;
	height: 290px;
} 

#nav {
	background-image:url(images/navigation_bg.gif);
	float: right;
	width: 290px;
	height: 290px;
}
#navfloatleft {
	margin-top: 60px;
	float: left;
	margin-left: 40px;
	color: #E33A6A;
}

#navfloatright {
	margin-top: 60px;
	float: right;
	margin-right: 40px;
	color: #E33A6A;
}

#main {
	background-color: #84e653;
	background-image: url(images/content_bg.gif);
	background-repeat: repeat-x;
	float: left;
	width: 590px;
}

#sidebar {
	background-color: c8ff78;
	background-image: url(images/news_bg.gif);
	background-repeat: repeat-x;
	float: right;
	width: 290px;
	min-height: 1200px;
}

#footer {
	background-image: url(images/footer_bg.gif);
	position: static;
	height: 80px;
	clear: both;
}

And some basic html to test when i make some basic html to test it, it almost works fine:

http://img223.imageshack.us/my.php?image=testjh3.jpg

Now how can i get the columns for the main content and my sidebar to both get the same length undependent of the amount of text in them? I've tried to look for the faux columns technique but I dont think this works because of the gradient backgrounds...Maybe I can specify 2 background images (the gradient untill some y-value and the colour of the bottom of the gradient from that y-value on untill the bottom of the browser or something...)

PS. Probably there are a lot of mistakes in my css...you can point them out but for now im mostly interested in solving the equal column length problem...

Thanks so far!

Member Avatar for mexabet

Since I don't see your HTML file, I can only guess. Define the height of the main content DIV and every other thing inside it will fit in.

Member Avatar for opsryushi

It would help if we were able to better understand what, precisely, you are trying to do. I'm afraid I can't understand...

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.