Swingular - Swingers

Swingers Forum - New Forum Background Examples

line
Previous Post Next Post
1

This is an example of a post with a custom background.

The background image:

http://i288.photobucket.com/albums/ll175/simplychicblogs/pinkflowers.jpg

Here is the code:

Code:

[css]
background-image:url('http://i288.photobucket.com/albums/ll175/simplychicblogs/pinkflowers.jpg');
color:#FF3366;
padding-left:160px;
[/css]
Another Example

Code:

[css]background-image:url('http://i288.photobucket.com/albums/ll175/simplychicblogs/pinkandblackmodflower-1.jpg'); color:#FFF; padding-left:220px;[/css]


You can get more girly background images like these here:

http://simplychicblogs.blogspot.com/

and some for guys and girls here:

http://www.thecutestblogontheblock.com/free-backgrounds


You can even center a background image like this.

Code:

[css]background-image:url('http://i342.photobucket.com/albums/o401/Thecutestblogontheblock/chocolatehugscopy.jpg'); color:#FFF; padding-left:50px;background-position:center[/css]

And another.

Code:

[css]background-image:url('http://www.scrapmyblog.com/sites/default/files/images/swirls%20and%20curls.jpg'); color:#000; padding-left:55px;background-position:center[/css]


There's all kinds of cool things you can do.

For the guys!

Code:

[css]background-image:url('http://i201.photobucket.com/albums/aa65/pbaitson/wallpapers/Butterfly_Wallpaper_by_ArtemisSun.jpg'); color:#FFF; padding-left:5px;background-position:top right;[/css]


You can also right align the image so the right side of the image appears to the right.

If you wanted to keep the text within the black area, you could always add a padding-right:465px to the code as well. Take a look at the example below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus urna, iaculis quis euismod non, rutrum a nisl. Vivamus consectetur tempus semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin orci tellus, malesuada nec malesuada at, pharetra sed enim. Donec vulputate semper ligula a placerat. Etiam porttitor, nisl a adipiscing adipiscing, sapien nulla tempus massa, quis malesuada leo odio rutrum lectus. Etiam in nisl at lorem gravida accumsan. Morbi ullamcorper mi nec nisl convallis fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nullam blandit congue tincidunt. In dolor ante, tristique non cursus a, dapibus ac eros. Phasellus quis neque vel tellus aliquam euismod. Fusce sodales fringilla risus id porttitor. Vestibulum pharetra dui ut libero pellentesque eget lacinia ipsum euismod. Vestibulum dignissim dolor vitae dolor accumsan consequat.

Phasellus laoreet bibendum elementum. Maecenas tempor vulputate lacus, quis dignissim erat lobortis id. Cras ac blandit mi. Quisque elementum tempus erat. Integer ipsum lectus, tincidunt blandit rutrum a, volutpat vitae mi. Vestibulum dictum blandit lectus vel auctor. Vivamus elit nulla, porta at mollis in, feugiat sit amet eros. Nulla ac odio ac lectus dapibus varius id ac augue. Nullam semper aliquet porta. Vivamus dignissim imperdiet auctor. Aliquam erat volutpat. Vestibulum hendrerit placerat vestibulum. Aenean sodales tempor mauris sed pulvinar. Vestibulum nec diam augue.

Etiam ac urna sed arcu tempor adipiscing. Nam ut nisi nisi. Nullam vehicula felis vitae elit blandit gravida. Sed eget nibh velit. In vestibulum sapien elementum eros semper congue. Aenean pretium, leo a accumsan condimentum, tortor tortor pulvinar diam, eu tempus ipsum turpis volutpat lacus. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras tincidunt lacus sem. Praesent mollis justo vel turpis venenatis eu adipiscing turpis accumsan. Curabitur nunc ipsum, porta eget lacinia eget, volutpat at turpis. Donec vestibulum pulvinar nunc a tincidunt. Maecenas sollicitudin vehicula erat a scelerisque.

Here's a Hello Kitty Example!

The background on this one is right aligned.








Here is the code:

Code:

[css]background-image:url('http://images1.fanpop.com/images/photos/2400000/Hello-Kitty-hello-kitty-2427687-1024-768.jpg');font-size:16px;color:#8e0b60;background-position:right[/css]

Here's one for football fans.

Of course, I'm a Raiders fan so.... And yes, I know we suck!

You can thank Al Davis.

Code:

[css]background-image:url('http://www.sportsteamlayouts.com/layouts/nfl-Oakland_Raiders.jpg');font-size:16px;color:#000;padding-left:250px[/css]

And for all of us Jazz fans!!

And no, we don't suck!!!


Code:

[css]background-image:url('http://farm3.static.flickr.com/2483/3636264403_5452451f8f_o.jpg');font-size:16px;color:#121b56;padding-left:200px[/css]
i'm just wondering who exactly you were thinking about when you thought someone would love a hello kitty background. :P

But of course! I see you started pressing enter to avoid the right side of the image. You can add the following code to keep your text within the left side.

Code:


[css]background-image:url('http://images1.fanpop.com/images/photos/2400000/Hello-Kitty-hello-kitty-2427687-1024-768.jpg');font-size:16px;color:#8e0b60;background-position:right;padding-right:220px[/css]


I just added the padding-right:220px. You can change the 220 to whatever you want to adjust it correctly.


.~Admin~.
1