SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background image issue

    Hi guys,

    I`ve just done my first website with HTML & CSS and was really happy that I`ve managed it so quickly (it`s simple and primitive but I do like it). Not until I opened it on another computer and I realized that it`s not finished at all....

    So, I have a specific concern here, which I hope you can help me out with.

    It`s about the composition of the background when opened in different resolutions

    What I`ve done for the background is to safe 3 separate images:
    1 image float:left
    1 image float:right
    1 image white gradient on top of both creating space for the conent and a smooth transitions between the two images.

    some code snippets follow:

    HTML:

    HTML Code:
    <body>
    
    <div id="background">
    
         <span id="bg"><img src="../images/content_bg.png" /></span>   
         <span id="left"><img src="../images/bar_right.png" /></span> 
        <span id="right"><img src="../images/bar_left.jpg" /></span>
    
    </div>   
     
    CSS:

    Code:
    #background {
    	position:fixed;
    	width:100%;
    	z-index:-1;
    	overflow:hidden;
    }
    
    
    #left{
    	float:left;
    	z-index:50;
    }
    
    #right {
    	float:right;
    	z-index:60;
    }
    
    #bg{
    	position:fixed;
    	left:-200px;
    }

    I`ve designed the whole thing on my 16" laptop and it looks ok, but when opened on a bigger screen, it all breaks.

    So, how can I make it happen that no matter in what resolution the page is loded, the images in the background would arrange properly ?


    thank you in advance guys!!!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    That code you've posted seems to bear no relation to the page you linked to.

    Anyhow, that page is very slow to download, on account of the oversized (not-web-optimized) images. They should be vastly smaller file sizes than that.

    A background image should be one image set on the body element, not broken up into pieces, which is a recipe for disaster.

    Anyhow, I'm not sure if I'm looking at the right thing, so perhaps confirm what the problem is and what page you are referring to. That page you linked to looks fine on a big monitor, but as I said, the images took a long time to download even on a fast connection, and it's very out of date to lay out a page with tables. (We can help you to do better than that.)

    If you have Photoshop, make sure to use the Save for Web feature, which reduces the image file sizes enormously.

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph,

    to be honest, I`m quite baffled here! You are the second one, who tells me that the page is done in tables..... but how come?

    I`ve personally coded every little bit in CSS using Dreamweaver and I really cant understand where you see tables? I`ve just checked it using chrome`s "inspect elements" and it`s all there. pure css.

    Ok, may be something went wrong with the link or something. Here the web-page again:

    intro

    it loads with a short intro, which is an animated gif made in Photoshop and sliced in tables I guess. But thats just the intro....


    And about the background images. Well as I said, I cant save it as a single merged image, because it would be fixed size (1024x768 or something) and it wouldn't let me stretch it so, as to always fill the whole monitor. That`s why I broke it into 3 parts, to position them to the left, to the right and the white gradient on top.
    At this point, I think that the problem may lie in the size(pixel not kb) of the gradient, but I still dont know how I can fix it.... .. . .


    I would be very grateful for any further advice/comment! Thanx in advance !

  4. #4
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I`ve just found the same question asked by someone else on another forum.

    it`s formulated much better than I did, so here it is, the same question asked from Abby:

    On smaller screens it will be too wide and make a scroll bar at the bottom, whereas on large/wide screens the image wont be wide enough. So, my question is: how do you make it compatible with all screen resolutions(without having a scroll bar on the bottom or a gap)? To have it resize properly for everyone who uses it?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The basic question you are asking is not hard to answer. Flexible, responsive web design is pretty simple. However, you've still posted the same link, a completely table-based site. This is the main part of your code:

    Code:
    <table id="Table_01" width="917" height="673" border="0" hspace="300px" vspace="40px" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="5">
    			<img src="animation/index_01.gif" width="916" height="32" alt=""></td>
    		<td>
    
    			<img src="animation/spacer.gif" width="1" height="32" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="3">
    			<img src="animation/index_02.gif" width="722" height="641" alt=""></td>
    		<td>
    			<a href="Pages_BG/index_bg.html" target="_self"
    				onmouseover="window.status='bulgarian';  return true;"
    				onmouseout="window.status='';  return true;">
    				<img src="animation/intro_03.gif" width="45" height="26" border="0" alt="bulgarian"></a></td>
    		<td rowspan="3">
    
    			<img src="animation/index_04.gif" width="22" height="641" alt=""></td>
    		<td rowspan="2">
    			<a href="Pages_EN/index_en.html" target="_self"
    				onmouseover="window.status='english';  return true;"
    				onmouseout="window.status='';  return true;">
    				<img src="animation/intro_05.gif" width="45" height="27" border="0" alt="english"></a></td>
    		<td rowspan="3">
    			<img src="animation/index_06.gif" width="82" height="641" alt=""></td>
    		<td>
    			<img src="animation/spacer.gif" width="1" height="26" alt=""></td>
    	</tr>
    
    	<tr>
    		<td rowspan="2">
    			<img src="animation/index_07.gif" width="45" height="615" alt=""></td>
    		<td>
    			<img src="animation/spacer.gif" width="1" height="1" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="animation/index_08.gif" width="45" height="614" alt=""></td>
    
    		<td>
    			<img src="animation/spacer.gif" width="1" height="614" alt=""></td>
    	</tr>
    </table>

  6. #6
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is just the intro-page with the animation. Photoshop tiled it in tables because I`ve used slices for the language flags.

    when you choose a language you are sent to the main content part of the page.

    I`ve just been told, that I should divide my layout in 3 columns (div left, center, right) and try to put the 3 images respectively as a background ...

    I`m on it to try it out right now.


Tags for this Thread

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
  •