Background is resizing itself. Plz Help

[faultless_images]

Hello all, i am new here.

I have started trying to make my own CSS with one of my images set as the background.

The only problem is though, is that the picture is automatically resizing itself and the picture does not fill up the whole screen.

Does anyone know the code to stretch the picture to take up the whole of the screen please as its starting to do my head in.

I have reverted back to another CSS for now until i can work it out.

Thanks

http://www.pbase.com/faultless_images

[dang]

It would help if you'd make a hidden gallery to work on, add the background and post the URL here so we can have a look. Also, past the CSS you're using for the page so we can look it over. The "View Source" CSS isn't the same as what you'll use.

[faultless_images]

Hi Dang,

I have applied the problematic CSS to my root gallery, i can post the CSS code if that would be better.

Thanks

ps.

Does anyone know how the code to apply a border around my slideshow ?

[faultless_images]

Sorry, i have just read your post properly, here is the code

FAULTLESS_IMAGES_2007
/*
Style Sheet
by Faultless_Images
http://pbase.com/faultless_images
A modified version of Thierry_Malavals CSS
http://pbase.com/thierry_malaval
::::::::::::::::::::::::::::::::::
*/


a, a:link,a:visited,a:active {
color: #FF0000;
text-decoration: none;
}
a:hover {
color: #FFD700;
text-decoration: none;
}


IMG.thumbnail {
VERTICAL-ALIGN: middle;
BACKGROUND-COLOR: #999999;
horizontal-align: middle;

/*shadow of the 1st frame*/
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
filter: progid:DXImageTransform.Microsoft.Shadow(color="#101010",Direction=135,Strength=4);
border: #999999 2px solid;
}

a.thumbnail {
border: #505064 1px solid; /*ou double ou ridge*/
DISPLAY: block;
BACKGROUND: #23002E;
background-image: url(http://i46.photobucket.com/albums/f143/ ... G_0062.jpg);
MARGIN-BOTTOM: -16px;
HEIGHT: 185px;
WIDTH: 170px;
PADDING-TOP: 10px;


/*shadow of the 2nd frame*/
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
filter: progid:DXImageTransform.Microsoft.Shadow(color="#101010",Direction=135,Strength=4);
border: #999999 0px solid;
}

a.thumbnail:hover {
border: #DCDCDC 0px solid;
background-image: url(http://i46.photobucket.com/albums/f143/ ... G_0062.jpg);

}


BODY {
MARGIN-TOP: 0px;
BACKGROUND:
url(http://i46.photobucket.com/albums/f143/ ... G_0062.jpg) ;
background-repeat: no-repeat;
background-attachment: fixed;
SCROLLBAR-FACE-COLOR: #FFD700;
SCROLLBAR-HIGHLIGHT-COLOR: #23002E;
SCROLLBAR-SHADOW-COLOR: #646464;
SCROLLBAR-3DLIGHT-COLOR: #996633;
SCROLLBAR-ARROW-COLOR: #FF0000;
SCROLLBAR-TRACK-COLOR: #646464;
SCROLLBAR-DARKSHADOW-COLOR:
}



}
div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h1,h2,h3,h4,h5,font, center {
border: 0px;
color: #FF0000;
font: 16px verdana, arial, sans-serif;
}
font {
margin-left: 4px;
margin-right: 4px;
width: 170px;
display: block;
color: #FF0000;
font: 16px verdana, arial, sans-serif;
letter-spacing: 0px;
}
h1, h2 {
border: #B8860B 1px dotted;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 100%;
display: block;
background: #000000;
color: #FFD700;
font-size: 16px;
font-weight: bold;
letter-spacing: 4px;
text-align: right;
height: 21px;
position: relative;
filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#FF0000',endColorstr='#0000FF');
}

h3 {
border-bottom: #FF0000 2px dotted;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
padding: 2px;
width: 400px;
display: block;
background: #000000;
color: #FFD700;
font: 16px;
font-weight: normal;
letter-spacing: 0px;
text-align: center;
}
h5 {
padding-left: 2px;
width: 150px;
display: block;
color: ;
font-size: 16px;
font-weight: normal;
filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#141414',endColorstr='#2D2D2D');
}
img{
border: #FF0000 1px none;
}
img.thumbnail {
border: #FF0000 1px solid;
margin: 0px;
padding: 0px;
background: ;
vertical-align: middle;
}input {
border: #FF0000 1px solid;
}
table.thumbnail {
width: 10%;
}
td {
border: 1px none;
background: none;
border-collapse: collapse;
empty-cells: show;
}
td.message_body {
border-bottom: 1px dotted;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
display: block;
background: transparent;
}
.caption {
color: #FF0000;
font-size: 16px verdana, arial, sans-serif;
font-style: italic;
}
.display {
border: #FF0000 1px solid;
margin-top: 1em;
background: #FF0000;
filter:
progid:DXImageTransform.Microsoft.Shadow(color="#000000",Direction=135,Strength=5);
}
.lid{
background: transparent;
color: #FF0000;
font: 14px verdana, arial, sans-serif;
text-decoration: none;
}
.message_body {
margin: 5px 5px 10px;
color: #FFD700;
font: 14px verdana, arial, sans-serif;
}
.sb{
background: transparent ;
color: #FF0000;
font: 14px verdana, arial, sans-serif;
text-decoration: none;
}



BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }



BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }



BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }

[dang]

Okay, as you already know... the section of code to add the background is in this section:

Code: Select all


BODY {
MARGIN-TOP: 0px;
BACKGROUND:
url(http://i46.photobucket.com/albums/f143/naf536/Faultless_Images/IMG_0062.jpg) ;
background-repeat: no-repeat;
background-attachment: fixed;

First question I have is why you'd want to link the image from photobucket, since that increases download time for viewers? I'd really suggest adding it into a "hidden" gallery on your Pbase site for use here, so there's less chance of a broken link from an outside source.

As far as stretching the image, I'm not aware of a way (maybe someone else knows some way though). You can resize it, and then lower the kilobytes, since it's not a detail shot, and it shouldn't degrade too much for background use.

Other options would be to make it "repeat" in this section of code:

Code: Select all

background-repeat: no-repeat;

This way, it would automatically fill the screen regardless of the screen resolution of the viewer. If you resize it, you'd probably want to center it instead and then anyone using a high resolution would see a boarder around it.

Now with this said...

The problem I see with using repeat is that all the lines aren't going to converge, which could be distracting. And if you resize it, some people will have a long scroll bar at the bottom of your screen when using low res. So, there's not an easy answer when using this type image.

Another option:
Have you considered using a stripe of it as a banner along the top, above your slide show instead? It might work nicely with your gallery name added on top?

Hopefully, someone else can advise you a way to stretch it, which I'd like to know too, if there's a way.

[faultless_images]

Thanks for your reply Dang,

I have only used photobucket as a makeshift whilst i try and work out what i am doing with the CSS as it gives me the codes at a single click of a button, something i have not worked out how to do in Pbase just yet.

You mentioned i should try using a stripe of it as a banner along the top, above my slide show instead? It might work nicely with your gallery name added on top?

How would i go about trying this ?

Sorry for all the questions

[dang]

Hey,
No problem asking questions, that's how we learn.

Below is the code to add a banner, just change the url to yours (which you get in your browser when viewing the image, just add it to the very top of your "HTML" in the description area of your gallery:

Code: Select all

<p align="center">
<img src="http://www.pbase.com/dang/image/42112706/original.jpg" alt="logo"<br>

If you're not using Firefox, I'd highly suggest it. Here's a great thread which explains all about it written by Arjun, one of the "master guru's" around Pbase: http://forum.pbase.com/viewtopic.php?t=13408

If you want to use a stripe of the image, and add your name on top of it, that would be done in your photo editing program. You'd just crop the section you wanted to use, then use your "text tool" to add the lettering. If you aren't sure how, let me know and I'll be glad to do it for you.

On another side note, you might find a sheet you really like already made by some of the nice people in this thread, which allow free use: http://forum.pbase.com/viewtopic.php?t=26254

And don't forget to check the Pbase Wiki, started & hosted by Srijith, link at the bottom of my posts.

Edit: I just looked again, and see you already have a banner. But you could still use the image as it's background.

[faultless_images]

I am new to CSS as of yesterday so unfortunatley it might take me a few hours to learn

I am using firefox with the webdev to alter the CSS file but i cannot get this background to stay its original size.

Using the picture in my banner is a good idea, when i get home from work i might set about making a new banner using the background with the logo within it.

I cant do it at work as we dont have photoshop or any other photo editing software. I normally use photoshop proffessional 6.0.

I will get there in the end, just got to keep my patience and try to ask the right questions. Googling html & css code has helped me with certain areas, so hopefully it shouldnt be long before the gallery is looking how i want it.

Thanks for your help Dang, it is very much appreciated.

[dang]

Just beware, there's several things which have been disabled here, such as java, and other things such as the object code. So, if you run into problems, always post your questions here which might save you a lot of unnecessary work.

[faultless_images]

If i get stuck, i will make sure to post my questions, thanks

I have managed to centralise the image on the page and repeat, but it does not look that great so i may choose a different background picture altogether.

I want to put a border/table around the slideshow next, just got to find a tutorial on how to do that now