Perfect Background Image

[Bit]

Hi Folks,

This is my first post and concerns an old bashed up topic. I read the article and all the ideas, but am not able to implement it though I tried many variations.

Perhaps you have the patience and goodness to help me out.

CSS3 method did not work for me, but the jQuery works out as far as the background image is concerned, but I get stuck with the navigation part as these are also individual images I made in Fireworks and exported them as CSS slices to Dreamweaver CS5.5.

Here is a shot of the page I am working on:

http://e-junctions.com/uploads/images/1334844724-U1.jpg

I will also post the code if you so desire.

Thanks and look forward for some tips or solutions.

Bit

PS: I noticed the image link is not working, so here’s another attempt:

Bit

[Paulie_D]

Link still not working…try Photobucket or similar.

[Bit]

Thanks for letting me know! Here’s one at Photobucket:
http://i48.photobucket.com/albums/f201/Tratecooty/home_page2_0419.jpg

Bit

[chrisburton]

If I could just suggest something on the design. It would probably look better if you put that banner and content up top since it’s sort of blank with the sky. Anyway, just a suggestion.

[Paulie_D]

Yes, we’d have to see a link to the site to comment on what might not be working.

That, or post your code. Frankly a link is better.

[Bit]

Hi all,

Thank you so much for your input.

Here’s a link to my site (under development), but this file is not on the server:
http://venture-wilderness.com

Therefore I ‘m including the code below:
I have commented out the portion with the links and title (images), but have included the complete composition as the background image to demonstrate how it should look like.

HTML:

CSS:

@charset "utf-8";

/* CSS Document */



* {

margin: 0;

padding: 0;

background: url(_images_content/brwsr_bg_blackish_color_full_width.png) repeat-y bottom left;

}/*Change names of browser background image used above and remove obselete images*/

#bg {

/*position: fixed;*//*when called in, this function pins the picture to the bottom of the screen*/

bottom: 0;

left: 0;

}

.bgwidth {

width: 100%;

}

.bgheight {

height: 100%;

}

#page-wrap {

position: relative;

bottom: 0px;

}

#header {

/*background: none;*/

height: auto;

}

h1 {

/*font-family: "Caviar Dreams", "BernhardFashion BT", Ebrima, sans-serif;*/

line-height: 5;

/*color: #FFF;*/

/*text-align: center;*/

/*background: none;*/

text-indent: -9999em;

background: url(_images_comp/title.png) no-repeat;

}

.img-title {

float:left;

margin-top:805px;

margin-left:645px;

}

#nav ul {

margin: 0;

padding: 0;

list-style: none;

position: absolute;

left: 645px;

bottom: 0;

width: auto;

}



#nav ul li {

float: left;

}

#nav ul a {

font-family: "Caviar Dreams", "BernhardFashion BT", Ebrima, sans-serif;

font-size: 1.5ems;

line-height: 3px;

font-weight: bold;

text-decoration: none;

position: absolute;

float: left;

display: block;

}

.first {

float:left;

margin-bottom:0px;

margin-right:10px;

margin-left: 473px;

margin-top:15px;

}

.img-nav {

float:left;

margin-bottom:40px;

margin-left:px;

padding-left:5px;

padding-right: 5px;

margin-top:15px;

}

.img-right {

float:right;

margin-top:-50px;

margin-right:50px;

position: absolute;

right: 236px;

top: 1020px;

}



#footer {



}

p {



}

I hope you can make sense out of it.

[Author]

Posts