Super simple background question (i think)

HTML & CSS
1

Howdy all nice to be back.
It’s probably super obvious and am staring at it, i thought i had gotten this too work before as well. But…
I want my background image, a png w/a partial transparency to show the gradient beneath.
wich is not happening.
Nope the page is not yet live. will try to put up by tonight. But was hoping this was super simple…



html{
background: #7db9e8; /* Old browsers */
background: -moz-linear-gradient(left, #7db9e8 0%, #0b193a 39%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7db9e8), color-stop(39%,#0b193a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #7db9e8 0%,#0b193a 39%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #7db9e8 0%,#0b193a 39%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #7db9e8 0%,#0b193a 39%); /* IE10+ */
background: linear-gradient(to right, #7db9e8 0%,#0b193a 39%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#0b193a',GradientType=1 ); /* IE6-9 */
}

body{
margin:0px;
padding:0px;
background-image:url('imgs/engineeringLgBGround.png');
background-repeat:no-repeat;
background-repeat:no-repeat 0 0;
background-position:top left;
}

<!-- also tried to put it in the wrap -->

#wrap{
//min-height:1200px;
background-image:url('imgs/engineeringLgBGround.png');
background-repeat:no-repeat;
background-repeat:no-repeat 0 0;
background-position:top left;

}

Advice on how to make this work please?

2

Do you suppose you can post a working example that will allow us to replicate the problem on our PCs?

Please see: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics

3

You are actually missing a concept: generated gradients ARE bg images. so when you set the background image prop you are overriding the gradients.
Another thing is that the body/html background properties tend to interact… so that may be another factor.
I am not certain if you have the right path to your image, as setting the image in the wrap should have worked.

TRY this and for testing purposes, move your image to the same folder as your CSS:


html{
background: #7db9e8; /* VERY Old browsers */
background:url('engineeringLgBGround.png') no-repeat, #7db9e8; /* Old browsers */
background:	url('engineeringLgBGround.png') no-repeat, -moz-linear-gradient(left, #7db9e8 0%, #0b193a 39%); /* FF3.6+ */
background: url('engineeringLgBGround.png') no-repeat, -webkit-gradient(linear, left top, right top, color-stop(0%,#7db9e8), color-stop(39%,#0b193a)); /* Chrome,Safari4+ */
background: url('engineeringLgBGround.png') no-repeat, -webkit-linear-gradient(left, #7db9e8 0%,#0b193a 39%); /* Chrome10+,Safari5.1+ */
background: url('engineeringLgBGround.png') no-repeat, -o-linear-gradient(left, #7db9e8 0%,#0b193a 39%); /* Opera 11.10+ */
background: url('engineeringLgBGround.png') no-repeat, -ms-linear-gradient(left, #7db9e8 0%,#0b193a 39%); /* IE10+ */
background: url('engineeringLgBGround.png') no-repeat, linear-gradient(to right, #7db9e8 0%,#0b193a 39%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#0b193a',GradientType=1 ); /* IE6-9 */
}

that should work. (you can figure the path to the imgs folder relative to the CSS folder, put your image back in the image folder and update the paths in the CSS rules)

4

RonPat, Dresden!
Hi. Will post the pages I am working on tonight. Hope you’ll give me your feedback as well.
Dresden thank you for your help the fix worked! Interestingly it had to be in the body tag.
I’ll try again later in the html tag on a diff page.
Meanwhile you all have a great weekend, mine will be in front of a laptop :slight_smile:

5

As the guidelines recommend, try to include only enough code to render the problem on a stand-alone page. No need to include everything.

Aside @dresden_phoenix:
I’ve never heard of placing any code in the <html> layer other than padding and margin resets. It will be interesting to see how this works. Something new to learn! :slight_smile:

Cheers!

6

Hi Ron,

The html element is indeed special and I usually advise against using it for anything other than padding/ margins resets. The reason is partly historical in that very old versions of IE (ie5 IIRC) the html element didn’t exist and the body was the root element so styling html would have no effect.

The main reason for not using html for background colours though is that browsers are required to propagate background colours on the body element to the html element anyway (if the body’s background colour computes to transparent) and thus pointless most of the time. If you do use the html element for a background colour then add a a background to the body element then the body element loses its viewport height and the background only extends as far as the content (this is probably the issue in the OPs problem as the body will have no height unless it has content). Again this is not a real problem but does confuse a lot of people. The html4 specs advise against using the html element for background colours.

See mine and Tommy’s (AutisticCuckoo) comments in this old article for more detailed info on what happens when you style html.

However, once you understand the implications its up to you whether you use it or not and in some cases does provide an extra wrapper at no extra cost.

7

Hello all. put up my wip so far. just a breakdown of what is eventually to xfrd to wp.
I had read about putting the bground colors/gradients/image in coyers’s css tricks (http://css-tricks.com/) website a few weeks back.

I have a side question…How do I break an inheritance?
I created a thin line, below the top nav bar (http://www.danielamorescalchi.com/coreCorp/engineering.php) a div i would eventually like to hold an animated component. I want it to be 3px high, but it is inheriting a 20px height from the body element from the original bootstrap.css

body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}

I tried resizing it by giving it the new height to every id/class I could think of still no dice.
Thank you all
D

8

Hi,

If you are talking about #sweeprow then just assign the new line-height:


#sweepRow {
    height: 5px;
[B]    line-height: 5px;[/B]
    margin: 0 0 30px;
    padding: 0;
}

(Or for elements with height you could just use overflow:hidden to hide the excess line-height but may not always be suitable.)

9

Morning Paul!
The line-height attribute worked. It was the only one I had not tried. (i had tried setting the height but it hadn’t worked)
Usually I only use line-height for text elements like in a navigation’s list.
Thank you for that suggestion!

10

Yes it catches a few people out :slight_smile:

11

Asked Ronpat & Dreseden, but any chance you could also dispense some great advice on how to get the header rows at the footer to strech to the borders?
I got to so everything aligns but the headers for “technology” for example to do not stretch all the way to the right.
I hve been working w/the padding. Going gingerly so I don’t break it and wind up w/an hr scroll bar.
D

12

CLARIFIYING:
you cant break inheritance … that’s the purpose of CSS, you can, however, overwrite it. In any case, as Paul pointed out, it was’t height (besides height is not an inherited prop) that was the issue… it was line-height. Be careful with those two SEPARATE properties.

as far as the footer… I hate to say this but I would scrap the whole thing… it’s convoluted and not well structured. I will let the H4-H5 seem a bit heavy handed, but I will let them slide.

try using this:


<!DOCTYPE HTML>
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
		body { font-family: sans-serif}
			.footNav,.footNav ul  { padding:0; margin:0; list-style: none;}
			.footNav  h4, .footNav  h5, .footNav  h6   { margin:0; padding:6px;   font-size: 100%}
			.footNav  h4 >a, .footNav  h5>a, .footNav  h6>a   {color:#fff; text-decoration: none}
			
			.footNav ul.cont {padding:6px;  }
			.footNav ul.cont li{ border:none; float:none; width:auto}
			.footNav ul.cont li +li{ border:none;   }

			.footNav li, .footNav  {overflow: hidden}
			.footNav li {float: left}
			.topLev + .topLev {float:none;}
			
			.topLev +.topLev, .footNav .sns  li+li {border-left:1px solid ; }
			.topLev h4{ background:#000; color:#fff }
			.footNav .sns {padding-left:2px;}
			.footNav .sns >li { margin-left: -2px; float:left; width:25%; padding-top:0;}
			.footNav .staff li, .footNav .sns li.staff   { width:50%}
 			.footNav .sns  li+li { margin-left: 0;}
 			.sns h5 {background: #0000FF}
 			
 			.footNav .sns .staff > ul {padding-left: 1px}
 			.footNav .sns .staff > ul li{margin-left: -1px}
 			.footNav .sns .staff > ul li+li{margin-left:0}
 			.staff h6 {background: cyan}

		</style>
	</head>
	<body>
  	<ul class="footNav">
  		<li class="topLev"><h4>ABOUT US</h4>
			<ul class="cont">
				<li>Overview</li>
				<li>Executive team</li>
				<li>Board of Directors</li>
				<li>Awards & Recognitions</li>
 				<li>News Room</li>
				<li>Contact Us</li>
				<li>Careers@CDI</li>
			</ul>
  		</li>
  		<li class="topLev" ><h4>SERVICES AND SOLUTIONS</h4>
			<ul class="sns">
				<li>
					<h5><a href="#">Engineering</a></h5>
					<ul class="cont">
						<li>Oil Gas & Chemicals</li>
						<li>Aerospace & industrial Equipment</li>
						<li>Infrastructure</li>
						<li>Government Services</li>
						<li>Health, Safety & Environment (HSE) </li>
						<li>Service Excellence</li>
					</ul>
				</li>
				<li class='staff'>
					<h5><a href="#">Staffing</a></h5>
					<ul>
						<li><h6><a href="#">Client services</a></h6>
							<ul class="cont">
								<li> Workforce Optimization</li>
							    <li> Contingent Staffing</li>
							    <li> Managed Staffing Programs (MSP)</li>
							    <li> Recruiting Process Outsorcing (RPO)</li>
							    <li> Service Excellence</li>
							</ul>
						</li>
						<li><h6><a href="#">Job Seeker Services</a></h6>
 								<ul class="cont">
									<li>Job Categories</li>
									<li>Career Resources</li>
									<li>Serch & Apply</li>
									<li>Benefits</li>
								</ul>
						</li>
					</ul>
				</li>
				<li>
					<h5><a href="#">Technology</a></h5>
 						<ul class="cont">
							<li>Application Lifecycle Management</li>
							<li>Digital Solutions</li>
							<li>IT Security & Risk Management</li>
							<li>Service Management</li>
							<li>Service Excellence</li>
 					</ul>
				</li>
 			</ul>
  		</li>
  </ul>


	</body>
</html>

hope that helps

13

Thank you Dresden and thank you for that footer/nav code I’ll try it out. But am actually following up on someone else design for the footer.
Perhaps I’ll be able to modify it somewhat.
As for the line-height, height properties.
are there rules for when it is better to use one or the other?
I thought line-height was for times when you had text.
Thank you
d

14

it’s kinda like the Native Americans say… what ever rule hits the style , that the one to use. CSS is more about critical thinking than anything else, which one you should use will depend largely on the specific situation.

Do remember the following:

  1. height applies ONLY to block elements
  2. line-height affects the actual height of EACH LINE of TEXT ; by extension this means if the containing block doenst have a height explicitly set, it will appear as if the height and line-height are the same, on element with only one line of text (no wrap). This is because, unless you set an explicit height, the height of any block element is determined by the sum of it’s contents.
  3. Height is NOT an inherited property ( most block props arent). line-height is an inherited prop. This mean if you set the line-height on the body, all elements will have THAT line-height as well.
15

Awesome! thank you for such a clear and succinct explanation and again thanks for the footer sample will study it up love the much simpler code behind it.