background image size change

gian / 2008-11-24 13:38:27   

hi guys.
i have a question, that maybe is already answered somewhere. but i didn't find the answer. also i'm completely new to all of this stuff. first website...
what i want is that the background image is "too big", so that i have to scroll to right and down to see also the rest of it. is this possible?
what do i have to change in which file in which folder in order to make this possible? if it's possible.
second question is: where can i change the settings for the position of the background image? so that it begins on the same hight as my menu? the settings of the menu i was able to change... al least...
check this page as reference:
http://www.photographersinconflict.com/videos/the-man-on-the-street/

thanks for any help.
gian

Vaska A / 2008-11-24 15:00:30   

It's been discussed around here...but this is an advanced thing to do...there are many ways to do it.

There isn't a simple answer on this one...try it...see how it goes...ask if anybody has advice then.

gian / 2008-11-24 15:30:56   

uups... advanced. so, i don't know if it's for me then ;-)
but i will search the forum again...
thx anyway

arsondpi / 2008-11-24 19:39:22   

maybe try a google search and/or be more specific...

gian / 2008-11-25 17:26:30   
  1. ok, after having done some google-research. going through the html and css-tutorials on w3schools.com and other stuff (also again through the forum here), i try to be a bit more specific now, because i didn't really find a solution which I can use with indexhibit, i think...
  2. i tried some stuff in the style.css like:
  3. background-image: url('xxx.jpg');
  4. background-repeat: no-repeat;
  5. background-attachment: 
  6. which is probably wrong, but i didn't find the right file in the ndxz-studio folder, where the background images are handled.

but as i said, i'm completely new to all of this... so maybe i overlooked something or done it not right...

what i try to do is the following: i want the background image not to end at the borders of the browser. i want that the browser gets scrollbars on the right and bottom of the bottom to scroll to down and right and back, so that the person can explore the hole background image.
maybe it's not possible to do this with the background picture as an actual "background-picture". maybe i have to put it as a simple image. but then i have to be able to put other pictures and videos and/or texts on top of this image.

i don't know if i was clear, because my english is not superb and maybe i also do not always the right terms.
if anybody understands what i want to do, i would very much appreciate any help.
thanks

maybe that's also an important info: i want on different sites different background-images...

arsondpi / 2008-11-25 18:17:31   

What indexhibit does is to create fixed position background images.
You need to find a way to move around with the help of scrollbars when the background image is big. I'm fiddling with overflow: scroll; but there's javascript involved and it seems that I'm doing something wrong.
What I can think of, is to create a style sheet for a div with specific width and length. Then apply the background image of your choice and insert it before the content (text+media) in the edit window.
Example:

  1. <div style="background: url(http://demo.indexhibit.org/files/gimgs/2934_guiness.jpg); 
  2. position:¬†absolute;¬†height:468px;¬†width:866px;¬†overflow:¬†auto; z-index:-1;"></div>

Edit: this is a crap solution. Anyone has a decent (clever) one?

gian / 2008-11-26 02:22:28   

great. thanks arsondpi. i will try to understand and get in to your solution tomorrow.

gian / 2008-11-26 16:49:22   

where do i have to put this code?
i think it should be in a .html-file? but which one?
sorry for my stupid question...

and what do you mean by insert IT?
the background image or the code?

and what do you mean by before the content in the edit window?
you mean to insert the code into the window where i can write text on the exhibits:edit site instead of uploading the image on this site with the background image upload tool?

gian / 2008-11-26 17:03:08   

wow, i did reach some success...
i uploaded a image to my /public_html/files/gimgs/
and did put the code into the window on exhibits:edit site.

but now the text that i want to write on top of the background image influences the position of the background-image. it goes down when i write text before the code or the text is on the bottom of background image, when i write text after the code...

check

arsondpi / 2008-11-26 19:35:05   

What seems to be the problem with text?
Positioning things has to do with CSS and you'll probably need to do some digging yourself until you get the desired look...
hmmm... maybe I didn't understand well... How about telling us -even with a screengrab- what you're after...?

gian / 2008-11-26 22:39:07   

i come closer to what i want!!!! yeah...

see what i want?

forgot to put the text - and on this site also the video - before the "div" ends.

not sure what i'm going to do with the video sliding under the menu, maybe i'm going to try to have the menu moved with the rest as well. have to think about...

and i have to think about how to get the slideswhow on this side aswell on top of my background image... not easy probably.

thanks a lot for the help up to now...

arsondpi / 2008-11-27 09:02:28   

