MyBB Community Forums

How do i a background behind the container and how do i add a background to the container.

In your global.CSS:

For background behind the container:

body {
background: #efefef url(image/path.png) top left repeat;

For background in the container:

#container {
background: #efefef url(image/path.png) top left repeat;

Use the parameters after the image path as per your requirement.

The short guide:

Applying a Background Image:

If the width of your Board is shrink-ed down or the board is semi-transparent and the background is exposed then applying a background image is decent.

Open your global.css and find at the very beginning:

body {
background: #e4e4e4;
.
.
}

Syntax of changing the line is:
background: #e4e4e4 url(your/image/path.png) center repeat;

Now lets understand the syntax in detail:



(A ) The Color Hex Value (optional but good to declare):

This is the color of your background. If your background image is not covering the background completely, or if it fails to load then this color will be visible in background.
Be sure setting your background color matching with your background image, else it will look odd.

(B) The URL to your Background Image (required while using background image):

This is the path where your background image is. The path has to be typed within the brace of url( );.
Note that:
If the background image is located in your MyBB image folder then its good to start the image path from the image folder location, like this:

url(images/icytheme/icyback.jpg);

If the background image is hosted externally then you have to input the complete image path url, like this:

url(http://some.image.host/images/icytheme/icyback.jpg);

© The Image Position:
(there are many more value types, we are considering only basic type)

This syntax is self explanatory. You can easily guess where your image is going to be placed.
The keywords are:
left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom



You can swap the keys, means left top & top left are same.
If only one keyword is specified the other will be considered as "center".

(D) Repeating Image Background:

repeat: will be repeated vertically as well as horizontally (default).
repeat-x: will be repeated only horizontally
repeat-y: will be repeated only vertically
no-repeat: will not be repeated



Make sure to include a ';' at the end of the code line.

Thanks effone while i was waiting fro a reply i figured out the background now i am gonna do the container

---

What size should i make the background so it doesn't repeat.

(2013-01-05, 06:53 PM)Peetter123 Wrote: [ -> ]hello,

I am new to website development, but i just now created my own website in dreamweaver but faced so many problems can any tell me how can i brighten some part of any text which i want to means that text should be highlighted.

http://www.web-source.net/web_design_tip...Oh49YnjlOI

Im trying to learn how to make a theme how do i add rounded corners to the container of the default theme forum.

In #container add

#container { 
border-radius: 3px;
}

Change the 3px to any radius you want, it means how round they are.

#container {
border-radius: 6px;
width: 80%;
background: #ffffff;
border: 1px solid #e4e4e4;
color: #191919;
margin: auto auto;
padding: 20px;
text-align: left; /* IE 5 fix */
}


Like that?

---

Because when i add it like that nothing happens

(2013-01-08, 12:34 AM)FullMetalBabe Wrote: [ -> ]In #container add

#container { 
border-radius: 3px;
}

Change the 3px to any radius you want, it means how round they are.

Use this so it works in all web browsers

#container {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

#container {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 80%;
background: #ffffff;
border: 1px solid #e4e4e4;
color: #191919;
margin: auto auto;
padding: 20px;
text-align: left; /* IE 5 fix */
}

Nothing happens when i add that.

Your width might be too big for you to notice it.