Background image doesn't preview in browser

Is there something I'm not understanding about my Dreamweaver
Site settings? I'm trying to code a site using CSS which has a
background image in a div but it won't preview in the browser. When
the file is linked to an external style sheet, it displays in
Dreamweaver's design view but not Preview in browser. But when the
styles are included in the file itself, it works. It's a dynamic
site configured for PHP MySQL. Everything in the style sheet seems
to be working except this. I've tried site relative and document
relative links. I even tried posting the image to a live server and
linking it with an absolute url.
Here is the path structure:
BambooJewelry/index.php
BambooJewelry/cw3/assets/css/bamboo.css
BambooJewelry/cw3/assets/images/home/logo.gif
Here is the code in the css file:
div#logo {
background-image: url(../images/home/logo.gif);
background-repeat: no-repeat;
width: 700px;
height: 73px;
Here is the syntax for the linked style sheet in the
index.php file:
<link href="cw3/assets/css/bamboo.css" rel="stylesheet"
type="text/css">
As to the site settings, the local root folder is
Macintosh HD:Library:WebServer:Documents:BambooJewelry:
the http: address is set to
http://localhost/BambooJewelry/
Any help with this is sincerely welcomed!

make sure you're not overriding that rule somewhere else in
your site or farther down the style sheet or with a more specific
rule. Rules directly in a page are given more importance than rules
in an external sheet.

Similar Messages

CS4 background-image doesn't show in browser

