www.webdeveloper.com
Results 1 to 6 of 6

Thread: Table Cell BG image, No Repeat?

  1. #1
    Join Date
    Mar 2014
    Posts
    3

    Cool Table Cell BG image, No Repeat?

    I am looking to find the command if it can be done to help with this.

    I am building a HTML with tables and using Dreamweaver CS3 as my tool.
    I want to make a new copy of a site that will be only 1000px wide to be used as what will be there for users of devices other than a laptop or home computer that have smaller screens.

    Here is the line of code I am looking at:

    <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="image/Space_Needle-3.png">

    note: the image is 1000x450 pixels in actual size.

    This will be the base table of the page as I will add another table inside the table above, and what I want to do is have the background image in the above line of code to NOT repeat, so it will only show once as the BG of the new table over the top of it. As the inside table will be stretching the base table down below the background image of the base table at 1000x450.

    I have tried a few things and don't seem to be able to get it to work, or maybe you can't use a no-repeat inside a table cell, I am hoping that that is not the case. But that is why I came here to ask one of those Dumb Questions that just needed to be ask to find out!

    If you know something that will work please post with the addition to my code above so I can see and get it right . . . .

  2. #2
    Join Date
    Mar 2014
    Posts
    3
    W0W! 119 views in 4 hours since I first posted this and no thoughts or ideas posted yet!

  3. #3
    Join Date
    Mar 2012
    Posts
    1,516
    Try amending to:

    <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url('image/Space_Needle-3.png') no-repeat;">

  4. #4
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Is the base table meant to be purely for organizing the layout of the site, such as a substitute for nested <div> elements? If so, why not just try something like this. The CSS for the table will make the background somewhat transparent so any text is more readable but if you don't want it, just delete that part.

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    			#mainDiv
    			{
    				background-image: url (Images/mybackgroundImage.jpg);
    				background-repeat: no-repeat;
    			}
    			
    			.myTables
    			{
    				opacity: 0.5; 
    				filter: alpha(opacity = 50); <!-- helping out IE --> 
    			}
    		</style>
    	</head>
    	<body>
    		<div id = "mainDiv">
    			<table class = "myTables">
    				<!-- the inner table mentioned in your post --> 
    			</table>
    		</div>
    	</body>
    </html>

  5. #5
    Join Date
    Mar 2014
    Posts
    3
    Thank You very much jedaisoul that worked just fine for the resualts I was trying to get.

    I had tried changing my command but for some reason I could not get it just right and to work, I think it was the quote inclosers around the image link that I was forgetting.

    As it is working fine right now and I am getting the results I was looking for.
    I am not a code driven designer and am a self taught by trial & error, as I use Dreamweaver mostly because it is a WYSIWYG type program as well and I do ALL my designing in the WYSIWYG mode and very seldom switch to the code view unless I need to for something like this problem I was having.

    AGAIN! Sir Thanks for your reply with the answer I was looking for.


    P.S.
    Error404, I am also taking note of your suggestion for use in other designing as well, THANKS!

  6. #6
    Join Date
    Mar 2014
    Posts
    24
    If we want to be no repeat image the we use no repeat function for exit the repeat the image. #mainDiv
    {
    background-image: url (Images/mybackgroundImage.jpg);
    background-repeat: no-repeat;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles