How do I get a photo to the left/right outside boxes?

[felixfoto]

Hi,

I wonder how I get a photo at the left and/or at the right,
outside the photoboxes?
Like for example a signature-photo etc.
Thanx
/Jess

[dpnew]

Hi,

I wonder how I get a photo at the left and/or at the right,
outside the photoboxes?
Like for example a signature-photo etc.
Thanx
/Jess

The image outside the photoboxes is a 'background image'. That's similar to a background color like black, only an image is used instead of the color.

You need to add:

background-image: url(http://www.pbase/myimage/12345678.jpg);

to the body style. Make sure to add '.jpg' to the url of the image. You should also add a couple of things that determine how the image is displayed. Altogether it would look something like this:

body{
...
...
...
background-image: url(http://www.pbase/myimage/12345678.jpg);
background-repeat: no-repeat; [edited to add hyphen]
background-position: center left;

}

[ocicat]

Hi,
Thanks, but that did not work...
I got the photo repeated all over...
//Jess

[srijith]

Hi,
Thanks, but that did not work...
I got the photo repeated all over...
//Jess

it is always a good idea to check if your CSS sheet has the correct syntax. For example your sheet's syntax is wrong:
http://jigsaw.w3.org/css-validator/vali ... /49955.css

Look at the 4th line from the top... a ';' is missing. Try fixing that.

Since you have put

Code: Select all

background-repeat: no-repeat;


it should work.

[ocicat]

Hi,
When I corrected the wrong ";" I got an other colour at the background that I don´t want. (Want it to be black).
Now I tried a lot of variations but I can`t get the photo in.
I even created a new stilesheet with the vald css from that page you send me, then the page was totaly different, and no photo..

Feels like I will give up...
I want the page to look like it looks right now, with the photo.
In the editing-page, the photo show up. But not when I look at the gallery.

//Jess

[dpnew]

Hi,
When I corrected the wrong ";" I got an other colour at the background that I don´t want. (Want it to be black).
Now I tried a lot of variations but I can`t get the photo in.
I even created a new stilesheet with the vald css from that page you send me, then the page was totaly different, and no photo..

Feels like I will give up...
I want the page to look like it looks right now, with the photo.
In the editing-page, the photo show up. But not when I look at the gallery.
//Jess

Give up??!! If you are willing to stick with it, and you have the time, you can do it.

If you can see your background image on the preview page, and the background color is the same, it sounds like you made the correct changes to the stylesheet. However, after you make changes to your stylesheet, you also have to get pbase to update the style sheet for your gallery, and that's not always easy to do. Just because the background image shows up correctly on the preview page doesn't mean that stylesheet is assigned to your gallery yet. To get the stylesheet assigned to your gallery, try these steps:

1) Get back to the gallery that has the style sheet you changed.
2) On the top of the page click on "edit gallery".
3) If you created a new style sheet, next to where it says "style sheet" you have to switch to the new style sheet
4)Click on the "Update Gallery" button. I think that's necessary to 'awaken' pbase so that pbase will make the changes.
5)On the top of the page, click on "Display Gallery". Then, you have to realize, the background image may take some time to load. On my computer the gallery loads first with no image, and therefore it appears as if the image is missing, but it is actually loading at that point, and it just takes a little longer to be able to see it. Check the status bar on your browser to see if something is loading--you should see a bar getting progressively longer. In order to prevent long load times for the background image, you need to use an image with a small file size, which means you need a small image or an image with very few colors.
6) If that doesn't seem to work, click "Refresh" on your browser.

You can also choose a different position for the image by changing:

background-position: center left;

You can change 'center' to top or bottom, and you can change 'left' to right or center.

[ocicat]

Nope...
that don`t work.

http://www.pbase.com/ocicat

It is a photo that I put at the right bottom, but it doesn`t show.
//Jess

[dpnew]

Nope...
that don`t work.

http://www.pbase.com/ocicat

It is a photo that I put at the right bottom, but it doesn`t show.
//Jess

Please post your entire style sheet, and we will get to the bottom of this. You said earlier:

Thanks, but that did not work...
I got the photo repeated all over..

...so, you got the backgroud to appear then, it just got repeated over and over, which is the default way a background image gets displayed. You make it appear only once using this line:

background-repeat: no-repeat;

Uh, oh. I see an error in the code I posted earlier . I posted

background-repeat: no repeat;

and it should be:

background-repeat: no-repeat;

Note the hyphen. That error would cause the statement to be ignored and so the background image would 'tile' across the background. I'm going to edit my earlier post, so someone else doesn't get caught by that error.

One thing that is good to do is 'validate' your CSS. Before you add some CSS make sure there aren't any errors by going here:

http://jigsaw.w3.org/css-validator/

You can paste the CSS lines in the bottom text box, and the validator will indicate any little errors like missed hyphens or other punctuation problems. As an example, if you paste this code:

body{
background-repeat: no repeat;
}

it will let you know there is an error with 'no repeat'.