Post by soapitup » Sun Jul 29, 2012 5:53 am

I have a small issue with my template and wondered if anyone new of a simple solution.

My site looks great (IMO) on a large screen, but when you look at it on a laptop/small screen then you loose most of the background image which is what makes the site stand out in my opinion.

My background image was designed so my store logo goes down the right hand outside side of the cart and then their is a fashion model on the opersite side but on a laptop you cant see the side logo and most of the male model is hidden. (because the store takes up too much room I guess on a smaller screen.

I got told its because it needs to be HTML5 responsive (know what it means just don't know what to do about it).

I would also love it to be able to work on mobile devides but think that may be pushing my look.

Anyway any suggestions welcome.

PS I use opencart V1.5.1 and the simplecart template.

Active Member

Posts

Joined
Fri Jul 23, 2010 12:24 am

Post by mcamca » Sun Jul 29, 2012 7:07 pm

Not exactly sure what you mean but:
Have a look at:
http://www.w3schools.com/cssref/pr_back ... sition.asp
Maybe following would work:
Add for body css:
background-position:center;
Last edited by mcamca on Sun Jul 29, 2012 11:34 pm, edited 1 time in total.

Active Member

Posts

Joined
Fri Aug 06, 2010 5:57 pm

Post by mcamca » Sun Jul 29, 2012 8:22 pm

Might help if you supplied a screenshot of what you wanted it to look like!
The following is a compromise but you could try replacing in header.tpl:

Code: Select all

<body>
With:

Code: Select all

<body style="background: url(http://urbanunderwear.co.uk/catalog/view/theme/simplecart-black/image/man1.jpg) no-repeat center top fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: cover;">
"background-size:cover" scales the image to the smallest size such that both its width and its height can fit inside the content area.
This is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+ but not in IE8 and earlier (though it does work better in IE8 than your present background position!)
If this works for you then either leave as is or transfer css into your stylesheet.
PS: The container used in Opencart is set to a fixed width which cannot reduce in size for smaller display screens; hence background image on each side will be covered more for lower resolution displays!
Also try making the background image smaller in width. At the moment your right part of the image is being forced off of the right side of the screen due to its size. Dont go to small though as in IE 8 it will not expand in size to cover the screen for large displays.

Active Member

Posts

Joined
Fri Aug 06, 2010 5:57 pm

Post by soapitup » Mon Jul 30, 2012 4:19 am

This is how my store looks on my large monitir (think its around 23") but if you have a laptop or smaller screen then you will notice that most of the background is hidden by the actual cart area.

I'll look into what has been said but think its the whole cart and background needs to be resized in order for it to display properly, though not 100% sure.

Site is urbanunderwear.co.uk

Attachments

screenshot.png

my store on a large monitor - screenshot.png (1.04 MiB) Viewed 1440 times


Active Member

Posts

Joined
Fri Jul 23, 2010 12:24 am
Who is online

Users browsing this forum: No registered users and 32 guests