Add background image

I have tried to add a background image to  my site using the following instructions but to no avail can anyone point me in the right direction;

using;

/templates/base/css

common.css

body {
font-family:Verdana,Arial;
font-size:11px;
color:#333333;
background-color:#589CBC;
margin:0px;
padding:0 0 50px 0;   
}

change to

body {
font-family:Verdana,Arial;
font-size:11px;
color:#333333;
background-image:url(../images/YOUR-IMG.gif );
margin:0px;
padding:0 0 50px 0;   
}

With the uploaded image in;

/templates/base/image

 

 

Quote · 26 Aug 2010

when you change the css you need to clear the cache and cache_public folders.  leave .htaccess in the cache folder.

example of a common.css with a background image.

body {
 font-family:Verdana,Arial;
 font-size:11px;
 background: #000000 url('../images/camo1.jpg');
 background-attachment:fixed;
 color:#bfc9cf;
 margin:0px;
 padding:0 0 50px 0;   
}

 

now make sure the image is the right folder.  

Also i see you are changing the base css files.    you really should change the css files of the template you are using.  for example the uni template folder and not the base files...

Again any time you change css files you have to clear the cache.

https://dolphin-techs.com - Skype: Dolphin Techs
Quote · 26 Aug 2010

Thank you so much for your reply.

If I go to the common.css in templates/tmpl_uni/css

When I open the file the only data that lies therein is;

@import url(../../base/css/common.css);

So I added the code you recommended (changing the image url) with the image in the, templates/tmpl_uni/images file

Cleared the cache and no change.

Am I just completely thick? I have only ever built a site with dreamweaver before this so I'm at pre school standard!

Quote · 26 Aug 2010

well, if you are going to use the uni template, you need to also change to that template in admin.

i'm tired
Quote · 27 Aug 2010

Finally, I've pulled myself together and have it working.  Thank you for all your help.

Quote · 27 Aug 2010

