738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

This is probably very simple, I just haven’t coded in a while and forgot some fundamentals. Is there a way to have the background image repeating the entire width of a monitor, while having the content section maintain liquid height?

155 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Canada
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
Warll says

You mean like repeat-x?

738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

Yes but the content section is simply #FFF throughout, and if the content section is longer than the BG image it will have undesirable effects on the design; IE the footer would look messed up.

155 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Canada
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
Warll says

Isn’t the content ‘wraped’ in the BG div? ie the content div should be inside the BG div.

Or you could just apply the BG to the body or html tag.

738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

I want this template to be flexible, so if they end up putting more content in this section than it was made for, it will not hurt the design.

If I simply use a 1xHeight image for the BG it would not work right if they add more content.

155 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Canada
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
Warll says

You want the background, an image, to scale height wise?

If this is a gradient you could use javascript to generate the gradient.

738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

Persay, yes, but it doesn’t have to be one image if the solution requires more.

Only a portion of it is a gradient, and I’d rather not use javascript for something like this.

155 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Canada
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
Warll says

Could you post an example of what you want to repeat?

738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

Look at the image above, the actual design itself is irrelevant… The header is a design, and the footer is a design. I want both of these to repeat-x for the width of the page, but they are going to need to be separate images. Would using 2 background images (not sure how, but know you can) do what I need? I’m really getting the feeling this is something simple.

155 posts
  • Has been part of the Envato Community for over 4 years
  • Located in Canada
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
Warll says

You can have two background images if you have two nested divs, but I have a suspision that you don’t need that.

Are you sure you can’t jsut split the ‘special’ portion of the image from the solid color and use a background color.

PS: I am having troubles understanding whats your trying to say. An image of the actual problem image would help greatly.

by
by
by
by
by
by