ok...I have cs4...
the CSS is:
body {
    background-image: url(/Assets/qlogoBKGlt.gif);
    background-repeat: no-repeat;
    background-color: #fff;
IT SHOWS UP in the DESIGN window of DW. It won't show up in Firefox or Safari...most up-to-date versions.
The line of code in the html file is:
<body>
The header code;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="styles/style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="favicon.gif" type="image/gif" / >
* Proof that the background image is there:
http://www.solterrasolarcells.com/staging/Assets/qlogoBKGlt.gif
* THE HTML page that should be displaying this:
http://www.solterrasolarcells.com/staging/index.html
* The CSS STYLE SHEET:
http://www.solterrasolarcells.com/staging/styles/style.css
Can someone tell me what I am doing wrong?
Thanks, -bill

The path in the CSS is wrong.
You're thinking that the index.html file is in the root directory of this beta site hence the root relative reference in the CSS.
However, as far as the server is concerned, the root directory (where the index file is located) of this beta site is in a subfolder called "staging".
http://www.solterrasolarcells.com/staging/index.html
The CSS in the body selector for the background is pointing to /Assets/qlogoBKGlt.gif.
The full address of that path is http://www.solterrasolarcells.com/Assets/qlogoBKGlt.gif but the Assets folder does not exist at root level on the server, hence no image appears.
So for a root-relative path, you need to prefix the CSS with the "staging" folder
i.e.
body {
    background-image: url(/staging/Assets/qlogoBKGlt.gif);
    background-repeat: no-repeat;
    background-color: #fff;
or for a document-relative path from the "styles" folder where the CSS file is located, go up a level:
body {
    background-image: url(../Assets/qlogoBKGlt.gif);
    background-repeat: no-repeat;
    background-color: #fff;
When the site goes live, the "staging" folder will presumably disappear (all files will come up a level) and therefore any root relative links will have to be altered to reflect that.

Page background images show in preview but not after uploading

Hi -
I've built a page with a flash animation, and some other
minimal information below the movie. I have a page background image
that should be repeating horizontally behind everything. When I
preview it, all looks great! After I upload it to the actual site
the background images disappear. The code is all within the page.
Any ideas?

never mind... problem resolved.
my error in not checking my files over. oops.

Wrapper div background image won't appear in browser...

Hi All,
Here's a link to the test site:
http://www.davidcoshdesign.com/test/tee
If you go to 'About' – top right nav, there should be two vertical 'lines' running all the way down the page(s), either side of the main body copy.
All the pages are created from the same template.
It's a repeating background image in the #wrapper div. I can see it DW, but not in any browsers.
I guess it's not linking somehow... but can't figurte it out.
Also, the layouts on the 'Partners and 'Philosophy' pages 'jump' when you go to them. Again, I guess there's an error in the code somewhere...
Any help with these two things would be very much appreciated.
RP

Change this -
#wrapper {
    background-repeat: repeat;
    background-image: url(assets/images/columnedge.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 19px;
    font-weight: normal;
    color: #999;
    text-decoration: none;
    width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: auto;
to this -
#wrapper {
    background-repeat: repeat;
    background-image: url(assets/images/columnedge.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 19px;
    font-weight: normal;
    color: #999;
    text-decoration: none;
    width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: auto;
   overflow:hidden;
You need to clear the floats so that div#wrapper will contain the contents. To fix the jumping, add this to your CSS -
html { overflow-y:scroll; }

Background image doesn't work in dreamweaver 8

I have dreamweaver 8 and trying to install a background image through modify>page properties>appearance.
I created my background image through fireworks and saved it in my "images" folder. However when I access it through dreamweaver, I'm not able to see it on my page. I can, however, apply my background color, but not my "bg.jpg" image.
Why not?
Can somebody help me?

My guess is that your image might not be suitable for web output.
Did you optimize your image for the web? I don't use Fireworks but in Photoshop it's called File > Save for Web. A typical background image that repeats horizontally and vertically on screen should have a filesize of around 10-20 KB.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Background image doesn't fill window in fullscreen mode

Guys I have an image which is bigger than stage, but when I play this movie in player the background image is cropped on each of sides, that is on left and right there is a gray margin around 2cm wide.
Any ideas how to fix this so the background image covers entire stage?
Thank you.

Hi, Thanks for your reply, here is the image, and I've marked the margins with read line.
Thank you.

Why doesn't a body tag background image show up in a browser?

I've set a gif image to repeat as a background in my body tag and I can't get it to preview in a browser. I see the background fine when doing a live view in DW. I've tryed other images and none will preview in a browser. I've tryed to trouble shoot everything I can think of why this is not working and at this point I'm dumb-founded. Any help here would be most appreciated, I'm swamped with work and I really need to get this file off for client approval. Thanks in advance for any response - Vanessa
External CSS
body {
color: #000;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
background: #DAD7C5 url(/_assets/bck.gif) repeat-x left top;
Page's Source Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Forster Sales</title>
<link href="_css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<meta name="Keywords" content="construction toys, eco-friendly toys, eco-friendly crafts, European toys, European baby products, made in Canada, flat head in babies, canadian sales representatives, Love Nest, Sesame Street, Roary, Nascar, Ben 10, Tamagotchi, Harumika, Disney, kids cookbooks, K'NEX, Bandai, Eebee, PlayMais, Clics, Happy Cube, Babymoov, MOMMA, Bloco, Handstand Kids" />
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="container">
    <div id="logo"></div>
    <div id="header">
      <p><span class="blueBold">Forster Sales</span> provides Canadian retailers with

THANK YOU! !!Yeah, that wasn't the entire code, but your tip to look at the path /assets/ steered me in the right direction.
This is what I originally had:
background: #FCFCFB url( /_assets/bck.gif) repeat-x left top;
when I added the two decimals the problem was fixed
background: #FCFCFB url(../_assets/bck.gif) repeat-x left top;
Here's the page on my server http://www.forstersales.com/proofs/proof1/index.html
Thanks again!
Vanessa

Background image doesn't display in browserlab

I am using dw cs5 to view my pages in browserlab. I have a background color in the body and an image in my main div. and sometime the backgroundin my main container div will display and other times it will not, I am new to browser lab and am using a windows 7 64 bit pc is this an issue with browser lab or with my design. I have checked my design and cannot find any obvious issues. Also on noticed on some browsers, generally firefox or chrome when I role my cursor over a link it recognizes it and gives me the option to select it but in ie browsers it does not is this normal.

Hi odiekat,
It's difficult to say whether this is an issue with your page or with BrowserLab without being able to view the page ourselves. When you test in BrowserLab, do you see the problem with all the browsers you're testing in, or only some? Can you try bumping up the screenshot delay setting (the numeric spinner next to the URL entry field) to see if that makes a difference?
Is there a public URL you can point us to so we can take a look at it ourselves, or could you zip up and email all the needed files to me: mrausch (at) adobe (dot) com ?
Mark

Background image moves when previewing the site

I set up my background in the master. When I preview my site in the browser, the background location jumps around slightly as I navigate between pages. Any ideas?

Hi Brad,
i'm also getting this. Really odd movement with both shape elements foreground and background and how type is rendering and moving up and down at will, as well as reflowing differently. Used Arial as was web safe so not sure why.
Also have in sep text boxes as seemed normal way to do it.
I had a more evolved thing going on with small shape bars between project title and the rationale on left hand side bar but that's all had to go out of the winder since the last update as moving was playing havoc page to page.
I also had to paste in place my Navigation for site on each page individualy instead of using a MASTER to get to work correctly. Have tried to now put this on a NAV layer above all other content on MASTER as well as pinning it top and causing more movement so didn't upload or save.
Have some screen grabs of what I am seeing in the PREVIEW in Muse top and bottom of page and also the DESIGN view top and bottom of page.
As mentioned, haven't saved or uploaded to my ftp as expecting a client to look at some of my work and can't afford them looking when it's busted with some issue or another.
Any light shed on this issue would be greatly appreciated. As I keep saying, I love the program but there do seem to be some big issues that are making me spend lots and lots of investigatory time with hit and miss results.
Thanks in advance.
Site url as it currently stands is: http://www.saraundo.com

Background image in extended awt.Button doesn't show.

Hi all
I have an applet that has only an awt.Button visible on the page. Because of layout requirements I need to style that button with a background image. I have extended the java.awt.Button like this:
     class ImageButton extends Button {
          public void paint(Graphics g) {
               super.paint(g);
               g.drawImage(getImage(getDocumentBase(), "../img/loadSertificate.jpg"),
                         0, 0, null);
     }and use the extended:
     public void init() {
          mSignButton = new ImageButton();
          mSignButton.setLocation(0, 0);
          Dimension appletSize = this.getSize();
          mSignButton.setSize(appletSize);
          mSignButton.addActionListener(new ActionListener() {
               public void actionPerformed(ActionEvent e) {
                    signSelectedFile();
          this.setLayout(null);
          this.add(mSignButton);
     }Now everiting is ok but when the applet is loaded the background image doesn't show and only a plain gray button is visible. The interesting part is that the image does show after I click somewhere in the browser's window and later on it's always visible as expected.
Below is part from the log from the java console:
basic: Applet started
basic: Told clients applet is started
Loaded image: http://ip:8080/UserManagement/img/loadSertificate.jpg
network: Cache entry found [url: http://ip:8080/UserManagement/img/loadSertificate.jpg, version: null]
network: Connecting http://ip:8080/UserManagement/img/loadSertificate.jpg with proxy=DIRECT
network: Connecting http://ip:8080/UserManagement/img/loadSertificate.jpg with cookie "JSESSIONID=8A0936441BDA3215A10D9798742C4685"
network: CleanupThread used 39850 us
network: ResponseCode for http://ip:8080/UserManagement/img/loadSertificate.jpg : 304
network: Encoding for http://ip:8080/UserManagement/img/loadSertificate.jpg : null
network: Disconnect connection to http://ip:8080/UserManagement/img/loadSertificate.jpg
Loaded image: http://ip:8080/UserManagement/img/loadSertificate.jpgAny suggestions how to fix this issue?!
Edited by: factor5 on Nov 12, 2009 1:27 AM
Edited by: factor5 on Nov 12, 2009 1:28 AM

xmm sry but this was a forgotten repaint() :
          public void paint(Graphics g) {
               // call super's paint method
               super.paint(g);
               g.drawImage(getImage(getDocumentBase(), APPLET_BUTTON_IMAGE_URL),
                         0, 0, null);
               repaint();
          }Now it seems to work fine.
Edited by: factor5 on Nov 12, 2009 1:44 AM

Weird issue with background image (Safari)

Just wonder if anyone can shed any light on this one....
Basically have a design in progress here:
http://www.hpwebdesign.co.uk/rachelworrall/index101.php
All was fine until I added the three images that fade into one another using the Ultimate Fade In slideshow script ( http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm )
When the page is initially loaded in Safari (5), the top section of the background image doesn't display - it starts just beneath the main content below the navigation.
The weird part is that it literally only takes a click of the mouse outside that Safari window to make it appear. A refresh, however, won't.
It seems fine in Firefox on a Mac, and the client didn't report any issue in IE.
Can anyone with Safari have a quick look and replicate that glitch? If not, then it might just be some weird local issue here.
Many thanks.

I've put up a couple of screenshots here:
http://www.hpwebdesign.co.uk/rachelworrall/screenshots.htm
Its like that in Safari 5.0.3 (and 5.0.4 which I've just updated.)
Again, it literally just needs a click out of the Safari window to make it appear correctly as per the second screenshot.
Its like this on a 27" iMac, but had a look on the macbook, and its fine on there.
So if it looks OK with anyone else, I'm just going to put it down to a weird glitch on my machine here.

Background image in tray but does not appear

I am trying add background images to some submenus in a DVD project with picture slideshows. When I drag in the image, it appears in the customize tray, but does actually appear as a background image in the preview of the DVD project menus. Any idea why? Will they only show up in the final burned DVD? thanks

Hi t
Don't think so. You know that You can test the DVD by the rond button with
a triangle in it ?
You can also from file menu - make a disk image and try to run this with
Apple DVD-player.
I think I would convert the pictures to jpg, pict or tiff to see if any of them
will work as asumed.
Yours Bengt W

Print Preview of Browser(IE) does not show the image, Printer doesn't print

Hi,
I am using a servlet to stream image (GIF) to the browser.
Image is accessed by browser using the img tag. src attribute points to the servlet which send the image stream.
Servlet has the image as the array of bytes. It simply write these bytes on the response object's output stream. It does not use any encoder.
I get the image on the browser. But when I try to see the properties of the image I don't see the type of image. I also don't see the created time, modified time and size of the image. When I do Save As on this image it tries to save it as BMP instead of GIF. Also when I do the print preview I don't see the image in the preview window. When I try to print the web page, it prints everything except this image. I get small cross(image missing) on the printed page.
I would like to know why the image attributes on browser go missing and why can't I print the image?
I would like to add that I am getting the image as the array of bytes from a different application on which I do not have control?
Thanks.

I don't know much about Java Image API , but I could offer a few hints:
- set the type of the image explicitly as GIF
- similarly there might be a feature to set the data / time.
Someone in the File I/O forum or Java Image forum might know better than me.

How can I make an image tile length of browser without using it as background image?

I understand that if you use the rectangle tool and stretch it to the edge of the page, triggerring the red margin, the tiled image is supposed to stretch the length of the browser. Although this works for width, tiling horizontally, for some reason, it doesn't work for length, tiling vertically. When I preview my work in browser, the tiled image doesn't extend along with the footer as I scroll down the page.
When I use the image as background fill and tile it, then it works, but I need to use a different image for the background.

Hi
As you have mentioned you can either use browser fill with tile fitting or design the browser background image outside of Muse using any image editor like Photoshop and then use as browser fill which would include both images the one you want to use as background image and the one that you want to use as Tile on page section.
Thanks,
Sanjit

Background Image Cuts Off - Browser Scroll Isn't Long Enough

Okay, fairly new to Dreamweaver, long-time graphic designer. That said, the answer will probably be easier than trying to explain the problem!
Using the Page Properties, I set the following in the Appearance (CSS) tab:
Background color to #000
Appearance HTML Background image (contains the image in question, created in Photoshop)
No-repeat
This Photoshop image is kind of long (960 x 2232) because there is a bunch of text that needs to flow on top. I thought that I reached some sort of maximum in height and so I reduced the height of the image a little and the same problem--cut off at the bottom of the browser. Note that this cut off issue was not a problem until I extended the graphic to this long length. On other pages, it is much shorter and all is well.
I've pasted a snapshot of the bottom of the web browser preview below. You can see that the scroll bar is at the bottom and there is just a small bit of the paper that is not showing. I would like the bottom of the paper to be seen with a little bit of the black background beneath that.
My first instinct is that I'm missing a bottom padding effect, but can't find where to adjust that type of setting.
Another Thought--I would much rather this graphic auto expand as the text flows over it, but did not know how to accomplish that, so I extended the graphic in the Photoshop file. Its not a tile type of image that can be repeated. It is an ancient looking paper, therefore, the top and bottom need to look a certain way, but the mid section could be tiled and repeated. So if this is a better route, please direct me on where to learn how to implement.
Thanks a bunch!

extra carriage returns were needed in the text frame to extend below the background image.
Rule #1 in web design:
Do not use non-breaking spaces, line breaks or empty <p> tags as a layout device. It doesn't work in all devices or by all users.
Rule #2 in web design: Use CSS to style your layout with margins, padding and min-height properties.
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Background image doesn't preview in browser

Similar Messages

Maybe you are looking for