Forums

Background image width

Permalink
Hi there

I added image that is @ 1800px wide as a background to the slate theme however when I look website on apple thunderbolt monitor @ 2500px resolution background image does not stretch. Where can we edit code for background image to stretch to 100%

Regards

Alex
 
Blenderite replied on at Permalink Reply
Blenderite
Can I get a URL of your site so that I can provide info specific to you?
mhawke replied on at Permalink Reply
mhawke
There are css techniques but the easiest way is to purchase this $15 add-on. You will easily spend more the $15's worth of time trying to do it yourself.

http://www.concrete5.org/marketplace/addons/backstretch/...

Or if you want to dig into it yourself, I've had luck using this tutorial:

http://css-tricks.com/perfect-full-page-background-image/...
VidalThemes replied on at Permalink Reply
VidalThemes
+1 for what Mhawke said, the size of your image compared to the size you want it, has distortion written all over it. I would also look into something like backstretch or supersized.
mhawke replied on at Permalink Reply
mhawke
I have found the best way is to have a repeatable background, at least horizontally, and then fade the bottom of the image to match the background color of the body. I have recently used this css on a site where I wanted the background image NOT to scale. I'm sure this will not work in all old browsers but it will get you started in the right direction. The last two rules are commented out because they don't work in this particular project but you can try them and see how they affect the behaviour of the background. 

body {
background-repeat: repeat-x; /*optional */
background-position: top center;
background-color: #000; /* depends on your site */
background-image: url('http://www.definitiveweb.ca/images/dark_green_concrete_bg_faded.jpg');
/* background-size:cover; */
/* background-attachment: fixed; */
}