Making a picture a background in CSS, but furthermore changing the size of the pic by using code. Possible?

Hello, What I would like to do is turn a picture into a background image, but say the picture is 1000, 1500 I want to be able to use some code to automatically make the picture say 1024 by 780 can I do this? how so? Even more If the window is small can I make it so the picture is fully displayed modified so that it is the full thing but scaled down and as the window is resized, have the background image resized?



Thanks,

BrianMaking a picture a background in CSS, but furthermore changing the size of the pic by using code. Possible?
After much research, and the great input of other posters who have visited this need in the past, I think I've figured out another way to resize user pictures in nodes and comments. (this is intended for 4.7 only)



We SHOULD be able to resize user pictures using CSS. This offloads the task of resizing to the user's browser, rather than the Drupal server. Unfortunately we can't resize user pictures because of the way Drupal themes them.



Drupal wraps the img with a div, having the class of .picture. If we try to add a size attribute to this class, it fails, because the default size of the img object nested inside the div takes precedence. What we need is a class on the img itself, then we can resize it in style.css.



To do this, we need to override the Drupal function that formats the user picture. This function is found in the profiles module and is called theme_user_picture(). Since this is a themable function, we can override it in the template.php file in the default theme directory. This new function moves the .picture class from the div that wraps the image to the img object itself.



Here's the new function to add to template.php:





%26lt;?php

function phptemplate_user_picture($account) {

if (variable_get('user_pictures', 0)) {

if ($account-%26gt;picture %26amp;%26amp; file_exists($account-%26gt;picture)) {

$picture = file_create_url($account-%26gt;picture);

}

else if (variable_get('user_picture_default', '')) {

$picture = variable_get('user_picture_default', '');

}



if (isset($picture)) {

$alt = t('%user\'s picture', array('%user' =%26gt; $account-%26gt;name ?

$account-%26gt;name : variable_get('anonymous', 'Anonymous')));



//Pass class attribute to theme function

$attributes = array('class' =%26gt; 'picture');



$picture = theme('image', $picture, $alt, $alt, $attributes, false);

if (!empty($account-%26gt;uid) %26amp;%26amp; user_access('access user profiles')) {

$picture = l($picture, ';user/$account-%26gt;uid';, array('title' =%26gt;

t('View user profile.')), NULL, NULL, FALSE, TRUE);

}



return ';$picture';;

}

}

}

?%26gt;



Once this is done, the .picture class will be attached to the img object. Any existing .picture formatting will still function properly. At this point, you should not notice any changes in your formatting.



To change user picture size, add the width attribute to the .picture class in style.css. (note, you can use ems rather than px for the width if you'd like your user picture to resize with font size)





.node .picture {

border: 1px solid #ddd;

float: right;

margin: 0.5em;

width: 35px;

}



Or whatever width you want. A height attribute isn't necessary cause it will default to auto.



That's it! Regardless of the original size of your user's picture, you'll be able to resize it to fit your needs. You can allow larger user pictures which will display better if you use the author information block.



Some people want a different size user picture on nodes or blogs vs. comments or forum posts. If so, you can also create custom sizes for each node type. How? By creatiing a nesting CSS definition. The only problem is, the default node.tpl.php (in bluemarine at least) does not apply a unique CSS class to the node. All nodes are wrapped with a div with the class of .node (or node-sticky)



To fix this situation, create a tpl.php file for each node type you want to format uniquely. (for example, node-blog.tpl.php)



Then alter the beginning of the code to:





%26lt;div class=';node node-blog%26lt;?php if ($sticky)..........



You now have a unique class just for node-blogs. Now you can create a new contextual CSS definition in style.css similar to this:





.node-blog .picture {

border: 1px solid #ddd;

float: right;

margin: 0.5em;

width: 35px;

}



Only .picture classes nested within .node-blog classes will be affected by this attribute.



My regular nodes now have very small avatars, my forum posts larger, and the author information block larger still.



NOTE: by uniquely identifying node types with their own class, you can easily apply custom formatting to different node types by using the contextual selector CSS definition type.Making a picture a background in CSS, but furthermore changing the size of the pic by using code. Possible?
S Possible