ngreenwood6 Posted July 18, 2009 Share Posted July 18, 2009 Hello all, I am trying to create a fluid width page. I have the max width set to 1280px and my image is 1280px. The problem is when it is smaller than that it cuts off the right side (rounded). Is there a way to resize the image when the page is resized? I saw a few articles but none of them seemed to apply. I am using the background-image property in css to set the background image. Any help is appreciated. Quote Link to comment Share on other sites More sharing options...
Hybride Posted July 19, 2009 Share Posted July 19, 2009 You can't re-size images, you'll have to use an image editor to do so. Quote Link to comment Share on other sites More sharing options...
peachsnapple Posted July 20, 2009 Share Posted July 20, 2009 I am not completely understanding your question. But yes the image can be resize, but which one are you talking about? Are you interested in having the background resize or the image on top of it resize? And what is the exact measurements that you want the size s 1280 by what? Because that is how you will resize your image. Coming from a bigger image to a smaller one is easy. You won't lose pixel. Starting from a smaller image to a bigger image is awful. It will be fuzzy and pixelated. Let me know exactly in detail what you are trying to do som I can try my best to help you. And you won't need an editor, It is has easy as putting for example for an image on the top of the background <img src="file:///C|/wamp/www/Hair_Business_Website/Wigs/MiddleKelly.jpg" width="150" height="185" alt="pic" /> the height and width dimensions. But if you are talking about resizing your background picture, Hybride is right you have to have a photo editor like photoshop or the other free ones, I don't know them by heart to crop down your photo for the background image. But there is two way that you can get by not resizing your back ground image you can center it by doing this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { margin: auto; background-image: url(file:///C|/wamp/www/Hair_Business_Website/WeftHair/HairColorChart.jpg); background-position:center; } --> </style></head> <body> </body> </html> You can also put it in a floating div tag like this and resize the height and width to your liking <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { margin: auto; background-position:center; } #background { position:absolute; left:42px; top:35px; width:1365px; height:807px; z-index:1; background-image: url(file:///C|/wamp/www/Hair_Business_Website/WeftHair/HairColorChart.jpg); } --> </style></head> <body> <div id="background"></div> </body> </html> I hope one of these help you Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.