Background CSS question

HTML & CSS
1

Hi everyone…

Paul helped me with my site’s CSS so much. I am still learning and trying ti improve my skills and the site.

My question is about the background image placement. Right now I have it in

body {
    background: url(/photos/1.jpg) no-repeat #090000 400px;
    background-position: 50% 0%;
	}

I like the way it looks. But my footer background is inside a wrapper. But the footer background looks odd (smaller) against the background image in the body element.

So I tried a width of 100% for the footer…like shown below…

.footer {
height:92px;
background: url(/photos/2.jpg) no-repeat 50% 0px;
padding:307px 0 0 0;
margin: auto;
clear: both;
font-size: 11px;
text-align: center;
width:100%;

}

And it looks good …my question is am I doing an incorrect CSS practice that does not make sense and does this bring future problems?

Is keeping the background image in the ‘body’ element not a good CSS practice since I have my footer and its background in a wrapper and the background is not inside the wrapper??

Thank you for any help…the link is

http://www.rajeevthomas.com/viewgallery.php

Rajeev Thomas

2 
body {
    background: url(/photos/1.jpg) no-repeat #090000 400px;
    background-position: 50% 0%;
	}

Well that code is kinda dodgy. The 400px at the end is confusing. If the browser assumes it a coordinate for background-position, it’s incomplete (so the default is, the browser must assume the other value is “center”) and then you go ahead and have background-position again anyway. Why not
background: #090000 url(/photos/1.jpg) 50% 0 no-repeat;
?
For the footer image: you’re right that if the box holding the image isn’t large enough, the background image can get cut off.

What I usually do is look at the dimensions of the image and I might do something like:

(image is 400px tall and 300px wide)
#element {
min-height: 400px; /if the content inside gets bigger, that’s okay, #element will grow, but it’ll never get smaller than 400px tall/
min-width: 300px; /I only set this if the box isn’t already a good flexible width though… is there even a possibility that it would get smaller than 300px?/
}

You have kinda something similar:
height:92px; /careful, if someone needs to make your text bigger, you may run out of room!/
background: url(/photos/2.jpg) no-repeat 50% 0px;
padding:307px 0 0 0;

Using padding to make sure there’s a minimum height (and also this prevents the text or other inner content inside the element from covering the image) is a popular technique. So long as you keep in mind that setting padding at the same time you set a dimension that the padding adds to that dimension, you’re cool.

If your footer is a non-floated, non-absolutely-positioned block element, it should be 100% width of its container by default.
Does your footer actually get bigger when you add in the width?

Is keeping the background image in the ‘body’ element not a good CSS practice since I have my footer and its background in a wrapper and the background is not inside the wrapper??

If the wrapper is a certain-width and centered, I would try keeping the background image on either the wrapper or the footer, because yeah, if the user’s browser is less wide than your wrapper and the image is on the body, the body’s “50%” could be different than the wrapper’s 50%.

But go ahead and play with your browsers with the background image on different containers. Try to break your page. Don’t be gentle with it! Your users won’t be : )

3

Thank you very much again!!

4

My full CSS code is below…


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
}
ins {
    text-decoration:none;
}
del {
    text-decoration:line-through;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}

html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
    margin:0;
    padding:0;
}

body {
    
    background: url(/photos/1.jpg) no-repeat #090000;
    background-position: 50% 0%;
}
html, body {
    min-width:860px;
    
}

a {
    text-decoration: none;
    
    
}
a:visited {
    
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: none;
    color: #ffffff;
}
a, input {
    outline-color: invert;
    outline-style: none;
    outline-width: medium;
}

img, div { behavior: url(iepngfix.htc) }

img a img {
    padding:1px;
    
}

#header1 {
    text-align: left;
    padding:0px 0 0 0px;
    border-bottom: 0px solid #260101;
    height:166px;
    position:relative;
    overflow:hidden;
    border-top:400px solid #000;/* footer soak up */
    left:54px;
    top:0px;
}


#header1 span {
    width:600px;
    height:166px;
    position:absolute;
    left:0px;
    top:45px;
    background:url(/photos/header-1-.png) no-repeat 0 0;
    behavior: url(/iepngfix.htc);
    
}
.cname {
    font-size: 17px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    line-height: 50px;
    
}