I can't think of any other decent way at the moment. Maybe someone else can give it a go.
I tried of something else but it's a simple workaround on the same solution.
I suppose it can be done if you know how to get background image size via php - you will then need to edit the css for your page etc...
Enter at your own risk...

Vaska A / 2008-11-27 09:17:00   

The way to do this is build you site with layers...and then take the layer in back and fill it with the image. And from there you have options to adjust things with javascript to maintain the aspect ratio.

The problem that exists though is that it's a bit of work to keep the image both with ratio and from not extending to the bottom or the side...need javascript to manage what you really need there.

The only example I have of this is the l'Escaut website that I did years ago. The design incorporates the image not flowing to the bottom in some situations...

gian / 2008-11-30 14:54:35   

hey guys.
i worked on our site quite a bit in the last days. actually more on the videos. uploaded them. everything works very fine. great!
but the things i asked above are too complicated for me as the page should be ready today ;-) so i discarded the idea with the scrollable background for the moment. maybe i will come back on this some day.
but i thank you very much for your help and this great tool!
i let you know when the page is ready to add to the list...

camarim / 2009-04-21 17:02:33   

Hello Vaska,

Saw your site - l'escaut - congratulations, it woked out really fine! it is very easy to use and very appealing.

We also want to adapt the background image to the changing sizes of the window... Have seen your style.css with firebug (nice tip, thanks) but couldn't really get nowhere...
this is what we did:

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

Do you have any suggestion for us?
Thanks...

Webpage

Vaska A / 2009-04-21 17:37:46   

It's much more complicated than that...I'm sorry to say. People around here have tried and I'm not sure anybody has pulled it off...it's an advanced thing to do.

It requires completely re-engineering the template.

camarim / 2009-04-21 17:41:03   

:(
could live with that....
will the next indexhibit version include this?
;) Hope so!
Thanks anyway...

Vaska A / 2009-04-21 17:43:27   

No...it's not a feature...it's a customization.

camarim / 2009-04-21 17:51:28   

OK.

1 last idea...
and do you think a way around this could be having the background image "insertion point" on the bottom right instead of the top left corner? (I don't know if this exists in programing)

Vaska A / 2009-04-21 18:27:13   

Yup...could work...but it won't scale...

CSS Background

camarim / 2009-04-21 19:16:46   

wonderful!!!
worked out fine: check it out..!!!
thanks & c u

camarim / 2009-04-21 19:18:03   

forgot to put the code, sorry:

body {
    font-size: 12px;
    font-family: Arial;
    line-height: 24px;
    background: #ffffff;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center center;
}

eazzy peazzzy

Vaska A / 2009-04-21 19:20:39   

Hey, that's great.

;)

sas_steven / 2009-07-02 14:29:20   

is this code that you've [camarim] shown supposed to affect the built-in 'background image' of indexhibit [where you load a file less than 2 mb on the right side of the text enter area in any exhibit]?

i have included the code you show in my style.css, and uploaded an image for my home page, but it still tiles based on the image's original pixel size. i thought the 'background-repeat:no-repeat' would eliminate this?...

you can see my site Here.
any guidance would be much appreciated. thanks!

Xpointe / 2009-11-17 08:21:32   

I have put in your code in my css, i think it works well. but one thing i wanna know is that how you can manage to make your image to fit all size in different screen and resolution? when i open with a bigger pixel screen, there will be white gap at the bottom and on the right. Should i jus enlarge the image to fit that?

Also, how i can customize font size in different pages in the content? I have tried changing that in css, but everything will be affected. I just want some title to be bigger and in different color. What should i do with that?

Many thanks! I am still trying...=)

Xpointe / 2009-11-17 08:22:24   

oh.this is my site.crosspointecreative

Philius / 2010-04-30 11:28:55   

Hello Vaska!

Thanks to you and the folks here I've been able to rebuild my site. But I've been looking for a looong time for something like you did in l'Escaut site. I'm a photographer and I really would like to have a page where there will be all tags (like Portrait, Landscape, etc.) and the user could select the categories as in the l'Escaut site (projects section). So is there any way that I could do this with my limited knowledge of using js/css? and you could help me?

Vaska A / 2010-04-30 11:31:28   

With limited knowledge? Nope. ;)

monded / 2011-04-18 23:04:08   
  1. <style>
  2. img {
  3.         width: 100%;
  4.         position: absolute;
  5.         top: 0;
  6.         left: 0;
  7. }





This thread has been closed, thank you.