Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

aristotlevrettos
aristotlevrettos
2,225 Points
Posted by aristotlevrettos
aristotlevrettos
2,225 Points

background image opencart

Hello there does anybody know how to add a background image to the default theme of opencart ?

I have tried this on the stylesheet.css file but nothing :-(

body {
    background-image : url('../catalog/view/theme/default/image/bg_main.jpg');
    background-repeat: no-repeat;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}

any ideas :-)

Thanks in advance

4 Answers

Sarah Capecci
PLUS
Sarah Capecci
Courses Plus Student 4,776 Points
Sarah Capecci
Sarah Capecci
Courses Plus Student 4,776 Points

I never really worked with Opencart themes, but have you tried to also set background-position and background-size?

An example:

background-size: cover; background-position: top;

aristotlevrettos
aristotlevrettos
2,225 Points
aristotlevrettos
aristotlevrettos
2,225 Points

Buonasera ->good evening- your surname sounds italian , you have a point i will give it a try thanks very much Sarah

I tried it didn't work :(

body {
    background-image : url('../catalog/view/theme/default/image/bg_main.jpg');
    background-size: cover ;
    background-position: top ;
    background-repeat: no-repeat;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}
Sarah Capecci
PLUS
Sarah Capecci
Courses Plus Student 4,776 Points
Sarah Capecci
Sarah Capecci
Courses Plus Student 4,776 Points

Hey Buona Sera!

It could be many things... If this didn't work, did you check if the image is actually being loaded? Maybe the path isn't right.

In case it is, is there anything floating (left or right) inside the body tag ? This might cause a problem too.

aristotlevrettos
aristotlevrettos
2,225 Points
aristotlevrettos
aristotlevrettos
2,225 Points

Buongiorno, tutto bene?

Si I double checked the path with the ftp, I can only change the background color :-(

body {
    background-color: #B4EDEC;
    background-image: url('../catalog/view/theme/default/image/bg_main.jpg');
    background-size: cover ;
    background-position: top ;
    background-repeat: no-repeat;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}

I haven't seen anything else floating apart from the bees in my garden.

But there is one more stylesheet.css file in another folder of the opencart with a body part :

body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #FFFFFF;
}

I add this line 

background-image: url('../catalog/view/theme/default/image/bg_main.jpg');

still nothing ;-(

Sarah Capecci
PLUS
Sarah Capecci
Courses Plus Student 4,776 Points
Sarah Capecci
Sarah Capecci
Courses Plus Student 4,776 Points

Hey! Tutto bene :)

So, when you inspect the element through the dev tools, what is being displayed? Is the image being loaded and then overwritten by the color or not even being loaded?

aristotlevrettos
aristotlevrettos
2,225 Points
aristotlevrettos
aristotlevrettos
2,225 Points

Buonasera ->good evening- your surname sounds italian , you have a point i will give it a try thanks very much Sarah