Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member
    Join Date
    Oct 2009
    Posts
    40
    Member #
    20210
    I have this problem displaying the background images for div tags in dreamweaver. What i want is to have the background image scale to always match the size of the div tag. Anyone know how to fix this in dreamweaver or css?

  2.  

  3. #2
    Senior Member Hitch - CP's Avatar
    Join Date
    Jun 2009
    Location
    London
    Posts
    120
    Member #
    19164
    Hi Evenhumm,

    I'm not sure this is possible ...

    From what I am gathering you have a fixed image (say 500x500 for example), and want to be able to code this in the CSS so that the background (our 500x500 image) will automatically change size to fit the DIV?

    If you were to find a way to do this, I would not recommend it - if you happened to have a DIV that was larger than the image (even if this may seem unlikely) such a 700x700 in this example, then the background image would appear pixelated and would't look very good.

    Also if the DIV was smaller than the image, you would also see a problem - even though the image is being decreased in size (which if done in photoshop for example would be fine), when it is done like this it will tend to appear with sort of 'jagged edges' (at least from my experience) although I do not know the technical phrase for it.

    Overall I would suggest against doing this - others may disagree.
    Ali Hitch

    Portfolio & Tutorial Site
    www.alihitch.com

  4. #3
    Member
    Join Date
    Oct 2009
    Posts
    40
    Member #
    20210
    Okay, thx alot iŽll find another way then

  5. #4
    Senior Member paintingtheweb's Avatar
    Join Date
    Jul 2007
    Location
    Las Vegas
    Posts
    128
    Member #
    15503
    Well it's not possible to do this with a background image, however I've done it before a different way (It was an image that could be scaled niclely). It's been a while since I did it but I think I remember the basic idea. You'll have to modify it to fit what you need of course. And make sure the image scales nicely. I do agree though, this is usually not a great thing to do.

    Code:
    <html>
    	<head>
    		<style type="text/css">
    			#background{
    				position: absolute;
    				width: 100%;
    				height: 100%;
    				z-index: 1;
    				top: 0;
    				left: 0;
    			}
    			#background img{
    				width: 100%;
    				height: 100%;
    				z-index: 1;
    			}
    			#foreground{
    				position: absolute;
    				z-index: 10;
    				background: #fff;
    				width: 400px;
    				height: 400px;
    				top: 50;
    				left: 50;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="background">
    			<img src="background.jpg" />
    		</div>
    		<div id="foreground">
    			<p>testing</p>
    		</div>
    	</body>
    </html>


Remove Ads

Posting Permissions

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

Search tags for this page

dreamweaver fix image
,
dreamweaver fix image size
,
dreamweaver fixed images
,

dreamweaver pictures not fixed

,

dreamweaver set a fixed image size

,
fixed dreamweaver
,
how to fix an image in dreamweaver
,
static background image in dreamweaver
,
static background image size dreamweaver
,

what is a static image in terms of dreamweaver

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:12 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com