0

I am using Dreamweaver CS4 and I need to alter the site so that the background automatically scales. I do not want to use a repeated background (because this particular background does not repeat nicely) then float the body over that, but would rather the entire site automatically scale based on the users browser window.

Example I like: http://www.150-jahre-geze.de/150.html?no_cache=1

I do like this full screen page I do like other full screen pages, but we don't have the photography or graphics to support this concept at this point. How do I do this without a slider? Thank you for your help. I have tried all I can think of and find at this point, but think I must be phrasing my question wrong since I don't get any answers.

Rich
  • 5,603
  • 9
  • 39
  • 61
Willis
  • 11
  • 1
  • 1

2 Answers2

0

What you are looking for is a responsive background image....its not that easy unfortunately but checkout

Responsive background image in div full width

Responsive css background images

Community
  • 1
  • 1
hendr1x
  • 1,470
  • 1
  • 14
  • 23
0

The site you link to is using an effect called parallax scrolling, see e.g. http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html

It sounds like you are just starting out in coding and would do well to look into some basic CSS tutorials, see e.g. http://www.w3schools.com/ Whether you are using Dreamweaver or anything else, the process of writing the code is going to be the same. Ignore the visual editor and other Dreamweaver b/s - you have to learn the code eventually, and it's quicker in any event than hacking around in Dreamweaver.

It's not clear from your question exactly what you are trying to accomplish, but css properties like width:100% will help you.

I'm guessing you are trying to make a full screen background image that scales with the window; in this case, what I'd do is set the image not as the background of the body tag, but instead just as an image in a div, then set the min-width and min-height of the image to 100%, set the height and width of the div to 100% (which will fill the browser, assuming the div is not inside any other wrapper-type div).

To get it to reside in the background, use the CSS property z-index: -99999999 - other stuff will then appear in front of it. If you don't want it to scroll out of view when the page scrolls, use the CSS property postioned:fixed.

Alternately, something I just discovered while answering your post, you might be able to set background-size: cover as a property of your background image - it would achieve much the same as my workaround above. I've never tried it, but sounds like it would work (though maybe check on browser support?).

Hope this helps. Again, use w3schools to get your head around CSS and get out of Dreamweaver and into something like Sublime Text 3 as soon as you can!

user2654408
  • 213
  • 2
  • 10