none
Background outside of the main content RRS feed

  • Question

  • I am preparing to create a site using EW. The container for the content on the site will be 975 pixels wide. I want to use a photo or graphic in the area that is outside of the 975 pixel container (to the left and right of the main content). Are there any tutorials or guides that explain how to do this? I don't know what it is called so I can't search for it, .  Thanks
    Tuesday, July 16, 2013 2:43 PM

All replies

  • http://www.w3schools.com/cssref/pr_background-image.asp

    This and the associated information on their site should answer your question. Hope that helps.

    Jim


    'Tis the business of little minds to shrink; but he whose heart is firm, and whose conscience approves his conduct, will pursue his principles unto death. Thomas Paine

    Tuesday, July 16, 2013 4:48 PM
  • There are a number of properties that control the background, and how it is displayed. A more complete reference to these properties may be found here: http://www.w3schools.com/css/css_background.asp

    Note, in particular, the background-repeat and background-position properties, which determine whether the image tiles, either vertically, horizontally, both, or not at all, and where the image appears relative to the content. Background-attachment is used less frequently, and determines whether the background scrolls or is fixed when the page is scrolled.

    If your intent is to use a texture or something that tiles seamlessly, then it is sufficient to specify just the image in the background-image property, since the default is to repeat both vertically and horizontally.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Tuesday, July 16, 2013 8:53 PM
  • OK thanks for the info. I'll that a try.
    Thursday, July 18, 2013 2:02 PM
  • If you are still having difficulty, I think it is because of terminology.

    What you are referring to is the 'body background'. That is the area outside your website, the part that fills the rest of your browser screen. The container or wrapper background refers to areas within your website (within your 975px).

    The link given above is appropriate and goes through the basics of applying the background. You just have to make certain of your positioning of the code. Put your background code right after the body tag at the very top. And then put your website background within your wrapper or container tag. Remember, if you don't put the website background in, your body background will be the only background that shows up. If that happens, it's not that you did it wrong, you just didn't finish the job. :)

    Please don't be insulted if I oversimplified the process. But being relatively new to web design, I went through these same frustrations myself and they are fresh in my mind. Most of it was simply because I did not fully understand the terms that were being thrown around .  So now, I try to break it down to the very basics.

    Thursday, July 18, 2013 5:45 PM
  • What you are referring to is the 'body background'. That is the area outside your website,

    That is misleading. The "website" is everything which falls between the opening and closing <html> tags, including the body element. The body element takes up the entire width, but not height, of the browser viewport. (Although not advised, content may be placed outside the body, but within the <html> element, and it will, in fact, display.)  Most developers then create a container within the body which is meant to hold the main content of the site.

    Interestingly, if you apply a background image to the body, but then use box properties to restrict its size, the background continues to be displayed throughout the viewport, as if it had been applied to the viewport (which is not accessible as an HTML element). For example, paste this code into EW and preview it:

    <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <style type="text/css">
    body {
    	background-image:url('images/asphalt-background-3.jpg');
    	width:500px;
    	border:3px white solid;
    	margin:0 auto;
    }
    div {
    	width:500px;
    	background-color:white;
    }
    </style>
    </head>
    <body>
    <div>
    <p>Now is the time for all good men to come to the aid of their party.</p>
    <p>Now is the time for all good men to come to the aid of their party.</p>
    <p>Now is the time for all good men to come to the aid of their party.</p>
    <p>Now is the time for all good men to come to the aid of their party.</p>
    <p>Now is the time for all good men to come to the aid of their party.</p>
    </div>
    </body>
    <p style="color:white;font-weight:bold;">Now is the time for all good men to come to the aid of their party.</p>
    </html>
    

    You can use whatever seamlessly tileable background image you have in place of asphalt-background-3.jpg. The point is that although the body is only 500px wide, the background assigned to it fills the entire viewport, and its border extends to include the content outside the body, but within the html element (which does not validate, of course ;-).

    In essence, the body is the website, and is not outside the website. Even though it may be restricted using box properties, they do not necessarily behave as you might expect them to behave. And in any event, this is incorrect...

    Put your background code right after the body tag at the very top.

    No, do not do this. Properties meant to be common throughout the site should be declared in an external style sheet, referenced in the <head> of each page. This allows these properties to be changed throughout the site by changing one property in one location, rather than having to visit each <body> declaration in every page in the site.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Friday, July 19, 2013 1:16 AM
  • @ paladyn

    First of all, I do not dispute most of what you say, however, I did want to clarify a few points you made or implied:

    1. I do not advocate using inline or internal styles.  It did not even occur to me that the individual would be using anything but an external style sheet. As I did not mention anything about where to style (it was not part of the original question) I am uncertain why you would make such an assumption.  Reviewing my post, I can only think it may have been my use of the term 'tag' when referring to the 'body'. My bad. I admit it. I suppose I could have used another term, but the only other term that came to mind is 'style name' and and 'put the background code right after the body style name' seemed too cumbersome in this instance - although it would have been more correct. Having admitted that, I will also say that I found it amusing that you would illustrate your example using internal styling.  :)

    2. To clarify my answer, on an external style sheet, use the following format:

    /* Note: background for entire screen */ body     { background-image:url('......'); }   /* Note: this is the background for the 'contained' webpage */ #outerContainer {          width:960px;     background-image:url('.....');  

    }           

    The above was what I meant to imply in my answer.

    3. The other portions of your post was simply a discussion on semantics. And although I find those topics enjoyable for the most part, it would have been more interesting if you had actually made a point rather than simply pointing out why something is inaccurate. IE. A line stating: "The correct term for what you are both referring to is....whatever" would have been welcome.

    This illustrates the type of problem I encountered many times while I was struggling through the basics - overly complicated answers that really did not answer my question in a meaningful way. The assumption seemed to be that I knew more than I did, or that I was further along my HTML/CSS learning curve than I was.  It always confounded me because if I am asking about placing background, or how to make my navlist go horizontal.... of course I'm a noob! So don't get overly technical... yet.

    Because of this experience, I try to simplify the terminology (if I know it), or simply follow the lead of the person asking the question and use terms that I would have appreciated not so long ago. Those are the types of comments on the blogs & forums that helped me the most. Keeping it simple. And when I understood the basics, then I felt more comfortable upping the techy-speak.  This is probably more info than anyone wants or needs, but I felt if my efforts were going to be criticized - intentionally or not -  I may as well put my reasoning forward. I do not even attempt to answer more advanced questions because it is obvious there are people who know more about it than I do. But I find that many 'pros' have forgotten how to speak to newbies, and that is where I thought I could help.

    P.S. I would still like to know the correct terminology for the two backgrounds locations. Mostly I've seen it referred to as outside background and wrapper background, but there really is no consistency. If anyone knows, I would love to hear it.


    Friday, July 19, 2013 3:11 AM
  • "I would still like to know the correct terminology for the two backgrounds locations. Mostly I've seen it referred to as outside background and wrapper background, but there really is no consistency. If anyone knows, I would love to hear it."

    There isn't any special terminology.  It's the "background of whatever you are applying that background style to".  If people refer to something as a "wrapper", they probably have a div (maybe even with an ID of "wrapper") that they use to corral the main content and conveniently control overall content width, centering, etc. with one element. But you don't have to lay out your site that way, and may not have a "wrapper".  If they refer to "outside background", they need to clarify what it is outside of (or more usefully, what the elment they are styling is): they might mean the body background, but they don't have to mean that.

    Friday, July 19, 2013 3:41 AM
  • There isn't any special terminology.  It's the "background of whatever you are applying that background style to".

    Thank you. It confirms what I already assumed in this instance: correct terminology is relative. When I first started building my site, and was looking for ways to change the outside background I used the terms "the back part of the website" in google. :) I never really thought about it, but I figured the only background I could really control is the part of the active website and the rest would be browser-driven, only I couldn't figure out where.

    Oh.... how far I've come! :)

    Thanks again.

    Friday, July 19, 2013 4:29 AM
  • As I did not mention anything about where to style (it was not part of the original question) I am uncertain why you would make such an assumption.

    You most certainly did. These were your exact words:

    Put your background code right after the body tag at the very top.

    There is literally no other way to interpret that than "right after the body tag," as an inline style. I made no bloody "assumption" whatsoever. You may not have meant to say it that way, and you may wish now that you had not said it that way, but that is entirely beside the point. The body tag, in any valid Web page, exists in one place and one place only, and that is at the opening of the body element, "at the very top" of the page content. Regardless of what you meant to say, what you did say was wrong, and it was entirely in order that I explained that to the OP.

    As for this:

    I will also say that I found it amusing that you would illustrate your example using internal styling.

    Of course I did so, although the terminology is "inline styling," not "internal," which is inexact, inappropriate, and could be construed to refer to either inline or embedded styling. There is a reason why, like all specialties, there is a specific lexicon of terminology for Web development, to avoid such ambiguities of meaning. As for using inline styling, it is quite appropriate in this case, since it was meant to apply to exactly one element on this page (to make the paragraph outside the body element visible against the dark background). Since it was specific to that element, and that element alone on the page, it would have been incorrect and inappropriate to either embed it in the <head> or put it into an external style sheet. That is why inline styles exist.

    I would still like to know the correct terminology for the two backgrounds locations.

    There is none. For one thing, there's no such thing as "the two backgrounds." Here's the point—"background" is a CSS property, and it is a property available to to every displayable element on a page. Every one of them. Spans, divs, paragraphs, lists, definitions, citations, articles, whatever. Every element on the page which can be displayed can have a background assigned to it. Some of them don't make any sense (what's the point of a background for a non-transparent image?), but the property is available for assignment. That simply means that you need to be specific. If you're referring to the body, it's the body background. If you referring to the div designated #mainContainer, then it's the mainContainer background. Every element may have a background property, so it is the responsibility of the speaker to make clear which element he is referring to.

    Trade terminology, or "terms of art," are not capricious or whimsical. They exist for a reason. Using fuzzy or incorrect terminology, especially when speaking to a novice, is more likely to obfuscate than to illuminate.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Friday, July 19, 2013 5:19 AM ....
    Friday, July 19, 2013 5:17 AM
  • Wow... you really don't get it, do you?

    p.s. http://www.w3schools.com/css/css_howto.asp

    Friday, July 19, 2013 6:19 AM
  • Smokva,

    You are correct to point out that a <style> section in the <head> section can indeed be referred to as an internal style sheet.

    But Scott is correct in telling you that what you said ("Put your background code right after the body tag at the very top.") implies inline styling, or would be read as an incorrect instruction to put a <style> section after the <body> tag in the HTML (or, for a true newbie, even just the CSS after the <body> tag with no <style> section).

    You assumed an external CSS sheet, you say.  But, in a CSS file, there is no body tag.  There may be a style for the body selector.  (http://www.w3schools.com/css/css_syntax.asp)  [A tag is specifially the use of angle brackets around the keyword (often an element name), in HTML.  (http://www.w3schools.com/html/html_intro.asp) ]  In fact, you also assumed that someone's style sheet would have styling for "body" at the top of the CSS page, which is not necessary at all.  The body style can be anywhere in the CSS sheet, or not there at all.

    If you think that explaining terminology would be helpful when answering a question for a newbie (and it often would be), it would be great if you did that.  But if you use incorrect terminology rather than explain using correct terminology, you may cause more confusion.  So, please don't take it amiss if people correct that.




    • Edited by KathyW2 Friday, July 19, 2013 1:17 PM sjfdlaf
    Friday, July 19, 2013 1:03 PM
  • Hello Kathy,

    I recognize the role of a peacemaker when I see one, and I respect the effort - more so since it is obvious that you and Scott/paladyn have a long standing relationship and I am relatively nothing and no one to you or this forum. The problem is that this has unintentionally  become somewhat personal. So let me attempt to make my position clear one last time:

    I do not mind corrections to my terminology. Nor do I mind if someone reads my answer, believes it may cause some confusion, and proceeds to address it. This benefits not only the OP but me as well. When paladyn did that in his first post, my response was as follows:

    "Reviewing my post, I can only think it may have been my use of the term 'tag' when referring to the 'body'. My bad. I admit it. "

    So... no problem. His post actually made me analyze my response and recognize an error that I really should not have made. That should have been that. Except that paladyn chose not to take note of that.

    He took issue with the 3rd part of the post; the part that questions his pontificating on the inaccurate term of 'body background' without providing a suitable alternative. Considering that this was part of the OP's issue (..." I don't know what it is called so I can't search for it, ..." ) I would consider it quite reasonable to suggest that his detailed answer included his recommendations as well as his criticisms. Now unfortunately for paladyn, my point was valid enough that he couldn't dispute it directly, as both his and your subsequent posts confirmed that the terminology in this case is somewhat 'user defined'. So instead, his rant (yes, I call it that on purpose -  review his post before you take issue) focused on the implied 'tag/html/internal styling' issue which I've already conceded was incorrect on my part. Then the tactic was to choose very select portions of my response - taking them out of context and twisting their intended meaning so that he could ridicule them appropriately. The purpose? I would expect it was partly because he doesn't respond well to rebukes - particularly if on some level he felt they were valid - and to offset that, he wanted to reassert his superiority on the subject. Silly, really... who's arguing with that?

    So while his first post had merit (although I maintain that it did not really answer the original question but rather critiqued and went off on a related tangent) his second post was driven by a completely different emotion: The first portion of his post is redundant; the second portion was both patronizing and inaccurate; and the third portion, while interesting and factually correct, has a distinctly huffy quality to it and purposely ignores the context in which the original question was posed. And then, of course, the true point of my original response: ‘not providing a simple, non-technical response’ (yes, it is possible, particularly from someone of paladyn’s obvious knowledge), was completely ignored.

    So Kathy, please do not presume that I take issue with someone correcting my errors or simply pointing out a different approach that they think is better – I don’t. I don’t even care if someone chooses to deliberately misconstrue a point of view – for me, it is a sign of a lost cause and really not worth my time to address. However, I do take issue when anyone purposely and deliberately misconstrues a point of view and then attempts to use that as a means to belittle one’s perspective. If there are valid points to be made, make them; but don’t make them up.

    And please do not do either me or paladyn a disservice by suggesting I am misconstruing his reply. He is a skilled writer – if I construed a tone, it is because that was his intent; if he rephrased something to suit his purpose - he meant to do it.

    Paladyn made an excellent comment: “it is the responsibility of the speaker to make (his issue) clear…” .  . This is very true, but I would add to that: “it is the responsibility of a mentor to make every attempt to understand the issue.” Using semantics to ignore an issue is a common practice, albeit not a very respectable one. So perhaps I should have ignored it – it may have been the mature thing to do – but it seems I have not reached that level of enlightenment.

    Your post provides a perfect opportunity to illustrate my point:

    You: “…a <style> section in the <head> section can indeed be referred to as an internal style sheet.”

    If I wrote the above, paladyn would probably have responded: “It is not that it ‘CAN’ be referred to as an internal style sheet, it “IS” referred to in that way. Trade terminology, or "terms of art," are not capricious or whimsical. They exist for a reason. Using fuzzy or incorrect terminology is more likely to obfuscate than to illuminate.” In reality, I suppose we can say he used both internal and inline styles… but I think I made my point.

    You: “You assumed an external CSS sheet, you say. But, in a CSS file, there is no body tag. There may be a style for the body selector.

    Yes, I conceded in my reply that my use of ‘tag’ was unfortunate. As far as the assumption of using an external style sheet is concerned, I would respectfully point out that as an assumption, it probably has more weight than that of assuming the usage of internal or inline style. The latter two are generally frowned upon in the current environment. And any ‘newbies’ would be aware of this as the vast majority of beginner css tutorials and documentation make this abundantly clear (I have gone through a number of them). So although that may not necessarily be the case, unless one is prepared to scour the full html and style sheet layout for every basic question, one has to make certain assumptions. And as styling was not the issue of the post, I do maintain that it was not incorrect to assume that the individual was using a stylesheet. HOWEVER, I freely admit that by using the term ‘tag’, I improperly presented my assumption as being that the OP was using an internal or inline style, and that by not commenting on it further, I implied approval. That is why my reply clarified my position, acknowledged my error, and very clearly said: “My bad.”  Why that portion of my reply seems to be ignored is beyond me – it’s the part that says: YOU ARE RIGHT!  (Thank you by the way for the term ‘selector’. I don’t think it is one most newbies would be familiar with, but it will definitely be one that I will use – and define when necessary – from now on. )

    You: “In fact, you also assumed that someone's style sheet would have styling for "body" at the top of the CSS page, which is not necessary at all. The body style can be anywhere in the CSS sheet, or not there at all.”

    I’m sorry, but I don’t really agree with that. It may be true in some cases that are beyond my experience; but using “body” seems to be the norm. And although I admit that there are exceptions to every rule, not assuming the use of ‘body’ would seem to me to be inconsistent with this type of question. However, taking your whole post into consideration, I do understand the point you are really trying to make – a valid one – and have no desire to pursue this further.

    I feel I’ve presented my position quite clearly for those that want to hear it. For those that don’t… well, they would never hear anything except their own pov in any case. 

    This thread has really gone off track, and I’ll take some responsibility for that. So to ensure this forum remains issue oriented, I’ll stop my participation right here, and refrain from posting from now on to avoid similar escalations.

    Regards, Kathy. I may not regret my stance, but I do regret the headache it probably gave you. :)  

     

    Friday, July 19, 2013 8:23 PM
  • Wow... you really don't get it, do you?

    p.s. http://www.w3schools.com/css/css_howto.asp

    I presume that you are referring to this:

    Of course I did so, although the terminology is "inline styling," not "internal," which is inexact, inappropriate, and could be construed to refer to either inline or embedded styling.

    Once again, you have muddled terminology. I am quite aware of the use of "internal" to describe an embedded style sheet, as is obvious from the second part of that statement—"...could be construed to refer to either inline or embedded styling." When internal is used, it should be followed by "style sheet." The phrase "internal styling," used in the context that you used it, was, as stated, ambiguous, making it unclear whether you were talking about my use of an internal (embedded) style sheet, or my use of inline styling, both of which were true in this case. In the current instance, as you can clearly discern if you read the rest of that paragraph, I resolved it in favor of you meaning my use of inline styling, and went on to explain why.

    It now appears that you were referring to my use of an internal style sheet. And I will point out once again that my use of an internal style sheet was entirely appropriate. The only alternative to doing so when posting an example page is to create an external style sheet, publish it to a Web-accessible location, and link to it in the sample code.

    The fact is, and I will reiterate it once again, in the hope that it gets through, that industry terms, terms of art, trade terminology, jargon, call it what you will, is specific, and meant to be so. As stated in the linked reference, "When attempting to make a meaningful contribution to a field, it is generally very important to understand that field's terms of art..." Later in that article, it also notes that, although novices often accuse its users of being elitist, it is essential to "quickly and unambiguously describe a process, experiment or result."

    Unambiguously. That is what I have been trying to emphasize in my replies to you. By using sloppy, unclear, ambiguous terminology, you make it difficult to determine exactly what it is you are describing. If you are going to use Web development terminology in your replies, it is incumbent upon you to use it correctly, lest you confuse the inexperienced and evoke a response from those who take issue with your negligence.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.


    • Edited by paladyn Friday, July 19, 2013 9:00 PM ....
    Friday, July 19, 2013 8:47 PM