OpenCart – Responsive Backgrounds

CSS in itself is an amazing scripting language and a great asset to anyone serious about having true cross-browser, good-looking, accessible websites. CSS has come a long way with what it can do. In fact, it is becoming limitless for design junkies.

What is responsive?

Responsive is an approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). No matter what the resolution what you are showing your audience will look great. It’s very flexible.

Creating a responsive background image

This article will show you “in a very simple way” how to create a large background image for your website that is responsive. We will be using CSS.

1) The first step in doing this is finding a large “landscape type” image that is something like 2600 width X 1000 height. This ensures that it is not too short and not wide enough for the largest of resolutions. I’ve attached a great example of an image to this article for use.

2) Upload the image to a folder on your opencart server “preferably catalog/view/theme/default/image”. Remember the location of the image because we will be calling it with CSS.

3) Now open up your opencart main stylesheet found here: catalog/view/theme/default/stylesheet/stylesheet.css At the top of that file you will see the following style:

body {
	background-color: #ffffff;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;

Now change that style to this, loading you background image:

body {

color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;	
background-image: url('../image/bg4.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;  

Just save, upload the css file and reload your website. You will notice that no matter WHAT screen resolution you have, the background image looks darn near perfectly placed. And now a live example of the attached background image can be found here:

Attached File:bg4

Looking for quality OpenCart Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

7 Comments on OpenCart – Responsive Backgrounds

  1. It’s difficult to find well-informed people in this particular
    topic, but you seem like you know what you’re talking about!

  2. swed says:

    Thanks Joe, excellent as always. Do you have a likewise nifty trick to make OpenCart 1.5, pref. responsive too? Or can you point me to which parts and/or files that needs alterations coz we apparently have to wait indefinitely on OC 2.0. Link to a tutorial on this topic would be much appreciated. I really like OC but I’m quite fed up with Kerr and his attitude.

  3. you’re in point of fact a good webmaster. The website loading pace is amazing.
    It sort of feels that you’re doing any distinctive trick.
    In addition, The contents are masterwork. you have done a excellent process in this matter!

  4. Mihail says:

    Good article for first time users.

  5. cao says:

    I want the image only on the home page.
    I read every articles related to this and not a single one work.
    I do not want to image in the category page and product page.
    i will be uploading the website soon and will send you the link.
    thank you

Leave a Reply

Your email address will not be published. Required fields are marked *