Jump to content

[SOLVED]Background image problem


dover
 Share

Recommended Posts

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

31696_JolTz8vw0CKZNIJMQOnl_t

31697_UFABUZ4jVyw6sZsjyIJg_t

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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,

31728_9EEcb50H2OrlARNKfj8z_t

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

31801_M0fKnBPESDhMwDen3a0u_t

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 .

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

31805_g2b5VFzKCk1a1nx8Zyjq_t

Share this post


Link to post
Share on other sites

  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More