[SOLVED]Background image problem

[dover]

Hello,

I have problem with my background image.
I attached original image file that should be on the background.
also attached image of the website. There are big differences.
Can anyone please explain what I did wrong ?
css code is

background:url('../img/bg_main.jpg') top center repeat;

Thank You advance

[Steppo]

hi!

It can be a lot of things. Can u explain more about whats wrong? A link to the site?

//Stefan

[dover]

Hi,

Thx for reply
By the wrong I mean that I want image background as it is on JPG file.
But as a background on website it does not look that way
url is www.kamis.ee
If you compare 2 attached images on first post you know what i mean.

BR

[Steppo]

I am not sure exactly what you want but if you want the background of the content to be green you can change line 185 in your global.css from:


#page {

width: 980px;
margin-top: 0pt;
margin-right: auto;
margin-bottom: 2px;
margin-left: auto;
text-align: left;

}

to:

#page {

width: 980px;
margin-top: 0pt;
margin-right: auto;
margin-bottom: 2px;
margin-left: auto;
text-align: left;
background-color:#000000; (replace the 000000 with your green color)

}



//Stefan

[dover]

Hi,

I am sorry but you misunderstood me.
I can manage with color code but if you take look at the JPG image that i am trying to set as theme background you see there nice borders.
But on the website those borders are all messed up.
I figure that repeat command in the code does that. But without repeat .jpg stays on its original size, borders are under module blocks and edges stay white.
What im trying to do that .jpg image is lays evenly under entire page.

BR,

[dover]

Hello,

Please reply if you dont understand the issue.
I try to explain it more clearer then.
I think that the problem is very solvable.
Need urgent help with thatone.

Thank You

[Steppo]

Sorry been a way for a a few days... is this "the green pattern" what you call the border?

[Steppo]

Try this:)

The different is the repeat to no-repeat. (line 16)

body {
background-color: transparent;
background-image: url("../img/bg_main.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
font-size: 11px;
font-family: Verdana,Arial,Helvetica,Sans-Serif;
color: #505050;
text-align: center;

}

stefan

[dover]

Sorry been a way for a a few days... is this "the green pattern" what you call the border?

Yes that is the one

[dover]

Hi,

No-repeat does not help.
Image stays on its original size and i have white edges.
Attached image

Try this:)

The different is the repeat to no-repeat. (line 16)

body {
background-color: transparent;
background-image: url("../img/bg_main.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
font-size: 11px;
font-family: Verdana,Arial,Helvetica,Sans-Serif;
color: #505050;
text-align: center;

}

stefan

[Steppo]

ok but why is the page white?

[Steppo]

Maybe it is only the background of the content of the page that you want to apply the background on? In that case it is (line 185) that needs to be edited instead to

#page {
width: 980px;
margin-top: 0pt;
margin-right: auto;
margin-bottom: 2px;
margin-left: auto;
text-align: left;
background-image: url(”../img/bg_main.jpg”);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;

}

and remove the background information in the #body. I also see that you background image is 1000px wide and the page is 980px so you have to either edit the page width or the bg image size.

Stefan

[dover]

Hi Steppo,

Thx for reply.
But still it does not solve the problem. It does not matter if i change line 16 or 185
Results are about the same.
But I need to change content of te body. Because if i change page then i get those white edges no matter what.
I can get .jpg image to background but just cant fit it to page .

[Steppo]

Alright. I have put you bg image in a presta template and put it as background - and it works, with a little margin it covers the pages width 980px. I am still not sure of how you want it to look but i think you have to make a wider bg image that is around 1400px or what ever you want and preserve a gap that is in the center of the image that is 980px - the same with as the content of you page, like you have done in the image you showed in the first post. The green gap in the image you use now is only 800px.

Maybe someone else here have other ideas. Keep it up!

//Stefan

[dover]

Hi,

Issue solved,
Hours of googleing and I came to an understanding that it is easyer just to resize .jpg image to your needs.
So 3 easy steps with photoshop and it is done.
But I am positive that it could be done somehow in global.css code
Attached image for result that i needed.

many thanks to you Steppo

[Steppo]

Great! Well done! Also put the issue tread as (SOLVED)

[Toonami]

its not solved! as you can see, BG image fits only to your PC monitors, in my monitor i still see its as messed up! so you need to find answers again