CSS help
Okay, so how do I adjust the size of the background image in css?
CSS help
Forum
» Programming & Design / Computers & Web Development
» CSS help
I don't know. Your best option is to shrink the image in Paint or some application and re-upload the new sized image.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
that's what I did, but I can't move, or resize it.
Well, you can technically move it with background-position.
#id{ background-image:url(picture url); background-position: some parameter; }
The parameter could be one of these:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
As for resizing, you might have to keep resizing it in an application and reloading it until it is of the correct size.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Guess and check ftw.
It can be done — anything attribute in the style="whatever: whatever;" can be applied to CSS. In your case, the height and width attributes can be used to adjust image sizes.
img { border: 5px solid #EDF; width: 100px; height: 40px; }
That code will make every image in your site have a pale-purple border, and be stretched to the sizes 100×40 pixels. Let it be known that if you specify a width variable without the height variable (or vice-versa), the unspecified variable will be automatically set to scale with the height.
You, however, want only the background image to have a set size. As Timothy said, you can't actually set the image size of background images (unfortunately). Maybe you could with javascript, but I don't know much about javascript at this stage in my life.
Good luck!
Ok, so say I have this picture:
 |
And I want it to be repeated along the X axis, with the top right and left corner's rounded. |
There's a creative solution; I'll have something when I get back home later today.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="top"> <h1>Header</h1> <p>Content</p> </div> </body> </html>
CSS:
html { background: #87adc4 url('background.gif') repeat-x; } body { background: url('corner-left.png') no-repeat; margin: 0; } div#top { background: url('corner-right.png') no-repeat top right; padding: 8px; }
Untested in most browsers – I haven't installed them yet since I last changed the OS. I will do that now.
Edit: It works in the latest versions of Opera, Firefox, and Safari, and in Internet Explorer 6.
#id{ background-image: url(http://macfire.wdfiles.com/local--files/files/BannerTileBackground.gif); background-repeat:repeat-x; -moz-border-radius-topright:3em; -webkit-border-top-right-radius:3em; -moz-border-radius-topleft:3em; -webkit-border-top-left-radius:3em; background-color:#87ADC4; /* This is optional if you want it to blend. */ }
At least this is how I might do it depending on what the id is. It won't curve in IE though.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Well, now it looks like:
On yours, Timothy, it wouldn't work.
As for weregoose, the right side wouldn't show up, and it showed a weird bar at the top.
Screenshot, please, as well as browser version? (Did you use the contents from the download link?)
Also, note the moz/webkit-specific properties in Timothy Foster's source, which will only work in Firefox/Safari (and their derivatives).
*slaps forehead* That'd be wikidot's fault – what I gave you would work perfectly on your desktop. There's nothing wrong at all with their implementation; I'm just not in the mood to integrate anything with their base stylesheets. So, try to get the RGB value for that gray box up there, search their code, and do something about it. That's where I would begin. As for the missing right corner, maybe you could figure out what is occupying that slot and write the CSS into that declaration instead.
/forum/t-155833/css-help#post-