[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2009-04-19
13
Medium Priority
?
1,423 Views
Last Modified: 2013-12-25
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
Comment
Question by:IanTh
  • 6
  • 5
12 Comments
 
LVL 3

Assisted Solution

by:NIPPLES
NIPPLES earned 1000 total points
ID: 24179910
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
 
LVL 30

Author Comment

by:IanTh
ID: 24180420
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
 

Assisted Solution

by:xjdx
xjdx earned 1000 total points
ID: 24180504
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 30

Author Comment

by:IanTh
ID: 24180772
done still not working is it because its a gif?
0
 
LVL 3

Expert Comment

by:NIPPLES
ID: 24182422
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
 
LVL 30

Author Comment

by:IanTh
ID: 24183110
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
 
LVL 30

Author Comment

by:IanTh
ID: 24308930
anyone ?
0
 
LVL 3

Expert Comment

by:NIPPLES
ID: 24312404
"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
 
LVL 3

Expert Comment

by:NIPPLES
ID: 24312431
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
 
LVL 30

Author Comment

by:IanTh
ID: 24313275
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
 
LVL 3

Expert Comment

by:NIPPLES
ID: 24316836
That's all fine... just don't forget to close this topic by accepting an answer from one of the experts ;)
0
 
LVL 30

Accepted Solution

by:
IanTh earned 0 total points
ID: 24526205
no don't I will award points please re-open so I can as some comments helped
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Learn how to automatically add page numbers in your next InDesign project. This can be very helpful in multi-page books and magazines that you are designing. Make sure your Pages window visible.:  In the document you wish to add page numbers to. Act…
Suggested Courses
Course of the Month17 days, 22 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question