need fluid page w/tiled image background (newb)

[brynn]

Hi Friends,I've recently started studying CSS, have completed all of Basic, Styling, and Box Model tutorials, and some of the Advanced ones. And I've successfully made a simple webpage. But I'm having some trouble with the background. At first, I wanted to put a graphic pattern around the whole page as a border (think of an empty picture frame with a design on it). But since that would require an image of a fixed size, I didn't think it would work, keeping in mind all the different screen sizes and resolutions. So I made a border just for the left side, so that the page could do whatever it needs on the right side. Then it could be seen relatively the same on all kinds of screens which my site visitors might have. (I'm only thinking of computer screens, at the moment, and I'll decide what to do about smart phones and tablets later.) But then, I found an approx 1.5 inch square image that I wanted to use for a tiled background, which would fill the entire background, and the border pattern would still be on the left. But as it turns out, it looks like you can't have 2 background images.....either that, or I haven't discovered how to do it. If it can be done, can someone please tell me how? I did try putting the left side border on the page, just as regular image in the body. But since I'll have a lot of pages, it really would not be feasible to make multiple images of all different lengths, for individual pages. Since the pattern border is a repeating design, I thought I had come up with a solution. I took just 1 unit of the pattern, and cropped the background image to the same height. Then I tiled out 1 row of the background, and put the single unit of the design on the left side. So now in the background declaration, I have the new image which goes the full width of the page, and tiles vertically. I was so excited to have figured out putting the 2 images together, I didn't realize that I was back to having the same fixed width problem. For the most part, I still think the page will look ok on most computer screens, and indeed, I may have to leave it at that. But if I make the window smaller, I have a problem where the content (mostly text) overlaps the border image. And as far as I can tell, it's the fixed width image that's causing that. I've attached a small screenshot showing it. So I'm hoping someone can tell me if there's any way to accomplish what I want. It seems to me there should be a way. (I did see the tutorial for Image Sprites, but I don't see how that could help with my problem....although I didn't understand it entirely.) Thank you very much PS -- One more question which is somewhat related. There seems to be a 5 to 10 px white border around my entire page (whether maximized or smaller) (I'd say 8 px). I've never seen such a border on any other webpages, so I'm wondering what I need to do to get rid of that. Thanks again Edit -- added "tiled" to title

Edited June 18, 2013 by brynn

[brynn]

Really? No?? Surely there must be some way to make a page like attached, so that the text doesn't shift to cover the image )when the window is resized, and that still looks relatively, generally, the same on most computer screens? (forgetting about phone and tablet sceens for the moment)

[dsonesuk]

Take the border (just the border) design, and make it with transparent background, add the grey diagonal background to the the body, create outer container that will contain all child element content within it, and fill the and add border image to this, and repeat it down the page, i should have thought you would have more control over this, than using embeded border on to background as you do now.i don't think the use of css3 multiple background images will work here, as you need to repeat both background images in the y direction. white spacing is caused by default margin and padding on body element, zero this out. body {margin:0; padding:0;}

[brynn]

Ok, thank you so much! I will try it. But I'm not clear what are "child elements".

create outer container that will contain all child element content within it, and fill the and add border image to this, and repeat it down the page

Also, I want to make sure about "....and fill the and add border image to this....". Likely it's just typing error, but I just want to make sure there's not a missing word (fill the ?). I haven't actually looked at CSS3 yet, since I've just started learning CSS. But I'll be interested to look up the multiple background images, even if I can't use it here. Default margin and padding on body element? Do you mean that there is a default margin and padding that is automatically applied to CSS webpages, or HTML webpages, even though my code contains no margin or padding in the body element? Thanks again Edited June 19, 2013 by brynn

[dsonesuk]

