Streaming live at 10am (PST)

Fixed background


#1

Hi people
I will appresate some advise how to set fixed background image on entire page like the site from webflow gallery http://artsandideas.co/

Thanks in advance


#2

Hi, you can set the background property on the Body class:

Set image to cover, center positioning, no tiling, fixed.

You can also set width and height properties if you want to set the background image to take only a certain dimension. Any other elements then which have a transparent background, relative the body, will show the background image you have selected.

Hope that helps, If you just want section backgrounds to be fixed, then you repeat the process, but do it for the section class element, that way you can have two layers of images and a nice effect...


#3

Thanks a lot, Cyberdave
Unfortunately my other elements appear above or under the background image, but not on it.
I have tryed background directly into the body in section and in div but cant fix element on this background

Where I am wrong?
Thanks in advance


#4

Problem solved, Thanks a lot!


#5

This is not working as it should. Think it is a bug. See site: http://forum.webflow.com/t/fixed-background/3528

The background is stopping half way even though I chose background-cover

Also there seems to be a bug on class divme1. I had to resort to using a negative margin-top (-6) to make it line up which to me shouldn't be. Remove the margin-top and you will notice the extra space webflow inserted.


#6

I need a response to this bug/issue, please thanks.


#7

Hi @topelovely, thanks for you request, I will take a look into this, and see what i can find out what's happening. Which of your sites is this happening ? The site link you posted is just a link to this current post in the Forum... thanks ! Dave


#8

Thanks. Sorry this is the link https://webflow.com/design/ghm?preview=4e5619e47fc07c8323d27c17e0247587

Please note: I have visually forced it to work by applying a workaround with negative margin-top of -6 (see class divme1, divme2, etc). Secondly, if you look at my divme6 class, I have also added a margin-top of -200 to make the box line up the way I want after sweating it out for days. Is this right? Using negative values? I think webflow needs a "vertical-alignment feature"


#9

Any update Cyberdave? Will appreciate feedback.


#10

Hi @topelovely, I did have a chance to look at your site, and the first thing, is that for the divme1 element, it seems you do not have the background image that you uploaded, in Fixed position, see the screenshot the way it should be:

Also, your divme1 element has a fixed height of 600px and so the background image will not extend more than 600px in height, when you are using fixed dimensions in your styling. Your divme2 section has a height of auto, and that is probably extending in height, taller than 600px, and thus the gap... if you want everything to be same height, give your divs that need same height the same height value in the styles panel.

Try checking that, and then let us know if you need any more help... cheers !


#11

Cyberdave am more particular about the body background which is not working well. Please.


#13

Please see the screenshot: http://awesomescreenshot.com/03037vjz9c


#14

Hi @topelovely, thanks a lot for your screenshot, that helps to explain the issue. I have made a couple of changes to your site, to get this issue corrected, here is my screenshot:

Here are the changes I made:

  1. I set BG to center position, selected Cover for bg image and selected Fixed positioning
  2. I removed the -6px top margin of the divme1 and divme2 elements

divme1:

divme2:

  1. I gave top margin of -233px to the divme6 element, with a height of 554px

divme6:

Webflow is not inserting any arbitrary spacing, it is that you have so many elements using fixed heights etc, somewhere along the way, I think you have some extra margin or padding somewhere in your site with some element that will have some other effect on your page...

Check to see if making the updates above will help your situation, and let me know how it goes... At least from the screenshot I have provided, it seems these updates are working, but I have not gone through every element on your site, so you need to do that yourself, and check that all your element is styled consistently as you desire.

I hope this helps... cheers !


#15

Thanks for all your meticulous effort Dave. But the body background is just not working. I have done everything, but am still seeing the white long patch. See my setup screenshot: http://awesomescreenshot.com/0d837vu535 . I even went as far as giving the body a class. Yet no changes. What am I missing? I have refreshed webflow several times. (On windows 8.1 Chrome ver. 36.0x via visualization VMFusion 6.0.4. Mac OSX Maverick.) Thanks.


#16

Hi @topelovely, thanks for the update, I am checking more on your site... can you do me one favor, on the bg image for the Body, can you change the background image so that it uses th "Contain" option in the BG image settings, and then publish, then go back in and change that BG image from Contain back to Cover, and then republish again, and see if you notice any changes, I am taking another look at your site now... I can also send you a copy of the site with my change, so you can open that, and see if then the copy of the site works for you... maybe easiest thing to do, is that I provide you with the changes already made and you check if that is working, and then use the copy I send you as the master copy.... Get back you soon after looking at your site again...


#17

I have done that. No Changes Dave. No changes.


#18

H Dave any update on the background image cover stuff?


#19

hi @topelovely, I have been looking at your site, I think the white space is showing in the divme1 element, because you have the height set to a fixed pixel height... change that to 100% and and see how it works for you... also, can you check out this copy I made, where I made that change, and see if you still have the problem?

http://ghm-fixed-background.webflow.com/

Cheers, Dave


#20

Dave thanks for looking into this, I think something happen to this file and webflow is not going back to its usual form, performance-wise. What I did in the interim was to change the image to tiled pattern. When I tested the background-image cover in another site, It worked perfectly but on this site no it doesn't. I think I would have to do with the pattern approach I have so that I can move on. Thanks for the effort. But I believe this is a bug.

Cheers
Bosun


#21

hi @topelovely, did you look at the site link I posted, it is working for me on Win 8.1 and chrome 36 beta. You had a fixed height of 600px and it need to be 100% if you want the divme1 element to show correctly. There is not bug in Webflow I believe, but good if you can get the css styles straightened out.... Please let us know if you have any more issues or reach out on the forum.

A really good thing to do also, is to view our tutorials:

http://tutorials.webflow.com/setting-width-and-height-in-webflow
http://tutorials.webflow.com/adding-background-images-and-fill-colors

If you still experience issues, you might consider contacting one of the many freelancers on the site, who can help you with your design...

If there is anything else that we can help you with, please let us know.

Cheers!