stretched background

stretched background

Christopher Hillman tomonidan -
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);
{

O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

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

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

M Tabassum
O'rtacha reytinglar: -
In reply to Mary Evans

Re: stretched background

Christopher Hillman tomonidan -

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?

O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Mary Evans tomonidan -
Core developers rasmi Documentation writers rasmi Peer reviewers rasmi Plugin developers rasmi Testers rasmi
Check this out STRETCH BACKGROUND
O'rtacha reytinglar: -
In reply to Mary Evans

Re: stretched background

Mary Evans tomonidan -
Core developers rasmi Documentation writers rasmi Peer reviewers rasmi Plugin developers rasmi Testers rasmi
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
O'rtacha reytinglar: -
In reply to Mary Evans

Re: stretched background

Mauno Korpelainen tomonidan -

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)

O'rtacha reytinglar: -
In reply to Mauno Korpelainen

Re: stretched background

Mauno Korpelainen tomonidan -

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.

O'rtacha reytinglar: -
In reply to Mary Evans

Re: stretched background

Christopher Hillman tomonidan -
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
O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Mary Evans tomonidan -
Core developers rasmi Documentation writers rasmi Peer reviewers rasmi Plugin developers rasmi Testers rasmi
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! Tabassum

Back to the drawing board!

LOL

M Tabassum

EDIT!!!

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

...Exit stage left! LOL

O'rtacha reytinglar: -
In reply to Mary Evans

Re: stretched background

Christopher Hillman tomonidan -
do i need to delete my other background tagged areas?
O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Christopher Hillman tomonidan -
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
O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Christopher Hillman tomonidan -

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

O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Christopher Hillman tomonidan -
apparently the -1 for z-index is not a registered value, it only seems to allow positives...
O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Christopher Hillman tomonidan -

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.

O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Christopher Hillman tomonidan -

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

O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Mary Evans tomonidan -
Core developers rasmi Documentation writers rasmi Peer reviewers rasmi Plugin developers rasmi Testers rasmi
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


O'rtacha reytinglar: -
In reply to Mary Evans

Re: stretched background

Christopher Hillman tomonidan -

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

O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Christopher Hillman tomonidan -

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?

O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Mauno Korpelainen tomonidan -

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/

O'rtacha reytinglar: -
In reply to Mauno Korpelainen

Re: stretched background

Christopher Hillman tomonidan -
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.
O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Mauno Korpelainen tomonidan -


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.).

O'rtacha reytinglar: -
In reply to Mauno Korpelainen

Re: stretched background

Christopher Hillman tomonidan -
should i delete the original background css codes in my file? or just add this?
O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Mauno Korpelainen tomonidan -
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
O'rtacha reytinglar: -
In reply to Christopher Hillman

Re: stretched background

Christopher Hillman tomonidan -

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

O'rtacha reytinglar: -