100% background image

Developers Frontend
1

Im trying to get my background image to be 100% width and height because different monitor sizes can make the image smaller than normal



I found this site that has a variety of different ways to do this, but I cant figure out how to import it in with my code.



Maybe someone can point me in the right direction?



[url=“Perfect Full Page Background Image | CSS-Tricks - CSS-Tricks”]http://css-tricks.com/perfect-full-page-background-image/[/url]



This is what my code looks like with the background image.


.main {
background: url(images/1680x1050R3.jpg) no-repeat fixed center center #620303 }

2

The knowledge base only shows how to do this for 2.0 version. Nothing else.



I have 3.0.3 pro

3

I'm pretty sure I already supplied this one for you many months ago…



You need to be editing the .main class in :-



/skins/basic/customer/addons/my_changes/css/my_styles.css



To center your background image across most browsers, you need to change:-


.main{
background: url("images/1680x1050R3.jpg") no-repeat fixed center center #620303;
}


To:-



.main {
background: url("images/1680x1050R3.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

4

[quote name='StellarBytes' timestamp='1378842218' post='168050']

I'm pretty sure I already supplied this one for you many months ago…



You need to be editing the .main class in :-



/skins/basic/customer/addons/my_changes/css/my_styles.css



To center your background image across most browsers, you need to change:-


.main{
background: url("images/1680x1050R3.jpg") no-repeat fixed center center #620303;
}


To:-



.main {
background: url("images/1680x1050R3.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


[/quote]



Well I know I asked about the 100% header but not sure about the background.(Which I still cant get to be 100%)



If you did, I apologize for the 2nd topic.



But I applies the code for my header and the background and it works fantastic!

Thank you!



One issue Im having that you may have an answer for.



When I go to the config.local.php file and change the join_css to true to join it, it pretty much like ignores the whole my_changes folder.



It makes my background small, and put a black border around the whole screen and takes away my top header.



Why?