Sunday, 23 October 2011

Pictures with fixed size

Personally, I prefer this ones. Because you can be more creative.


The things you should take care of here:
- the size of your background pic
- position of the picture
- the size of your blog area

...well, all of this depends on the effect you'd like to achieve. We will use the following line to apply our picture to background:

background: url(YOUR PICTURE URL);

...replacing the part in red with the URL of your hosted picture..
We also need to specify the options for our picture. We have to tell Blogger:

- if it will repeat the pic or not:
background-repeat:no-repeat;
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;

- do we want our pic fixed (same picture when you scroll, example here), or the one that will "scroll" along:
background-attachment: fixed;
background-attachment: scroll;

- where will the picture be placed:
background-position:top center;
(you can also use 'top left', 'top right', 'center left', 'center center', 'center right', 'bottom left', 'bottom center', 'bottom right')

background-position:top center; x% y%
(here, specify the horizontal and vertical position, i.e. 110% 35%)

Here's the example. I have a picture, and I want to center it, I don't want it to repeat, I want it to be fixed (it will be like a frame around my blog). The code (CSS style) will look like this:

body {
background:#000000 url(
URL OF THE PIC) ;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top center;


...play with these options until you get it right...GOOD LUCK!

No comments:

Post a Comment