Depending on if you want fluid border image use the img tag, with background image as the border width becomes smaller, because the background image does not adjust with the width (unless you use css3 background width feature, which unfortunately won't work in all browser versions) you will find the background image being overlapped by the shrinking edge of #inner_bg img.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">*{margin:0; padding:0;}p {margin: 0.9em 0;}body, html{padding:0; margin:0; height:100%; background:url(../images/bgimage.jpg); }#inner_bg {position:absolute; /*background:url(../images/10pat.jpg) repeat 0 0;*/ left:0px; top:0; bottom:0; width:5%; height: 100%; /*required for IE7 */}#inner_bg img { height: 100%; width:100%;}#wrapper {width:75%; margin:0 auto; position:relative; background-color:#FFF;}#header, #content {width:95%; margin-left: 5%;}#header {height: 200px; background-color:#CCFF66;}#content {min-height: 800px; background-color:#FFCC99; overflow:hidden; }#article {margin: 0 12px;}</style></head><body><div id="wrapper"><div id="inner_bg"><img src="../images/10pat.jpg" alt=""  /></div><div id="header"></div><div id="content"><div id="article">  <p>Motivating participants and capturing their expectations, the components    and priorities for the change program working through a top-down, bottom-up    approach. The three cs - customers, competition and change - have created    a new world for business quantitative analysis of all the key ratios has    a vital role to play in this through the adoption of a proactive stance,    the astute manager can adopt a position at the vanguard. Highly motivated    participants contributing to a valued-added outcome. Whether the organization's    core competences are fully in line, given market realities the new golden    rule gives enormous power to those individuals and units, taking full cognizance    of organizational learning parameters and principles.</p>  <p>The three cs - customers, competition and change - have created a new world    for business that will indubitably lay the firm foundations for any leading    company as knowledge is fragmented into specialities. From binary cause and    effect to complex patterns, presentation of the process flow should culminate    in idea generation, defensive reasoning, the doom loop and doom zoom. Through    the adoption of a proactive stance, the astute manager can adopt a position    at the vanguard. Taking full cognizance of organizational learning parameters    and principles, combined with optimal use of human resources, whether the    organization's core competences are fully in line, given market realities.    Motivating participants and capturing their expectations, an important ingredient    of business process reengineering in order to build a shared view of what    can be improved.</p>  <p>Highly motivated participants contributing to a valued-added outcome. Taking    full cognizance of organizational learning parameters and principles, the    balanced scorecard, like the executive dashboard, is an essential tool measure    the process, not the people. To ensure that non-operating cash outflows are    assessed.</p>  <p>Exploiting the productive lifecycle exploitation of core competencies as    an essential enabler, the vitality of conceptual synergies is of supreme    importance. That will indubitably lay the firm foundations for any leading    company organizations capable of double-loop learning, maximization of shareholder    wealth through separation of ownership from management. Presentation of the    process flow should culminate in idea generation, motivating participants    and capturing their expectations, exploiting the productive lifecycle. Whenever    single-loop learning strategies go wrong, the components and priorities for    the change program building a dynamic relationship between the main players.</p>  <p>While those at the coal face don't have sufficient view of the overall goals.    Defensive reasoning, the doom loop and doom zoom motivating participants    and capturing their expectations, the new golden rule gives enormous power    to those individuals and units. Exploiting the productive lifecycle taking    full cognizance of organizational learning parameters and principles, to    ensure that non-operating cash outflows are assessed. Working through a top-down,    bottom-up approach, defensive reasoning, the doom loop and doom zoom the    balanced scorecard, like the executive dashboard, is an essential tool.</p>  <p>As knowledge is fragmented into specialities quantitative analysis of all    the key ratios has a vital role to play in this to ensure that non-operating    cash outflows are assessed. Big is no longer impregnable in a collaborative,    forward-thinking venture brought together through the merging of like minds.    Exploiting the productive lifecycle by moving executive focus from lag financial    indicators to more actionable lead indicators, maximization of shareholder    wealth through separation of ownership from management. The new golden rule    gives enormous power to those individuals and units, whether the organization's    core competences are fully in line, given market realities organizations    capable of double-loop learning. Working through a top-down, bottom-up approach,    by moving executive focus from lag financial indicators to more actionable    lead indicators, the vitality of conceptual synergies is of supreme importance.</p></div></div></div></body></html>

All browsers have predefined margins, and padding for body, and also p, h1 to h6 to name a few, that why its a good idea to zero all margins and padding with universal selector *

*{margin:0; padding:0;}

and reset them so they are all the same (mostly) in all browsers, example the paragraph

p {margin: 0.9em 0;}

[dsonesuk]

Alternative

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">*{margin:0; padding:0;}p {margin: 0.9em 0;}body, html{padding:0; margin:0; height:100%; background:url(../images/bgimage.jpg); min-width:480px; }#wrapper { position: relative;min-height:100%;}#left_bg{ width:12.5%; position:absolute; }#left_bg{ left:0; background:url(../images/10pat.jpg) repeat-y center 0; background-size:75px auto; top:0; bottom: 0;}#inner_wrapper {width:75%; margin:0 auto; position:relative; background-color:#FFF;}#header {height: 200px; background-color:#CCFF66;}#content {min-height: 800px; background-color:#FFCC99; overflow:hidden; }#article {margin: 0 12px;}</style></head><body><div id="wrapper"><div id="left_bg"></div><div id="inner_wrapper"><div id="header"></div><div id="content"><div id="article">  <p>Motivating participants and capturing their expectations, the components    and priorities for the change program working through a top-down, bottom-up    approach. The three cs - customers, competition and change - have created    a new world for business quantitative analysis of all the key ratios has    a vital role to play in this through the adoption of a proactive stance,    the astute manager can adopt a position at the vanguard. Highly motivated    participants contributing to a valued-added outcome. Whether the organization's    core competences are fully in line, given market realities the new golden    rule gives enormous power to those individuals and units, taking full cognizance    of organizational learning parameters and principles.</p>  <p>The three cs - customers, competition and change - have created a new world    for business that will indubitably lay the firm foundations for any leading    company as knowledge is fragmented into specialities. From binary cause and    effect to complex patterns, presentation of the process flow should culminate    in idea generation, defensive reasoning, the doom loop and doom zoom. Through    the adoption of a proactive stance, the astute manager can adopt a position    at the vanguard. Taking full cognizance of organizational learning parameters    and principles, combined with optimal use of human resources, whether the    organization's core competences are fully in line, given market realities.    Motivating participants and capturing their expectations, an important ingredient    of business process reengineering in order to build a shared view of what    can be improved.</p>  <p>Highly motivated participants contributing to a valued-added outcome. Taking    full cognizance of organizational learning parameters and principles, the    balanced scorecard, like the executive dashboard, is an essential tool measure    the process, not the people. To ensure that non-operating cash outflows are    assessed.</p>  <p>Exploiting the productive lifecycle exploitation of core competencies as    an essential enabler, the vitality of conceptual synergies is of supreme    importance. That will indubitably lay the firm foundations for any leading    company organizations capable of double-loop learning, maximization of shareholder    wealth through separation of ownership from management. Presentation of the    process flow should culminate in idea generation, motivating participants    and capturing their expectations, exploiting the productive lifecycle. Whenever    single-loop learning strategies go wrong, the components and priorities for    the change program building a dynamic relationship between the main players.</p>  <p>While those at the coal face don't have sufficient view of the overall goals.    Defensive reasoning, the doom loop and doom zoom motivating participants    and capturing their expectations, the new golden rule gives enormous power    to those individuals and units. Exploiting the productive lifecycle taking    full cognizance of organizational learning parameters and principles, to    ensure that non-operating cash outflows are assessed. Working through a top-down,    bottom-up approach, defensive reasoning, the doom loop and doom zoom the    balanced scorecard, like the executive dashboard, is an essential tool.</p>  <p>As knowledge is fragmented into specialities quantitative analysis of all    the key ratios has a vital role to play in this to ensure that non-operating    cash outflows are assessed. Big is no longer impregnable in a collaborative,    forward-thinking venture brought together through the merging of like minds.    Exploiting the productive lifecycle by moving executive focus from lag financial    indicators to more actionable lead indicators, maximization of shareholder    wealth through separation of ownership from management. The new golden rule    gives enormous power to those individuals and units, whether the organization's    core competences are fully in line, given market realities organizations    capable of double-loop learning. Working through a top-down, bottom-up approach,    by moving executive focus from lag financial indicators to more actionable    lead indicators, the vitality of conceptual synergies is of supreme importance.</p></div></div></div></div></body></html>

[brynn]

Thank you dsonesuk I'm still struggling with your 1st set of code, and trying to reconcile that you mean the same thing in post #5 that you said in post #3. When you said

Take the border (just the border) design, and make it with transparent background

and then

and add border image to this, and repeat it down the page,

I thought you meant just 1 unit of the pattern. But when I put 1 unit of the pattern image into your 1st set of code, it stretches the 1 unit all the way down the page. There is no repetition. But part of the problem is that I don't understand this:

{position:absolute; /*background:url(../images/10pat.jpg) repeat 0 0;*/ left:0px; top:0; bottom:0; width:5%; height: 100%; /*required for IE7 */}

I thought that text between these /* text */ were helpful comments that don't show up on the actual page. But that's the only place where anything about repeating is mentioned. So before I go to the rest of your first example, and then on to the 2nd example, I need to understand about whether the image represented in your code with "../images/10pat.jpg" is supposed to be 1 unit of the pattern, or a whole string of units. Because if it's supposed to be a whole string of units, it seems to me I'm back to the same problem I had in the beginning -- not wanting to have to make many different lengths of borders, for different lengths of many articles. So my question is how to make the image in the inner_bg div id repeat itself. Also, I should say that I really appreciate you making a whole page of code for me. (2 whole pages) While some people, I suppose, might just take it and use it, I prefer to understand it before I use it, because that makes it so much MORE useful, since I could build on it, if I wanted. So that's why I'm asking detailed questions instead of just using it. Thanks again

[brynn]

FYI though, the 2nd version, when I just insert my single unit image, works great, and actually looks more like I wanted. I haven't put in the denim pattern yet, but that part worked ok on the 1st version. I'll keep studying them EditThere IS still some shifting when the page is resized, with the 2nd version, but you have to make it so narrow to cause an overlap, that I don't know any reason why anyone would be trying to read the page that narrow. Still studying

Edited June 20, 2013 by brynn

[dsonesuk]

This/*background:url(../images/10pat.jpg) repeat 0 0;*/was used so no background image was used, just the img tag versionBut! with the removal of img tag completely, and then remove comment tags so you havebackground:url(../images/10pat.jpg) repeat 0 0;would give you the background image version.

[brynn]

This/*background:url(../images/10pat.jpg) repeat 0 0;*/ was used so no background image was used, just the img tag version But! with the removal of img tag completely, and then remove comment tags so you havebackground:url(../images/10pat.jpg) repeat 0 0; would give you the background image version.

Ooooohh, ok, I understand now. Hey, good news! I have a successful page, that nothing shifts when the window is resized, and, as far as I can tell, will look relatively the same on most computer screens!! And I actually understand most of it. I'm a little fuzzy on using absolute position and relative position, but I think I have the general idea. Thank you so VERY much for your help