SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    111
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Background Image - Width and Height

    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:

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

    HTML Code:
    .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.

    indexysz.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    111
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    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.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    111
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The boxes are overlapping on purpose (trying to achieve a pop-out sort of feeling). And by AP, you mean "absolute positioning"?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try changing your styles to something like this:

    Code:
    .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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by louie540 View Post
    And by AP, you mean "absolute positioning"?
    Yes.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    111
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Try changing your styles to something like this:

    Code:
    .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 )

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    111
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'll keep that in mind. Thanks again guys

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

    homemiddleimg_01.jpghomemiddleimg_02.pnghomemiddleimg_04.png


    Code:
    <!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:
    Code:
    .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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •