Fucking FAILURE! - Shad0w
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Fucking FAILURE! - Shad0w
 
HomePortalLatest imagesRegisterLog in
Top posters
shad0w
[CSS] BG Image [TUT] I_vote_lcap[CSS] BG Image [TUT] I_voting_bar[CSS] BG Image [TUT] I_vote_rcap 
rdwuestewald
[CSS] BG Image [TUT] I_vote_lcap[CSS] BG Image [TUT] I_voting_bar[CSS] BG Image [TUT] I_vote_rcap 
Crush Combat
[CSS] BG Image [TUT] I_vote_lcap[CSS] BG Image [TUT] I_voting_bar[CSS] BG Image [TUT] I_vote_rcap 
banksy
[CSS] BG Image [TUT] I_vote_lcap[CSS] BG Image [TUT] I_voting_bar[CSS] BG Image [TUT] I_vote_rcap 
Kewley
[CSS] BG Image [TUT] I_vote_lcap[CSS] BG Image [TUT] I_voting_bar[CSS] BG Image [TUT] I_vote_rcap 
Ashley
[CSS] BG Image [TUT] I_vote_lcap[CSS] BG Image [TUT] I_voting_bar[CSS] BG Image [TUT] I_vote_rcap 
Anthony
[CSS] BG Image [TUT] I_vote_lcap[CSS] BG Image [TUT] I_voting_bar[CSS] BG Image [TUT] I_vote_rcap 
Inix
[CSS] BG Image [TUT] I_vote_lcap[CSS] BG Image [TUT] I_voting_bar[CSS] BG Image [TUT] I_vote_rcap 
mitch
[CSS] BG Image [TUT] I_vote_lcap[CSS] BG Image [TUT] I_voting_bar[CSS] BG Image [TUT] I_vote_rcap 
dukemaster95
[CSS] BG Image [TUT] I_vote_lcap[CSS] BG Image [TUT] I_voting_bar[CSS] BG Image [TUT] I_vote_rcap 
Who is online?
In total there are 3 users online :: 0 Registered, 0 Hidden and 3 Guests

None

Most users ever online was 29 on Mon Aug 14, 2023 12:16 pm

 

 [CSS] BG Image [TUT]

Go down 
AuthorMessage
shad0w




Number of posts : 173
Points : 238
Reputation : 0
Registration date : 2009-03-18
Location : 127.0.0.1

[CSS] BG Image [TUT] Empty
PostSubject: [CSS] BG Image [TUT]   [CSS] BG Image [TUT] EmptyThu Mar 19, 2009 7:45 pm

In the last tutorial i showed you have to do text and background colors.

In this one i will teach you how to put in a background picture and do some cool things to it.

First we are going to get outselfs a picture. You can either make one yourself in Photoshop or Paint or wherever you like, or we can download one, but be careful of copyrights.
Make a new folder in you website directory and call it Pictures. Save your picture there and call it picture.gif if its a drawing or picture.jpeg if its a more detailed picture, cause GIF contains less colors than JPEG it loads faster on your page.

Go to your CSS document and write in the <body> section:

body {
background-color: #FF0000;
background-image: url("pictures/Picture.gif");
}

h1 {
color: #CC9900;
background: #00000;
}

Where "pictures" is the folder you created and "picture.gif" is the image.
If you didn't make a new folder just remove the "pictures/" so it will look like this:

background-image: url("Picture.gif");

I used GIF as an example you can change that yourself.

Now we are using your desired picture as a background on our page, GRATZ .
Lets go correct some of the things we like, for example we can make sure the image doesn't repeat
itself all over the site by adding:

body {
background-color: #FF0000;
background-image: url("pictures/picture.gif");
background-repeat: no-repeat;
}

h1 {
color: #CC9900;
background-color: #000000;
}

we can also only make it repeat Horizontally by adding background-repeat: repeat-x;
or Vertically by saying: background-repeat: repeat-y; or make it repeat both vertically and horizontally
by writing: background-repeat: repeat;
And remember the ; at the end.

We can also lock the image to the background by saying:

body {
background-color: #FF0000;
background-image: url("pictures/picture.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
color: #CC9900;
background-color: #000000;
}

That makes sure the image doesn't scroll with the page when you scroll down. We can also say:
background-attachment: scroll; and that makes the image follow the page when you scroll up and down.


And the last thing we will be learing is how to place a background image where we want on the site.
By default the image will be placed in the top left cornor of the screen, lets change that.

There are three different types of coordinates: Percent:% Centimeters:cm and Position:top,left,right,bottom.
I will show you three different examples, first:
Background-position: 2cm 2cm; the image is positioned 2 cm from the left and 2 cm down the page
Background-position: 50% 25%; the image is positioned centrally and one fourth down the page
Background-position: bottom right; the image is positioned in the bottom-right corner of the page
And now it looks like this:

body {
background-color: #FF0000;
background-image: url("pictures/picture.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

h1 {
color: #CC9900;
background-color: #000000;
}

Go try it yourself and see how it looks.


Now at the very end we can make all this code a bit smaller and manageble, we will compile all the code into one single line:

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

And the orders goes as this: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
and if a property is left out it just sets it to default.


Thats all for now. Hope you learned something in this second lesson of CSS.
I really hope you will either learn something and give good feedback or just comment on it
Back to top Go down
 
[CSS] BG Image [TUT]
Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Fucking FAILURE! - Shad0w :: Shad0w's Computer Section :: Coding :: Web-
Jump to: