Geek Answers Handbook

Customize the background image of a web page when using Zurb Foundation?

I use the following css3 code to make the background image almost 100% perfect in the browser window:

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

However, I also use the Zurb Foundation 3 css framework, and it automatically makes the body element a white background ... so the background image above is hidden. Obviously, I can override this, but it makes me think that I need to handle such backgrounds as above in a special way with Foundation. It's true? Or I need to also have this:

 body { background: transparent !important; }
+4
source share
3 answers

I use Foundation 5, but not with images, instead of which I use gradients, but the same should apply if you want to use an image.,.

Banner

 <div id="banner"> <div class="row"> <div class="small-12 columns">Some Content Here</div> </div> </div>

CSS - NOTE WIDTH AND Z-INDEX, this will mean that the background will occupy 100% of the page width, and the z-index will place it below any of the funds of other elements. The best way to apply this is either on the page or on the stylesheet that is loading AFTER the foundation .min.css, otherwise it will not override the foundation presets.

 #banner{ width:100%; height:100%; min-height:100%; z-index:-999; background: url(images/bg.jpg) no-repeat center center fixed; margin:0;padding:0; }
+2
source

EDIT IMAGE: Sorry, I thought the important element of the property you posted was the Zurb code. In any case, I will leave my answer for what it costs.

I am not familiar with Zurb Foundation 3, but as a rule, if a developer uses an important property, this is because they consider it vital for the rest of the code and do not want to overwrite it. However, we are talking about a background that does not inherit, so I don’t see how the background property on the body tag can really be “vital”, since in it it will break the layout if you delete it.

I was thinking about the z-index for the body and how the developer might want to put certain objects behind the body, although I have never seen this and do not know why you would like to do this. In addition, I believe that a negative z-index should place something behind the body, however we do not see this. Look at my different violins, trying to hide the div behind the body.

http://jsfiddle.net/W9ckz/1/ http://jsfiddle.net/W9ckz/2/ http://jsfiddle.net/W9ckz/3/ http://jsfiddle.net/W9ckz/4/

So, if you cannot think of another way that overriding the background on the body can break the layout and can prove that it is a threat to this effect (unlike the z-index thing that I was thinking about), then I would say This . The worst part is that you must cancel it.

 I think you can remove the body background property altogether without side effect.
0
source

I would apply your html style to body . The result will be the same and you will override the Foundation default white background.

0
source

More articles:


All Articles