Background Image - Width and Height

[louie540]

Hi.

I’m currently making a website and I am having trouble adjusting the width and height of some background images. So far, the only way I have been able to make it happen is by adding a **** load of padding to make it expand, but when I want to add content inside it, I get more trouble with the content going towards the middle. I tried adding width and height, but nothing happens.

I attached an image. It’s the 3 gray boxes towards the bottom.

Here is the html and css:

<ul class="homeul">
          <li>hellooo</li>
          <li>hihiiii</li>
          <li>hellohi</li>
</ul>

.homeul {
	list-style: none;
	color: #fff;
	z-index: 500;
	width: 100%;
	max-width: 1000px;
	min-width: 800px;
	margin-top: 170px;
	margin-left: -20px;
	overflow: visible;
	position: absolute;
		
}

.homeul li {
	display: inline;
	width: 285px;	
	margin-right: 80px;
	background-image: url(../images/subsection/homemiddleimg.png);
	background-repeat: no-repeat;
	padding-left: 100px;
	padding-right: 105px;
	padding-top: 100px;
	padding-bottom: 99px;
	
	/*  experimental
	padding-left: 100px;
	padding-right: 185px;
	padding-top: 100px;
	padding-bottom: 99px;
	*/
	
}

If I need to clarify anymore, let me know. The format is HTML5.

[ralphm]

I’m not really clear on what you are trying to achieve here. You can’t make background images expand, though. If you want the boxes to be bigger than the background image, you can set the image to repeat, so that it fills the box’s background.

[RyanReese]

Of course when you add padding it makes it impossible for the content to be near the outer edges, so it only has inwards to go :). I also have trouble seeing what you want. Could you screenshot another picture and modify it via pain or photoshop and show us what you actually want?

It’s highly probable we will need more code then just those HTML/CSS snippets.

[louie540]

I’ll try repeating the background. I’ll attach before and after pictures of what I’m trying to achieve. I’m trying to put 3 boxes near the bottom of the page

Before:

After (added padding)

With the padding, I can’t really put content in it because it pushes everything over (obviously) but right now I am using it to give an idea of how the background should look like. I need to get it to look like this without padding.

I’ll just go ahead and post the link to the website so you’ll see what I mean. There is currently text in it. I’ll change the color to black so you can see it.
[URL=" http://specializedtherapyservices.org/index2.php"]
http://specializedtherapyservices.org/index2.php

The hosting company (FatCow) seems to take forever to make any changes, so if you don’t see text in those boxes then you can high-lite it. You’ll see that it’s sort of in the middle due to all that padding.

[RyanReese]

You need to remove the height on .content. It’s making the height too short and as a result the content below it is overlapping.

Once you remove that, and the padding on those huge boxes, it’s all good.

Though you’ll need to remov the AP you have on “.homeul”. I don’t know why you have it on there.

You can mess with the placement from there.

[louie540]

The boxes are overlapping on purpose (trying to achieve a pop-out sort of feeling). And by AP, you mean “absolute positioning”?

[ralphm]

Try changing your styles to something like this:

.homeul {
  top: 50px;
  position: relative;
  z-index:500;
}

.homeul li {
  float: left;
  height: 170px;
  width: 265px;
  margin-left: 50px;
  background: url("../images/subsection/homemiddleimg.png") no-repeat;
  padding: 10px;
}

.homeul li:first-child {
  margin-left: 0;
}

That will get you much better results.

[RyanReese]

@louie540

And by AP, you mean “absolute positioning”?

Yes.

[louie540]

@ralph_m

Try changing your styles to something like this:

.homeul {
  top: 50px;
  position: relative;
  z-index:500;
}

.homeul li {
  float: left;
  height: 170px;
  width: 265px;
  margin-left: 50px;
  background: url("../images/subsection/homemiddleimg.png") no-repeat;
  padding: 10px;
}

.homeul li:first-child {
  margin-left: 0;
}

That will get you much better results.

Oh dude it worked! Thank you so much
(forgot list-style is none, but I got that taken care of :D)

[ralphm]

cool, glad that helped. It might need some refining, but you get the basic idea. Generally I avoid setting heights on boxes, in case the content needs to expand, so there are some alternatives … but see how you go with this.

[RyanReese]

If you must set heights on boxes I would recommend setting the font size to ems and also setting the height of hte element to em. That way, at least, text resize won’t be an issue :).

Though as Ralph said you should avoid height setting on content altogether.

[louie540]

I’ll keep that in mind. Thanks again guys

[system]

@RyanReese

If you must set heights on boxes I would recommend setting the font size to ems and also setting the height of hte element to em. That way, at least, text resize won’t be an issue :).

Unless you set a background image with no repeat or background color, in which case it’s MORE of a mess since it looks like the text is ‘blowing’ out of it’s container.

Really though this is why pages like this fall into the “But i can do it in photoshop” bin, as this is another of those “not viable for web deployment” concepts that have no real business on websites.

Well, unless you REALLY want it broken on anything other than the same magical combination of screen size and font renderer as the designer had.

[dresden_phoenix]

I think the OP woul paint himself into a corner by continuing to follow that path. For starters , he’s created a fix dimension box, that doesn’t even seem to account for the fluidity of web content.

I would humbly suggest the following:
Break the box into 3 images

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
		    .test {margin:0; padding:0; list-style: none; overflow: hidden; margin:0 auto;  width:955px;padding-bottom: 8px;}
			.test li{ float:left; width:275px;margin:0;background: url(images/homemiddleimg_02.png) repeat-y right top; padding-right: 4px; }
			.test li>div{ background: url(images/homemiddleimg_01.jpg)  no-repeat right bottom #b5b5b5;   min-height: 191px;
				padding:15px	/*aesthetic padding*/
			
			 }
			.test li+li{margin-left: 50px;}
			.test li:after{content:""; float: left; width:100%; height:8px; background: url(imgs/homemiddleimg.png)  no-repeat right bottom; padding-right:10px; margin-bottom:-8px}
		</style>
	</head>
	<body>
<ul class="test">
	<li><div>item</div></li>
	<li><div>item</div></li>
	<li><div>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br>longer sample item<br></div></li>
</ul>
	</body>
</html>

This makes the content boxes vertically fluid and keeps the fancy gradient and shadow. I f you want to adapt for OLD IE support, just gives the DIVs classes instead of using the child selector and add:

.test li {	zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);	

Also the sum total of the image load goes WAY down since you don’t have a LARGE PNG.

Hope that helps