Overclock.net banner

1 - 8 of 8 Posts

·
In a van...DOWNBYTHERIVER
Joined
·
3,589 Posts
Discussion Starter · #1 ·
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?

 

·
Premium Member
Joined
·
8,951 Posts
background-image: url('whatever.jpg');
background-repeat: repeat-x;

There's the CSS code for it. You can also use repeat-y, depending on what image you're using. When used in a div (for example), no matter how big or small it is, the background image won't shrink or expand, but will stay its original size while tiling.
 

·
Banned
Joined
·
1,453 Posts
Quote:


Originally Posted by ImmortalKenny
View Post

background-image: url('whatever.jpg');
background-repeat: repeat-x;

There's the CSS code for it. You can also use repeat-y, depending on what image you're using. When used in a div (for example), no matter how big or small it is, the background image won't shrink or expand, but will stay its original size while tiling.


Code:
Code:
That should do it.
 

·
In a van...DOWNBYTHERIVER
Joined
·
3,589 Posts
Discussion Starter · #4 ·
No no no no, the footer is also a design that needs to be repeated along the x axis. But I also want the content area to be liquid height-wise.
 

·
Registered
Joined
·
152 Posts
Split them into divs. One for header, one for the content, one for the footer.

Do what immortal and godsgift said for the image repeat in the header/footer, then set height of the content to auto. That should give you pretty much what you're looking for, then just play around with margins and padding to space the divs out
 
1 - 8 of 8 Posts
Top