• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1430
  • Last Modified:

use an image for background dreamweaver cs4 to fill the browser window

Hi Guys

I am currently designing a site and I want to achieve a photoshop scaled image to match the window size
I saved the image as a gif and inserted in my design and set width=100% it tiles it when I go beyond the size of the original
I though if I said 100% width that would work but it doesn't

help
0
IanTh
Asked:
IanTh
  • 6
  • 5
3 Solutions
 
NIPPLESCommented:
Use CSS like so, but replace the height with the desired height of your image...

.whatever {
width: 100%;
height: 800px;
background: url ('path/to/your/image.gif') no-repeat;
}

<div class="whatever">
<p>Enter any other content here</p>
</div>

Open in new window

0
 
IanThAuthor Commented:
no it still repeats look at my test web server ian.no1net.co.uk/index.html and you see what i# mean it still repeats and I don't know why I have you class in my css but it still doesn't work
0
 
xjdxCommented:
Ian,

Your problem lies within your CSS, on line 35 of this file - http://ian.no1net.co.uk/css/main.css remove the commands:

height: 100%;
width: 100%;

Now inside your index.html file, remove the lines:

body {
      background-image: url(images/backoverall.gif);
}

Now that's cleaned things up a bit back to your CSS file, on the body tag use the code below and it will render as you like.
body {
    background-image: url(images/backoverall.gif);
    background-repeat :no-repeat;
    height: 800px;
    margin: 0 auto;
}

Open in new window

0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
IanThAuthor Commented:
done still not working is it because its a gif?
0
 
NIPPLESCommented:
Oops.. I think you should not have removed the width:100% on class ".whatever".  That is what you need to get the image to stretch to screensize as you desire...

Just drop back in the width:100% on the class for the DIV and it should work.  It should not matter if you are using a .gif image :)

0
 
IanThAuthor Commented:
no still not

body {
      background-image:url(../images/backoverall.gif);
      background-repeat :no-repeat;
      height: 100%;
      margin: 0 auto;
      width: 100%;      
}

by the way I know you can view my index.html source code but I dont know how you can see my main.css as its in the css folder please explain
0
 
IanThAuthor Commented:
anyone ?
0
 
NIPPLESCommented:
"by the way I know you can view my index.html source code but I dont know how you can see my main.css as its in the css folder please explain"

Every file you use in web design is downloadble publicly once it's path is known.  In fact every time you view a web page it's downloaded to your computer, images, CSS, JavaScript etc... all of it!  :)

It's the nature of the "www"...

Any luck with getting your background image to work?  Also, what browser are you using?  I doubt it but it could be a browser issue.

0
 
NIPPLESCommented:
Hi there,

You may also want to Google search on "W3C Schools XHTML" because your web document is sayings it is XHTML but there is allot of invalid XHTML code in it... this means a web browser will have trouble displaying your document if you use an incorrect doc type declaration or if you use invalid coding, for example...

<IMG WIDTH=200 HEIGHT=200 ID="myImage" NAME="myImage"
  SRC="images/image0.gif"></IMG>

is invalid in XHTML and should be <img src=" height="" id="" name="" /> using a "self closing" tag and all lowercase code.

Also I just checked your main css file and there is nothing in there for the body of your document!  Are you sure you uploaded your modified CSS file?  If the css is not there it can't work lol...
0
 
IanThAuthor Commented:
it was put there by dreamweaver cs4

I have given up for know and concentracting on a shaded border for all sides to push the center forward its still a work in progress so don't be harsh
http://www.up2youmobiles.co.uk/test2.html
what do you think
0
 
NIPPLESCommented:
That's all fine... just don't forget to close this topic by accepting an answer from one of the experts ;)
0
 
IanThAuthor Commented:
no don't I will award points please re-open so I can as some comments helped
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now