thesludge Posted June 9, 2012 Share Posted June 9, 2012 Hi All, I am completely new to this software, so please bear with me if i have asked an obvious question. I have a background image that i wish to use on my shop to be. Thing is, despite me looking around the admin menu, I cannot see anything obvious that lets me do this. Can anyone point me in the right direction at all please in how i can do this? Link to comment Share on other sites More sharing options...
cocothecat Posted June 9, 2012 Share Posted June 9, 2012 Hi, You need to edit the css within the theme its self, what sort of background image is it? Do you need to tile / repate it or is it going to be one large image? Link to comment Share on other sites More sharing options...
thesludge Posted June 9, 2012 Author Share Posted June 9, 2012 (edited) Hey cocothecat, thanks for the reply ! It is going to be one large image. I am used to doing some basic css/html stuff in my in my IPB forum, but this appears to be slightly out of my league. If anyone can help i am wiling to make some kind of donation if need be and really want to form some close links and friendships on here. I have attached the background that I want I have been in retail for 17 years now and feel that this is a great bouncing platform for me to judge the market- and if goes well i shall be launching high street retail stores in the UK with formidable plans to open 3 in 2013, 5 in 2014 with options to offer as a franchise. My goal is to have 100 stores by 2017 which is great growth but i have the expertise and links to do this. I just need help with the website to get it going with 4000+ products. **PS here my linked in details http://uk.linkedin.com/in/ianjtaylor Edited June 9, 2012 by thesludge (see edit history) Link to comment Share on other sites More sharing options...
cocothecat Posted June 9, 2012 Share Posted June 9, 2012 If you want that image 100% then take a look here should give you some hints to get it sorted, if you get stuck drop me a message and ill take a look at getting it sorted for you http://css-tricks.com/perfect-full-page-background-image/ Link to comment Share on other sites More sharing options...
Argonaute Posted June 9, 2012 Share Posted June 9, 2012 Hello, I think the image you would like to have as a background is really too heavy (1.7 MB!). Because you have no transparency you can surely do something lighter, eventually change png to jpg and reduce quality... If you want to add your image you need to modify your global.css file located in the theme folder and then « your theme » folder (I hope I'm clear). Copy your image to the img folder Add this on the global.css html { background:#FFF; background-image:url('../img/confetti.png'); } And comment the line with background on the body div with /* and */ body { /*background-color: white; */ } I don't want to be rude but this is a real basic thing, you should find a friend with design and DB skills because you project seems to be big and you will face things more complex than just changing the background. Using firefox and the firebug plugin can help you a lot.. If your site is on line we could help you in a more efficient way. good luck Link to comment Share on other sites More sharing options...
cocothecat Posted June 9, 2012 Share Posted June 9, 2012 (edited) Without being rude, what you have posted above does not help (apart from reducing the image size) having the image display 100% hight and width is what the OP asked for. Simply placing it as a background image will cause the image to tile once the monitor screen size gets past the image dimensions. Edited June 9, 2012 by cocothecat (see edit history) Link to comment Share on other sites More sharing options...
thesludge Posted June 9, 2012 Author Share Posted June 9, 2012 (edited) great feedback from both of you and fully appreciated- but please dont blow my mind lol!!!! It is a case of using this software or Magento. Argonaute> I have done similar things in my IPB board but at least I can do that via an editor and not via my c-panel which i feel uncomfortable about. cocothecat>i am sure i will be in touch! Just to let you know, as both of your opinions are very much valued I NEED my site to look like this in layout etc> Edited June 9, 2012 by thesludge (see edit history) Link to comment Share on other sites More sharing options...
Argonaute Posted June 10, 2012 Share Posted June 10, 2012 Simply placing it as a background image will cause the image to tile once the monitor screen size gets past the image dimensions. Your right but you can modify the image to have a seamless border, this means you can not see the difference when the image repeat itself Better you could do a seamless tiles and use the repeat background (a tiles 64 by 64 by example, you could find tutorials using photoshop or gimp to create the tiles). You can modify the .tpl file and create a new centered div (wrapper) which contains your image but again if the screen resolution is higher than the div you will have borders. You can also add the image in the background div itself. In any case if you have always an image in the middle (the girls at the party or other thing from prestashop) you can remove this part from your background so this background image will be lighter. The link given by cocothecat is useful.I bookmark it.The CCS3 key "cover" is new for me Concerning Cpanel I don't think it is designed to create or modify a website, personally I'm using notepad++ , firefox and firebug, gimp and/or photoshop. Cpanel is strong to modify rules on the htaccess file without touching it directly and to see statistics and logfiles. Again if you want to see how a website is done using firefox and firebug is really useful. PS : cocothecat something seems wrong on your website, the html code appear clearly visible close to the panda and rabbit image on firefox. PM me if you want a screenshot. PS : I'm also learning the web design and php, just created two websites but none with prestashop at the moment (only local test). Link to comment Share on other sites More sharing options...
thesludge Posted June 10, 2012 Author Share Posted June 10, 2012 Mmm, the tiles issue is one for me to think about then I guess. I think I may add the image and see what happens next. Incidentally, I have 3 websites www.rs-mania.co.uk www.bbq-party.co.uk One i did for a friend www.spicesrestaurants.co.uk I too am new to Prestashop but I know my way around IPB and Weebly. Link to comment Share on other sites More sharing options...
thesludge Posted June 10, 2012 Author Share Posted June 10, 2012 Hello, I think the image you would like to have as a background is really too heavy (1.7 MB!). Because you have no transparency you can surely do something lighter, eventually change png to jpg and reduce quality... If you want to add your image you need to modify your global.css file located in the theme folder and then « your theme » folder (I hope I'm clear). Copy your image to the img folder Add this on the global.css html { background:#FFF; background-image:url('../img/confetti.png'); } And comment the line with background on the body div with /* and */ body { /*background-color: white; */ } I don't want to be rude but this is a real basic thing, you should find a friend with design and DB skills because you project seems to be big and you will face things more complex than just changing the background. Using firefox and the firebug plugin can help you a lot.. If your site is on line we could help you in a more efficient way. good luck Mmmm following the above, the site has gone all screwy lol - see attached Link to comment Share on other sites More sharing options...
Argonaute Posted June 10, 2012 Share Posted June 10, 2012 (edited) Looks like a bracket is missing...or a comment is at wrong place. You should use notepad++ and it will colorize the code. PS : I know very well the Ford RS Cosworth, where my father was working (close to Ford headquarter) they prepared some sierra for the track with tuned garett Turbo. Sometime my father pick me at scool with one of them with the slick tires in the trunk (Need to use regular tires for legality). The car was so low we have to avoid some roads. You can imagine the eyes of my friends, especially when they heard the modified exhaust pipe. My favorite was the first sierra with the big wing. The other model even loose the charger gauge. and look less aggressive. A day we run at the highway more than 250 km/h (was possible without losing your license that old days), the turbo was so hot it was absolutely red like lava. Edited June 10, 2012 by Argonaute (see edit history) 1 Link to comment Share on other sites More sharing options...
halennoor Posted June 10, 2012 Share Posted June 10, 2012 (edited) hi, can i just suggest that you insert this: background-repeat:no-repeat; where you are inserting the image e.g. if you are putting in as a background within #page. ( this really depends on where this background image is in your site and this is merely example as i do not hv the values and property of your css etc.) #page { width: 980px; margin: 0px auto 2px; text-align: left; background-image: url("your image path"); background-repeat: no-repeat; } change the url to where you upload the image. Edited June 10, 2012 by halennoor (see edit history) 1 Link to comment Share on other sites More sharing options...
tdr170 Posted June 10, 2012 Share Posted June 10, 2012 (edited) Sorry but I believe the background image will be placed in the #body tag not the #page tag. The #page tag would place the image as the background of the left, center and right columns. The image should be a jpeg image as the file size will be much smaller then a .png file, you can find many image programs that can change the image type. If you do not have an editor to change the image upload it here and I will change it for you. There are a couple of things you will need to do, first use your FTP program and upload the image to the img folder in themes/ yourtheme /img (at least for my example). Now use this example to add the image as your background (copied from my global.css) If you want the image to scroll with the rest of the page remove fixed from the end. If you have a small image and want it to repeat remove no-repeat. body { background: url(../img/yourimage.jpg) no-repeat fixed; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; text-align: center; } Now so that the image does not show through the transparent areas in the center part of your page add the line in bold to your #page heading in the same global.css file #page { width: 980px; margin: 0 auto 2px auto; text-align: left; background-color:white } That should do it ! Edited June 10, 2012 by tdr170 (see edit history) 1 Link to comment Share on other sites More sharing options...
thesludge Posted June 10, 2012 Author Share Posted June 10, 2012 (edited) Thanks to you ALL guys for your great input and advice. It is MUCH appreciated by you all. Please feel free to comment further if need be whilst I get my head around all of this. I shant forget you all if this becomes successful Argonaute>attached is my car Edited June 10, 2012 by thesludge (see edit history) Link to comment Share on other sites More sharing options...
maniva Posted June 11, 2012 Share Posted June 11, 2012 Hi, How I can have different background image for different categories ? Link to comment Share on other sites More sharing options...
cocothecat Posted June 11, 2012 Share Posted June 11, 2012 You need create if statments within the body tag and then create X ammount of css body classes so depending on the page it loads in which ever class you would like for the body Link to comment Share on other sites More sharing options...
maniva Posted June 11, 2012 Share Posted June 11, 2012 Sound good. Can you just give me a short sample ? Link to comment Share on other sites More sharing options...
cocothecat Posted June 11, 2012 Share Posted June 11, 2012 (edited) Sound good. Can you just give me a short sample ? Off the top of my head body#page1{background-color:#000;} body#page2{background-color:#fff;} body#page3{background-color:#00f;} and then in the header switch out the body tag for something like <body id={if $id==page1}#page1{else if $id==page2}#page2{else if $id==page3}#page3{/if}> replacing the page inside the brackets for 'index' as an example that bif of colod could be made cleaner its not 100% try it Edited June 11, 2012 by cocothecat (see edit history) Link to comment Share on other sites More sharing options...
maniva Posted June 11, 2012 Share Posted June 11, 2012 Thank you very much. I will try and let you know Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now