Background

I'm trying to change wrapper in my skins to a background image. I can change colors fine and add a background image. But the background will not even out with both side of the main body. Seems like it's not large enough. I need to know what are the right dimensions for a background image. And also so it will stick so the image won't break up/ mess up when someone zooms in and out.

I'm editing screen.css

I might only understand what I wrote below but...
< image | Top Header | image >
< image | Body | image >
| Footer |
 

cajkan

Active Member
Hello webaddictsdesigns,

If im not wrong, you want to add side ads wich standard formats are 120x600 and 1600x600 px.

For background you must edit screen.css

Code:
#wrapper {
border: 1px solid #ddd;
margin: 0 auto 40px auto;
padding: 5px;
width: 950px;
text-align: left;
background: #fff;
box-shadow: 2px 2px 15px #d8d8d8;
border-radius: 5px;
background: url(../FOLDERNAME/IMAGENAME.png) repeat;
}
The wrapper code is from your signature http://topwebs100.com

If you still got problems, feel free to give us more information.
 
So this will fill all the black on my background besides the footer? http://topwebs100.com I'd like the background to expand when new sites are listed. Like my background image to have some graphics on the right and left of the main body section and some image at the top where the header is (not the logo, behind it). And also if I choose to make the list look like this http://www.arena-top100.com/ meaning fills the whole screen. With no ads on the right side.
 

Basti

Administrator
Staff member
First of all, do not edit screen.css, use user.css, thats what its there for. Never ever screen.css or you will have trouble updating the skin. And html edits go into the child folder ( copy the file you want to edit into there )

What you want is the body from what i see
so for example

Code:
body {
  background: #000 url(img/IMAGENAME.png) top center no-repeat;
}
What this does is center the bg image at top. dont repeat it
Then it goes down as much as its height is and then use the color code to fill in the rest of the page
 
Top