hello now i have tried this method and cant seem to get it to work for some reason. maybe im doing something wrong im not sure but i made the changes this page suggests and cleared my cache and cache_public folders. i put the image i wanted to use in  templates/base/images  named it backround.jpg.then went to my css file and made the changes background-image:url(../images/YOUR-IMG.jpeg  );
this is maybe where i went wrong as im a novice to this kind of thing i can install mos and what not but for some reason this has me stumped. also working at 4am may not help me. when i put the background-image:url(../images/YOUR-IMG.jpeg  ); when i add this line to the css file to i need to ad it like this                      background-image:url(http://***********/images/background.jpeg  );  or do i need to ad something infront like my site url or some other thing ?because everything i try does not seem to work here thanks for any help in this .

Quote · 24 Sep 2010

You need to follow this code from  Dolphin_Jayexample of a common.css with a background image.

body {
font-family:Verdana,Arial;
font-size:11px;
background: #000000 url('../images/camo1.jpg');
background-attachment:fixed;
color:#bfc9cf;
margin:0px;
padding:0 0 50px 0;
}

Kids first
Quote · 24 Sep 2010

hello thanks for all your help here but this is still not working i have added this to my site as follows. i put my background image into templates/ base /images.

named it background . then added this in templates/base.css/common css

font-family:Verdana,Arial;
font-size:11px;
color:#cc0000;
background-color:#000000;url('../images/background.png');
background-attachment:fixed;
margin:0px;
padding:0 0 50px 0   than saved and cleaned all cache and cache_public folders. what am i doing wrong here thanks

Quote · 26 Sep 2010

THis what I do into common.css of theme I use:

@import url(../../base/css/common.css); (this is basic in the template) 1ste rule after this:
body {
background: #000000 url('../images/filename.jpg');
background-attachment:fixed;
color:#000000;
}

 

I hope this can help you further.

Kids first
Quote · 26 Sep 2010

i have followed this to the letter but still can not get a backgroung inage to show at best all it does is turn white from black maybe its not meant to be. i have edited all the files i was told to with no results thanks for your help guys im done i give up i really want a backround image but its not going to happen it seems.

Quote · 27 Sep 2010

 

i have followed this to the letter but still can not get a backgroung inage to show at best all it does is turn white from black maybe its not meant to be. i have edited all the files i was told to with no results thanks for your help guys im done i give up i really want a backround image but its not going to happen it seems.

Try entering the full URL of the image (http://yoursite.com/etc/). Also make sure to clear your cache/ and cache_public/ directories, leaving the .htaccess file in the cache/ directory intact.

BoonEx Certified Host: Zarconia.net - Fully Supported Shared and Dedicated for Dolphin
Quote · 27 Sep 2010

ok thanks i think i worked this out now it was in the right place i was adding it in the wrong common .css file it seems i cant read lol i was putting it in the base common,css not the tmpl uni common .css. my bad thanks for all your help guys and taking the time to reply to me ..

Quote · 27 Sep 2010

For those who are wanting a photo on there front page background of their dolphin go to /templates/base/css

open file: common.css

Find this section:

body {
font-family:Verdana,Arial;
font-size:11px;
color:#333333;
background-color:#589CBC;
margin:0px;
padding:0 0 50px 0;
}

change to:

body {
font-family:Verdana,Arial;
font-size:11px;
color:#333333;
background-image:url(your image you have  located anywhere on the net just add http://www../images/YOUR-IMG.gif);
margin:0px;
padding:0 0 50px 0;
}

 

Now go to your admin and click on admin home and clear your cache and reload your dolphin this will repeat the photo cause it will move..

 

Now if you want the photo to stand still and the boxes move over the top take the same section I posted at the top of this posting and change it to this.

body {
font-family:Verdana,Arial;
font-size:11px;
color:#333333;
background-image:url(your image you have  located anywhere on the net just add http://www../images/YOUR-IMG.gif);
background-position: Center;
background-repeat: repeat;
background-attachment: fixed;
margin:0px;
padding:0 0 50px 0;
}

 

Be sure to clear your cache.

You will have to play around with the photo size to look good but think a photo around 1200 x 700 will look good on most screens Hope this helps others.

Quote · 29 Nov 2010

hello guys, am new in this forum so please explain to me how to add a background image to dolphin 7.0.9 and i don't get a damn thing when im reading url of your image pleaaaasseeee hheellppp 

thx in advance 

Quote · 10 Feb 2013

 

hello guys, am new in this forum so please explain to me how to add a background image to dolphin 7.0.9 and i don't get a damn thing when im reading url of your image pleaaaasseeee hheellppp 

thx in advance 

You do it as outlined in this post.  In the template directory you are using, there is an images directory.  Place the image you want to use in that directory and then follow the instructions as outlined in this post.  To place an image that you have stored elsewhere, such as Photobucket (no endorsement here) then use the full URL; address, link, whatever you call it, to the image.

Geeks, making the world a better place
Quote · 10 Feb 2013

after everything else I have accomplished I am stating to feel a bit dumb but wow.

Background image loads in admin panel but not on the website itself. I have added the following to both the base css and the template css:

@import url(../../base/css/common.css);
body {
 background: #000000 url(../images/leaves_bg.jpg );
 background-attachment:fixed;
 color:#000000;

 

I changed the image location and used the full url in the template css and lost the background image again. I returned it back to what is above in the template css and got the background image back in the admin panel, still not the site.

I tried this in the template css next, it also shows the image (portions of the bottom) in the admin panel but not as well as the above code.

body {
background-color:transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image:url(../images/ leaves_bg.jpg);
font-family:Verdana,Arial;
font-size:11px;
color:#333333;
background-color:#000000;
margin:0px;
padding:0 0 50px 0;

what on earth am I missing here. I have even tried duplicating the code on both the base and template css, no luck.

 

 

 

Quote · 1 May 2013

Well, i got it figured out. Nothing wrong with the code but in my case (and I bet in the case of everyone else that is having trouble) the suggested css pages are wrong. It is not the common css but rather the general css in the template I am using that the background image is controlled (and the code is already there, just change image name accordingly). For the record it came to me reviewing the site with firefox firebug. Hope this helps someone else.

Quote · 5 May 2013
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.