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.
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;
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.
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:
With:
"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.
The following is a compromise but you could try replacing in header.tpl:
Code: Select all
<body>
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;">
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.
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
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
my store on a large monitor - screenshot.png (1.04 MiB) Viewed 1441 times
Who is online
Users browsing this forum: No registered users and 30 guests