PDA

View Full Version : adding images using my styles.css file, instead of style=""



needsomehelp
Mar 10th, 2010, 12:34 PM
I wish to add images using my styles.css file.

i have looked around but all i see is the <img src="..."> method

abduraooft
Mar 10th, 2010, 12:37 PM
background-image (http://www.w3schools.com/css/pr_background-image.asp)?

needsomehelp
Mar 10th, 2010, 12:48 PM
background-image (http://www.w3schools.com/css/pr_background-image.asp)?

ah great that worked, but it is for a div and it is too big. how do i get it either to auto resize to the div dimensions or resize using width and height?
i just tried to add in..



#logo { float: left; background-image:url(logo.png); width: 136px; height: 139px; }

but this did not work

VIPStephan
Mar 10th, 2010, 02:17 PM
This is not possible. A background image is as big as it is and stays as big as it is. Resizing is only possible with actual HTML images.

Major Payne
Mar 12th, 2010, 02:18 AM
CSS 2.1 does not support resizing of background images. That support will be in CSS 3.0. There is some CSS trickery that can be done when the image is used as a page's background that will cause the image to always appear full screen. Maybe you can play with the code and see if you can get it to work as you need it:

Background to Fit Screen II: http://paynelessdesigns.pastebin.com/f760990b
http://www.cssplay.co.uk/layouts/background
http://www.scriptdungeon.com/freejavascript/freescripts1284
http://css-tricks.com/perfect-full-page-background-image/

DaiLaughing
Mar 12th, 2010, 07:43 AM
Why don't you want to use the proper HTML/XHTML tag IMG? That is what it is for. CSS is for formatting not for defining content and images are content. Place the image using XHTML and then style it using CSS. The XHTML will get the image on the page and the CSS will let you size and position it.

VIPStephan
Mar 12th, 2010, 11:45 AM
You still have to consider if the image is of actual meaning worth including as HTML image or just decoative which has to be included as background image. In case of a logo (as I assume from the CSS of the OP) we can use an HTML image here.

Major Payne
Mar 12th, 2010, 12:16 PM
ah great that worked, but it is for a div and it is too big. how do i get it either to auto resize to the div dimensions or resize using width and height?
i just tried to add in..



#logo { float: left; background-image:url(logo.png); width: 136px; height: 139px; }

but this did not workYou didn't give your div dimensions. Resizing any image requires that you always keep in mind the aspect ratio (http://en.wikipedia.org/wiki/Aspect_ratio) of the image. Being a logo, I imagine you want the image to fit into the height of your div so you need to re-size the image in a graphics editor to the proper width for the div size you are using.

Your logo has close to a 1:1 width to height aspect ratio (1:1.022). If the div size is smaller than 136 X 139, say, 100 X 102:



div#logo {
width: 100px;
height: 102px;
float: left;
background:url(logo.png) no-repeat center left scroll; }


Re-sizing that logo to 100px wide by 102px height will allow it to show completely. Discounting any problems with other coding that may add padding/margin. The HTML is just:


<div id="logo"></div>

which will be floated left. Be sure to clear you floats when required.