.cthumbs a:visited{color:#cf3d18}
.cthumbs a{color:#c86318}
.cthumbs a:hover{color:#FFFFFF}


.caption {
    font-size: 20px;
    color: #ff0000;
    margin-top: 10px;
    margin-left: auto;
	margin-right: auto;
	text-align: center;
    padding: 10px 0px 10px 0px;
}

.excerpt {
    font-size: 18px;
    color: #C48B4E;
    width: 450px;
    background-image: url(photos/.jpg);
    border-top:1px solid #A64B00;
    margin-left: auto;
	margin-right: auto;
	text-align: center;
    padding: 10px 0px 0px 0px;
}


.thumbsPage {
    position:relative;
    top:10px;
    margin:0px;
    text-align:left;
    padding:20px 20px 20px 20px;
    min-height:875px;
    height:auto !important;
    height:875px;
    left:0px;
}

* html .thumbsPage {
    zoom:1.0;
    height:875px;
}


.thumbs {
    text-align:left;
    margin:10px auto 0;
    padding:0px 0px 0px 0px;
    
}

.thumbs a {color: #ef6702;}

.thumbs table {margin:auto;}

.thumbsPage img {
    border: 1px solid #3a1c11;
	padding: 8px; /*Inner border size*/
	background: #000000; /*Inner border color*/  

}

.thumbs td {
    padding:10px;
    vertical-align:middle;
}

.link {
padding:0px 0px 0px 10px;
text-align:left;
font-size:16px;
position:relative;
top:5px;
left:60px;
color: #FF0000;
}

.link a,a:visited{color: #ef6702}
.link a:hover{color:#FFFFFF}


.plinks{
   padding:20px 0px 0px 0px;
   text-align: left;
   font-size: 18px;
   color:#ff310b;
}

.plinks a,a:visited{color: #ef6702}
.plinks a:hover{color:#FFFFFF}

.limagePage {
       
	
    width:900px;
    min-height:890px;
    height:auto !important;
    height:890px;

    }



.limage table {margin:auto;}

.limage{
   
   top:-15px;
   text-align: left;
   font-size: 18px;
   margin:0px ;
   position:relative;
   left:0px;
   padding:0px 0px 0px 0px;
   }


.limage a {color: #ef6702;}

.limage{zoom:1.0}

.llink{
padding:5px 0px 0px 10px;
text-align:left;
font-size:16px;
position:relative;
top:-15px;
left:20px;
color: #FF0000;
}

.llink a,a:visited{color: #ef6702}
.llink a:hover{color:#FFFFFF}

.prev{

  margin:0px;
  color:#FF0000;
  padding: 0px;
  position:absolute;
  left:-52px;
  top:295px;
  

  
}


.next{

  margin:0px;
  padding:0px;
  color:#FF0000;
  position:absolute;
  right:-48px;
  top:295px;
  
}



.cpage {

  position:relative;
  margin:0;
  text-align: center;
  padding:20px 0px 0px 0px;
  min-height:875px;
  height:auto !important;
  height:875px;
  left:0px;
  top:20px;
  
}



.cpage table {margin:auto;}


.categoryview {


width:600px;


}

.cpage img {
   border: 1px solid #4e2210;
   padding:5px;
}

#seeker {
    font-size: 15px;
    padding: 10px 2px 2px 0px;
    width:725px;
    margin:auto;
    position:relative;
    left:40px;
}


.main {
    width:900px;
    margin:auto;
    position:relative;
    left:0px;
    
}


.textarea {
    font-size:15px;
    width:260px;
    height:23px;
    background-color: #8c5535;
    border: 1px solid #401c14;
    padding:0;
    margin:5px 1px 10px 0x;
    text-align:left;
}
.buttons {
    padding: 3px 3px 23px 3px;
    margin:0px 0px 0px -3px;
    background-color: #401c14;
    border: none;
    color:#ff7302;
    font-size: 15px;
    height:23px;
}
.footer {
    height:92px;
    background: url(/photos/2.jpg) no-repeat 50% 0px;
    padding:307px 0 0 0;
    margin: auto;
    clear: both;
    font-size: 11px;
    text-align: center;
    width:100%;
    
}

.footinner {
    width:100%;
    text-align:center;
    padding:45px 0px 0px 0;
}

#seeker {
    font-size: 15px;
    padding: 0px 0px 0px 0px;
    width:725px;
    margin:auto;
    position:relative;
    left:0px;
}
.footnote {
    font-size: 15px;
    padding:0px 0px 0px 0;
    color:#ff7302;
    width:725px;
    margin:auto;
    position:relative;
    left:0px;
    top:10px;
}


/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
.wrapper:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

.wrapper {
    min-height:100%;
    margin-top:-400px;
    text-align:left;
    width:1024px;
    margin-right:auto;
    margin-left:auto;
}



* html .wrapper {
    height:100%
}
.me {
    font-size: 14px;
    color:#ff7302;
}

.nav li a:hover {color:#FFFFFF;}

.nav {
	width: 100%;
	float: right;
	padding: 0px 1px 0px 1px;
	list-style: none; 
    position:relative;
    z-index:1;
    top:-33px;
    margin:0;
}

.nav li {
	float: left;
    position:relative;
    left:487px; 
}

.nav li a {
		display: block;
		padding: 0px 6px 0px 6px;
		text-decoration: none;
		color: #ef6702;
        font-family: ‘Arial Narrow’, sans-serif;
        font-size:14px;
}



.des{
color:#cc9152;
padding:0px 0px 0px 60px;
font-size:17px;
width:750px;

}

.underline {
	height:100%;
	position:relative;
	margin: 0px auto;
	behavior:url(/iepngfix.htc);
	z-index:1;
	padding: 28px 0px 0px 0px;
	background-image: url(photos/underline.png);
	background-repeat: no-repeat;
	background-position:center bottom;
    text-align: right;
    width:220px;
    
}


/* End */
5

when you say when someone wants to make my text bigger? Do you mean the viewer? How do they make the texts bigger? Paul helped me with the sticky fotter and I think one of the requirement for the footer is that the height needs to be known.

Sorry, I forgot you said this was a sticky footer. I still use min-height a lot in my sticky footers instead of height, but this does mean the design would break if someone needed to make text bigger in that footer… although I also use “em” as the unit for my footer size instead of px, which helps a little bit.

Yes, people can and do enlarge text in their browsers (or have a higher font-size setting on their computers, so everything on their screen, all their applications including browsers, have some larger font size than the default). For example, this forum on my computer has 13px tahoma which is not readable at all. So I do CTRL++ in my browser to make the text readable. For some browsers this is zoom, so your layout would mostly be fine, and for others it’s text-enlarge, which will break px-based containers.

So if I say footer width is 100% , does this mean it takes the width of .wrapper which 1024px ?

Ah, not if you’re doing the sticky footer, no… because your footer isn’t inside the wrapper, is it? It’s directly inside the body.

So your footer should be as wide as the body by default. When a static block is created, it is “width: auto” which for static blocks means “100% wide” and side padding/margins isn’t added to that amount.

If you manually set “width: 100%” on a static block, then you suddenly have to be careful about adding sidemargins or padding, because now they would be added to the 100% width and you can’t have something bigger than 100%! If I want a box to be as wide as the box it’s inside of, I just don’t mention the width (unless I need to trigger Haslayout in IE).

Actually when I add a width of 1024px to the footer it looks smaller than the background image on the ‘body’ element… that is very confusing to me.

Yes if your body is wider than 1024, then setting the body to “1024” would be limiting the footer.

Does this mean if the I view the site on a cell phone or smaller device, the background might look not in alignment with the site?

If you had a background set on the body element, and the body was as wide as someone’s screen, and that person’s screen is not as wide as you set the wrapper/rest of page, and the body image is centered with “50%” then, yes, they wouldn’t be in alignment.
However I see that you set the html and body elements to a min-width, so that should mean anyone with a screen smaller than your min-width should always get a scrollbar anyway. So you might be okay. Try it!

6

Stomme poes…thank you …you explained things so well… I learned so much from this topic itself…

because your footer isn’t inside the wrapper, is it? It’s directly inside the body.
Yes you are right …it is not inside the wrapper… it is in the body.

Thank you for sharing lots of info in one reply!! Had no idea about CTRL++ !!

You are right about

If you had a background set on the body element, and the body was as wide as someone’s screen, and that person’s screen is not as wide as you set the wrapper/rest of page, and the body image is centered with “50%” then, yes, they wouldn’t be in alignment.

I saw it on my cell phone… the background was pushed to the side. Thank you for letting me know about this… is there a work around of this? Is there anyway we can keep the image in ‘body’ element and still keep it in place when the site is opened in smaller windows?

Rajeev.

7

The only way you could force a bg image to remain in the center is to let the element holding the image always be the size of the screen. You’d have to build with mobile in mind and have a flexible site.

So if the image is on the body and the body’s width is the same as the screen all the time, then the image would always be in the center (well, not when the image is also very large compared to the screen).
But if your page (wrapper and footer) are supposed to be a certain width (either limited when screen is wide or forces a scrollbar when screen is narrow/small) then maybe for you the most important thing is, for most screens, that the images line up.

If mobile sizes are important to you, then likely you’ll want to do all the things that are good for mobile development. And a sticky footer probably isn’t helpful to someone using a small screen… sticky footers are more for people with big screens who might see a page of yours that’s not very tall.
At this point you might be interested in using two or more stylesheets: something basic for small screens and something with the sticky footer for larger ones.
I didn’t see this guy’s talk, only the slides, but check out these cool slides about mobile web.

8

Thank you very much for your explanations… I think I am going to stick with the background image in the wrapper. Paul and you have helped so much …thanks again!! :-))