stretched background

stretched background

by Christopher Hillman -
Number of replies: 24

right now im using a jpg picture for the background and i want the single picture to stretch the entire page rather then make copies of itself over the page; is there any way i can make this picture stretch the entire page

My css is the basic wood theme css and i have simply replaced the jpg picture with the background.jpg file inside located at theme/wood/background.jpg.

Please advise.

Thanks in advance.. Chris.

PS> If you need a copy of the picture please let me know and i will upload it.

EDIT: PPS this is the current css coding for the background

body {
    background-color:#CC9966;
    background-image:url(background.jpg);
{

Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Have you checked the W3 Consortium CSS3 documentation?

http://www.w3.org/TR/css3-background/

M smile
Average of ratings: -
In reply to Mary Evans

Re: stretched background

by Christopher Hillman -

i checked the document and as far as i can tell the css code i need to add is background-size: 100% 100%;

but when i add that line it doesnt register it as an actual css code. Is there any other way?

Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Check this out STRETCH BACKGROUND
Average of ratings: -
In reply to Mary Evans

Re: stretched background

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
I'm having some problems with the forum - just lost a posting.

So here it is again...

The above link I left in my previous post is a test page I made on my website.

It works in Firefox 3.0.13 /Safari 3.2.2 /& IE 8 all are CSS3 compliant - it wont work in IE6.

Mary
Average of ratings: -
In reply to Mary Evans

Re: stretched background

by Mauno Korpelainen -

It's not yet fully implemented and should not work in any current version of IE

https://developer.mozilla.org/en/CSS/-moz-background-size

You could use also jQuery

http://css-tricks.com/how-to-resizeable-background-image/

but the best method I have seen is to add to your css file(s)

#background
{
width:100%; height:100%; position: absolute; z-index: -1; top: 0; left:0;
}

and to theme header.html after

<body<?php
    echo " $bodytags";
    if ($focus) {
        echo " Xonload=\"setfocus()\"";
    }
    ?>> (note this Xonload is added by editor here)


<img id="background" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/test.JPG"/>

where test.JPG is the name of image. Refresh your browser!

This should be cross-browser compatible and it does not require javascript (jQuery)

Average of ratings: -
In reply to Mauno Korpelainen

Re: stretched background

by Mauno Korpelainen -

And if that background image is background.jpg the required tags are of course

<img id="background" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/background.jpg"/>

Style for image id

#background
{
width:100%; height:100%; position: absolute; z-index: -1; top: 0; left:0;
}

sets width and height to 100%, absolute position of image to top left corner and z-index to under other content.

And the image streches when you resize screen...with pure css.

Average of ratings: -
In reply to Mary Evans

Re: stretched background

by Christopher Hillman -
hmm so it works for you, i'll give it another shot and look into it soon, currently editing questions for the surveys and stuff. Will get back to you in about 20 - 30 if your still online. As always; thanks for the help =3
Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
No it didn't work! LOL I just checked it using another image and all it's doing is tiling it! ROFL - And there I was thinking I have cracked it! smile

Back to the drawing board!

LOL

M smile

EDIT!!!

I've just read Mauno Korpelainen comment above...I think that should work.

...Exit stage left! LOL

Average of ratings: -
In reply to Mary Evans

Re: stretched background

by Christopher Hillman -
do i need to delete my other background tagged areas?
Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Christopher Hillman -
errr... it half worked.... theres one massive image and a bunch of smaller ones on the cutoff (im assuming where the footer is) i'll screenie it for you in a sec
Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Christopher Hillman -

okay this is what it looks like... note i've left the top part out because that seems fine and it didnt want to fit on my page.

PS DW ABOUT THE XONLOAD THING, i will remove that soon, just testing background

moodlesite2.jpg

Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Christopher Hillman -
apparently the -1 for z-index is not a registered value, it only seems to allow positives...
Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Christopher Hillman -

i cant get anything to work atm, i even tried the javascript, same problem, unfortunately the students will all be using ie. Thus if possible can someone find me a picture of similar color which tiles nicely; kinda like the image you had mary, except in the a bluish color like my background =3

it would be much appreciated.

Thanks in advance.

Chris.

Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Christopher Hillman -

LOL i got it to work... except..... now my content wont show. I found a way around it. this is what i've done so far.

in my styles_color.css i've put in this css code

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

in my header.html i put this in to support that.

<style type="text/css">

html, body {

height: 100%;

margin: 0;

padding: 0;

}

</style>

<img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/background.jpg

" alt="background" id="bg" />

</style>

<!--[if IE 6]>

<style type="text/css">

html { overflow-y: hidden; }

body { overflow-y: auto; }

#bg { position:absolute; z-index:-1; }

#content { position:static; }

</style>

<![endif]-->

 the background works but im assuming that i need to add content tags or something in order to get everything else to show, does anyone want to help me with this tomorrow, since its time for me to head home, i have made some progress though =3

Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Well to help you until you get the code and whatever right so that your site works as you want it, here's a gradient for your background in png format. it's a 1px x 600px less than 1kb. All you need to do is to code it in your styles_color.css as

body { background: #2F93C1 url(bground.png) top left repeat-x fixed; }

By repeating it on the X-axis it gives a gradient look across the screen and if you set the background color as #2F93C1 (which is the same color of the lightest color used in the gradient, the graphic will blend into it and be seamless.

Here's the image...
bground.png


Average of ratings: -
In reply to Mary Evans

Re: stretched background

by Christopher Hillman -

in terms of a gradient background i've got one which is going sideways rather then down, thats working fine for me but im actually trying to set a picture as the background. i'll show you what happens when i do, im attempting to make the solid picture so it does not move, i managed to get that done, with the code above; however this is what happens when i attempt to view anything.

untitled.jpg

Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Christopher Hillman -

notice the background scrolling is working perfectly; the problem is the content; apart from the heading does not seem to be showing

EDIT: i used firefox+firebug and webdeveloper and deleted the background code, the content is BEHIND the background, is there any code that i can use to move something to the very back?

Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Mauno Korpelainen -

Z-index is tricky and IE is buggy:

http://www.vanseodesign.com/css/css-stack-z-index/

http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Average of ratings: -
In reply to Mauno Korpelainen

Re: stretched background

by Christopher Hillman -
basically it says negative variances dont work in ie 7; thus i need to work out where the content section is in my css coding and make that a z-index of 10 whilst i make my background a z-index of 1 and it should work alright.
Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Mauno Korpelainen -


You should just make sure that content has a higher z-index than previous image (background)

In header.html we usually can use div with id="page" that has most content or you can add a new "wrapper div" and give it higher z-index:

<img id="background" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/background.jpg"/>

<div id="page">
...content is here

Try in css file

first - at the beginning of you css file

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

and then at the bottom of css file

#page { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; }

#background { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;}

IE (particularly IE6) is just buggy but it can use also negative z-index - and mess up everything (Because Internet Explorer versions 6 and 7 incorrectly reset the stacking context in relation to the nearest positioned ancestor element.).

Average of ratings: -
In reply to Mauno Korpelainen

Re: stretched background

by Christopher Hillman -
should i delete the original background css codes in my file? or just add this?
Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Mauno Korpelainen -
This previous code should be enough - but take a copy of your original file first, it's easier to get it back if you need it...

Themes and css of moodle are never "ready" - you will find always some things that could be fixed or changed... big grin
Average of ratings: -
In reply to Christopher Hillman

Re: stretched background

by Christopher Hillman -

hmm i got it working =3 this is what i did. i originally had 3 different css codes for different parts of the moodle site for background. i deleted 2 of them and made the general one look like this

body {
 background-color: #FFFFFF;
 background-image: url(#background);

I then went to the bottom of the css file and added this.

#background { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;}

after that i added to the bottom of my header.html file

<img id="background" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/background.jpg"/>

thus i dont really need to use the z-index file. because the actual css coding is working towards my advantage with background-image being whats read as #background.

its working in ie6 and ie7, i checked firefox it also works there too

Average of ratings: -