Div background images moving in template

I am using a "stock" css layout (from Dreamweaver). I have a
header div with an image placed in it with text on top. I have made
some content text editable on other parts of the page, however when
I make the page a template the image placed in the div disappears.
I checked the code, and the .jpg is still listed. Any ideas or
suggestions on how to fix this would be appreciated!

Line 30?
Can you upload the page and post a link instead?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"VIPGuilford" <[email protected]> wrote in
message
news:[email protected]...
> Ok. here is the code. The reference to the image.jpg is
on line 30. It was
> placed as a background image in Header div in DW.
> and the text was placed on top..thanks for your help
everyone ( sorry for
> all
> the commenting in the 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>Vacation Palace</title>
> 
> <style type="text/css">
> <!--
> body {
> font: 100% Verdana, Arial, Helvetica, sans-serif;
> background: #FFFFFF;
> margin: 0; /* it's good practice to zero the margin and
padding of the
> body
> element to account for differing browser defaults */
> padding: 0;
> text-align: center; /* this centers the container in IE
5* browsers. The
> text
> is then set to the left aligned default in the
#container selector */
> color: #000000;
> }
> .twoColFixLtHdr #container {
> width: 780px; /* using 20px less than a full 800px width
allows for
> browser
> chrome and avoids a horizontal scroll bar */
> background: #FFFFFF;
> margin: 0 auto; /* the auto margins (in conjunction with
a width) center
> the
> page */
> border: 1px solid #000000;
> text-align: left; /* this overrides the text-align:
center on the body
> element. */
> }
> .twoColFixLtHdr #header {
> padding: 0 10px 0 20px; /* this padding matches the left
alignment of
> the
> elements in the divs that appear beneath it. If an image
is used in the
> #header
> instead of text, you may want to remove the padding. */
> background-color: #FFFFFF;
> background-repeat: no-repeat;
> background-position: 0px;
> background-image: url(file:///Macintosh
>
HD/Users/davidwasserboehr/Desktop/lesson01/images/cloud_header.jpg);
> }

Similar Messages

How to change background image in existing template?

Hi
Current website needs overall change in background image which is already set in template. Is there anyone who knows how to change background image in existing templates?

Make a friend with firebug & you could find yourself from where it is getting applied.
For the website you have given the background image it is using is [1] and it is getting set in css of body tag [2]. So Find the css at [3] and modify it OR replace [1] with other image with same file name.
[1]   www.hanwha.com/etc/designs/hanwha/images/bg-body.jpg
[2]
body {
    background: url("images/bg-body.jpg") repeat-x scroll 50% 0 #FFFFFF;
    color: #757373;
    font: 14px/18px Arial,Verdana,Helvetica,sans-serif;
    margin: 0;
    min-width: 979px;
[3]
/etc/designs/hanwha/...../*.css

Pages from template not showing DIV background images

Hi;
I have a template with several DIVs that each contain a background image. When I create a new page from that template, the the background images are missing. The code for the new page shows absolute paths to the images while the template show relative paths.
template code for header:
.twoColFixLtHdr #header {
    padding: 0 10px 0 20px;
    height: 215px;
    background-image: url(../images/10banner.jpg);
template based page code for header:
.twoColFixLtHdr #header {
    padding: 0 10px 0 20px;
    height: 215px;
    background-image: url(file:///C|/Documents and Settings/patrick/My Documents/web sites/The Marketing Guy/images/10banner.jpg);
I don't know if the path codes are relevant in this case, but why don't the background images appear ?
Thanks;
Pat

background-image: url(file:///C|/Documents and Settings/patrick/My Documents/web sites/The Marketing Guy/images/10banner.jpg);
You've got a path pointing to files on your local computer instead of your local site.
Did you save new page as "somefilename.html" or is still "untitled"?
Did you properly define your DW local site folder?
Creating your first website in DW CS4 -
http://www.adobe.com/devnet/dreamweaver/articles/first_cs4_website_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

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; }

Having trouble making background image editable in template

Hello this is my first time so here goes...
I would like to make a template from a page I have created,
the trouble is the background image is url background image placed
in css with text over the image, the problem I have is on further
pages I would like to keep same divs
but would like the freedom to change text and bground image.
I have tried to make text an editable region which works and
bground image make attribute editable but I do not really
understand how this works any ideas would be much appreciated here
is my site address
http://www.andysite.prohost4u.co.uk
cheers

I'm confused, I dont see that you have a background image in
your css.
"WILLO THE WISP" <[email protected]> wrote
in message
news:[email protected]...
>
Hello this is my first time so here goes...
> I would like to make a template from a page I have
created, the trouble is
> the
> background image is url background image placed in css
with text over the
> image, the problem I have is on further pages I would
like to keep same
> divs
> but would like the freedom to change text and bground
image. I have tried
> to
> make text an editable region which works and bground
image make attribute
> editable but I do not really understand how this works
any ideas would be
> much
> appreciated here is my site address
http://www.andysite.prohost4u.co.uk
> cheers
>
>
> Here is my css
> * {
> margin : 0 auto;
> padding : 0;
> }
> body {
> background-color : #ffffff;
> text-align : center;
> font-family : "Square721 BT", "Staccato222 BT", Courier;
> font-size : 100%;
> background-position : center center;
> }
> #container {
> font-family : "Square721 BT", "Staccato222 BT", Courier;
> background-color : #ffffff;
> width : 780px;
> }
> #header {
> width : 780px;
> height : 280px;
> margin-top : 10px;
> margin-bottom : 10px;
> }
> #content {
> background-image: url(images/content_bground.gif);
> float: left;
> height: 400px;
> width: 430px;
> }
> #content h1 {
> font-size : 115%;
> width : 390px;
> color : #00ccff;
> text-align : left;
> padding-left : 60px;
> padding-top : 40px;
> padding-bottom : 10px;
> }
> #content p {
> font-size : 80%;
> width : 310px;
> text-align : justify;
> text-indent : 20px;
> color : #66FFFF;
> }
> #content h2 {
> font-size : 80%;
> width : 420px;
> color : #00ccff;
> text-align : left;
> padding-left : 60px;
> height : 70px;
> padding-top : 10px;
> }
> #sidebar {
> background-image : url(images/sidebar_bground.gif);
> width : 340px;
> height : 400px;
> float : right;
> }
> #sidebar ul {
> font-size : 60%;
> line-height : 22px;
> list-style-image : url(images/bullet.gif);
> list-style-position : outside;
> text-align : left;
> color : #66FFFF;
> padding-top : 45px;
> padding-left : 62px;
> }
>
> #clear {
> clear : both;
> }
> #footer {
> background-image : url(images/footer_bground.gif);
> width : 780px;
> height : 80px;
> margin-bottom : 10px;
> margin-top : 10px;
> position: fixed;
> }
> #footer p {
> text-align : center;
> font-size : 75%;
> color : #66ffff;
> padding-top : 24px;
> }
> #footer ul {
> margin : 2px;
> }
> #footer li {
> display : inline;
> margin : 0;
> }
> #footer a:link, #footer a:visited {
> color : #00ccff;
> margin : 2px;
> }
> #footer a:hover, #footer a:active {
> color : #00FFFF;
> text-decoration : none;
> background-color : #33cccc;
> }
> a:link {
> color : #00ccff;
> text-decoration : none;
> }
>
> a:visited {
> text-decoration : none;
> color: #00CCFF;
> }
> a:hover {
> text-decoration : underline;
> color: #00FFFF;
> }
> a:active {
> text-decoration : none;
> color: #006699;
> }
>

DIV Background image not displaying in FF

Hi!
I'm building a floated 3 column DIV layout with a wrapper to center the DIVs. I put a background image in the wrapper to give the appearance of the columns stretching to the bottom of the layout. It displays in IE, but not in FF.
If I give the wrapper a height, the background image shows, but I want the layout to expand as I enter content. My code is below.
I must be missing something. Any tips?
CSS:
#left {
float: left;
width: 200px;
#middle{
float: left;
width: 200px;
#right {
float: left;
width: 200px;
#footer {
background-color: #316262;
float: left;
width: 600px;
clear: both;
#wrapper {
width: 600px;
margin-right: auto;
margin-left: auto;
background-image: url(images/bkg_css_layout.gif);
BODY CODE:
<div id="wrapper">
    <div id="left">Content for "left" Goes Here</div>
    <div id="middle"> Content for"middle" Goes Here </div>
    <div id="right">Content for"right" Goes Here </div>
    <div id="footer">Content for "footer" Goes Here</div>
</div>

Turns out that I couldn't have a float on my footer with clear:both!
FIXED! YEA!

Div Background image clipping

Hi guys,
I have a div on my page which I am using as the main body,
and i set the background colour as white, but then put a background
image on (a gradient from gray to white). In design view this has
the desired effect - i.e. it appears to be one long gradient, but
when previewed in Firefox and IExplorer the top of the background
image is clipped off. Any suggestions?
Here is the relevent CSS code:

> background-attachment: fixed;
Remove this.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"NWNN" <[email protected]> wrote in message
news:fp7nje$nka$[email protected]..
> Hi guys,
> I have a div on my page which I am using as the main
body, and i set the
> background colour as white, but then put a background
image on (a gradient
> from
> gray to white). In design view this has the desired
effect - i.e. it
> appears to
> be one long gradient, but when previewed in Firefox and
IExplorer the top
> of
> the background image is clipped off. Any suggestions?
> Here is the relevent CSS code:
>
>
> background-attachment: fixed;
> background-color: #FFFFFF;
> background-image: url(Images/background.png);
> background-repeat: no-repeat;
> background-position: center top;
>

AP div background image hiding

I've created an AP div, then used a jpeg for the background
image. I placed other AP divs above the background that hold other
graphics (linked buttons)
On my computer, both in Explorer and Firefox, the background
image is visable. I have tested it at several other locations and
all is fine, HOWEVER, on the client's computer the divs with the
background don't appear. I tried the site in Explorer and
Firefox...no go.
Suggestions?
http://www.doctormasters.com
Thanks - David Bird

A warning has been posted here many times about using AP divs
as an
exclusive layout method, yet that's what you have done here.
This will
cause you grief, you know? Here's the right way to think
about your page
and its layout -
http://apptools.com/examples/pagelayout101.php
What browser is your client using?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"mobirdman" <[email protected]> wrote in
message
news:fkbbfp$42r$[email protected]..
> I've created an AP div, then used a jpeg for the
background image. I
> placed
> other AP divs above the background that hold other
graphics (linked
> buttons)
>
> On my computer, both in Explorer and Firefox, the
background image is
> visable.
> I have tested it at several other locations and all is
fine, HOWEVER, on
> the
> client's computer the divs with the background don't
appear. I tried the
> site
> in Explorer and Firefox...no go.
>
> Suggestions?
http://www.doctormasters.com
>
> Thanks - David Bird
>

Not seeing div background image in Dreamweaver! Why?

I'm not seeing div backgrounds in Dreamweaver! When I load the files onto my server I can see them in my browser! But I'm not seeing them in Dreamweaver. Here's my code on my .aspx pg:
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="hdr">
</div>
</div>
</body>
And here's a link to the web page on my server:
http://amcenergy.com/ee_site1/index.aspx
I need to put text on top of the div's background image, but it's kinda hard if I can't see the background image in Dreamweaver.
Hope someone can help!
Thanks so much!!

Horizontal-align is not a valid CSS property.
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Famce nergy.com%2Fee_site1%2Findex.aspx
Try removing it.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Div Background Image...Resize To Fit Browser Window...???

[b]hello again[/b]...
I would like to have a background image (.jpg) automatically resize to fit any browser's window...& I read somewhere on the web it should be accomplished by placing the image in a layer (as a background image); & then set the layer size to 100%.
can someone please tell me how the coding goes for this...?
[or...if that [i]is[/i] in fact the correct approach? I don't care if it's html or css...I just want it to work. (&...I'm starting off w/ a larger image (so resolution doesn't get lost when going bigger)]
thanks very much,
[b]mark4man[/b]
btw - I should add that it's the image's [i]WIDTH[/i] I'm interested in resizing...while it's aspect ration remains in tact.

http://css-tricks.com/how-to-resizeable-background-image/
For the record, I'm not a big fan of huge background images on web pages. They take forever to load on slow connections. And some mobile devices won't display them at all. So all that weight just for eye candy is kind of a waste IMO.
I think the safest, most practical way to achieve backgrounds that fill available viewport is to use a small, seemless tile and repeat horizontally, vertically or both.
More on background-images:
http://alt-web.com/Backgrounds.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Moving background images horizontally as a loop?

I was wondering, if anybody knew a way to get a Background-image moving horizontally and without interruption as a steady loop.
I tried using animated Gifs, but that takes too much ressources, as the file size grows too large.
I was wondering whether or not I should have the Background Image replaced by a div with a flash in it, that is being looped. This alternative looks kinda dodgy to me, though and I don't want this to be integrated.
I saw some sites using Javascript for almost similar effects vertically, but these effects didn't really work on various browsers (Seamonkey/Firefox), although they worked fine on IE and Opera.
This issue is really driving me nuts right now. thanks

Do the end users really want this would be the first question I'd be asking! Just because one can put a plastic pink flamingo lawn ornament in their yard doesn't mean one should.
1) The simplest, most sure-fire way is with an animated GIF. I'm not sure I understand your filesize concern - how many frames of animation are you using?
2) Javascript - take a look at jQuery and it's associated plugins for ways to create sliding effects. This approach will not use css background images but rather fake it using different divs carefully positioned via Javascript DOM manipulation. Animation would also be provided by Javascript.
3) Flash. Again not really using background images because Flash doesn't work that way. The downsides are 1) it's Flash, 2) Will need to use wmodewith all the issues that entails 3) will likely require absolutely positioning elements to create a background effect with all the issues that *that* entails.
I'd suggest rethinking whether you really need animates background images and then taking a look at jQuery though and some of the jQuery "animation" plugins that are available.
Oh and one final approach would be to do this all in Flash.
Hope this helps.

Templates and background images

I created a new template using a background image. The
template works fine with one exception, when I create a new html
document based on the template everything works, but i cannot see
the background image. When I test the html in a browser the image
is there. In order to see the background image in the design view
environment I need to add it to the page properites again.
Does anyone know how to fix this frustration.......?

Show us the template page, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"TLT3" <[email protected]> wrote in message
news:e7i7jk$cm$[email protected]..
>I created a new template using a background image. The
template works fine
> with one exception, when I create a new html document
based on the
> template
> everything works, but i cannot see the background image.
When I test the
> html
> in a browser the image is there. In order to see the
background image in
> the
> design view environment I need to add it to the page
properites again.
>
> Does anyone know how to fix this frustration.......?
>

Help Me!! Re: Using A background image In my DWT Header

Hello,
I have tried posting several messages regarding this issue but not sure if I am explaining my dilemma properly. So here we go, here is the link to my Generic Template page which I converted to an html to enable you to view it. (http://bridgestoprosperity.org/Templates/General.htm). Now what I am trying to do is use the image that is currently in the header as a background image , BUT i cannot figure out how to insert it as a div background image. Then once I fugure that out I am hoping there is a script that will be able to dynamically insert the page title for each page as it's opened. The title needs to be placed on the right hand side of header ABOVE the words Bridges to Prosperity USA over the background image.
Because this is the main template for our entire site i am hoping that once I figure this out, I can just save all the new changes to the template and be done with it and from then on when I create a new page from template because it will hopefully have some code in it where it calls the Title of the page from some script that I will no longer have to create headers with embedded (non searchable) Page titles for EACH AND EVERY ONE OF OUR OVER 750 PAGES.......
YIKES, PLEASE HELP, AND I WOULD BE FOREVER IN YOUR DEBT IF YOU COULD ACTUALLY INCLUDE CODE IN YOUR RESPONSE AND EXPLAIN EXACTLY WHERE TO PUT IT OR WHAT TO REMOVE AND WHAT TO PASTE. THE MORE DETAILED THE BETTER CAUSE I AM VERY NEW TO ALL OF THIS.
I really appreciate it,
Allan

Your mistake is to drawImage and then call super.paintComponent, which paints over the image you have drawn. That's not what I said, re-read my earlier response.protected void paintComponent (Graphics g) {
   super.paintComponent(g);
   g.drawImage(icon.getImage(), 0, 0, null);
   //super.paintComponent(g);
}I would also advise against calling icon.getImage inside the paintComponent, make a Image instance field and call the method once to store a reference to the Image.
paintComponent is called many times during resize / move operations, and should be as lean as possible.
db
edit To post code, use the code tags -- [code]Your Code[/code]will display asYour CodeOr use the code button above the editing area and paste your code between the tags it generates.
Edited by: Darryl.Burke

Background Image on a Report Region

Greetings,
Is it possible to put a background image on a report region? Using the code shown below I can get an image on most other region types, but the code simply doesn't work on a report region.
Thanks in advance for your help, Tony
REGION HEADER
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="left"
background = "#WORKSPACE_IMAGES#image.jpg">
<tr height="500px" align="left" valign="top">
<td>
REGION FOOTER
</td>
</tr>
</table>

cloaked wrote:
Greetings fac586,
Been reading up on CSS's. I guess the main aspect is to determine the CSS component that deals with the Tabular Form in the Template I am using and modify it. I would need to modify the background attribute of the Tabular Fom, right?
Gotta crawl before I walk, so I am also assuming that I would modify the CSS initially with a hard-coded background image. Then, if I get that to work I would make the image dynamic based on the criteria in a database. Am I on the right track?
Is there a common attribute/component in the Apex Template CSS's for Tabular Forms? I've tried to find it, but am not sure what I'm looking for.Tabular forms can be created using any report template—built-in or custom—so the CSS will differ by theme and template.
Yes, you can define background images for report templates, but It's not appropriate to do what you're trying to do at the report template level. Templates are static and defined at design-time. Challenging Apex Page - Grid with 100+ items - Suggestions Needed. This needs to be dynamic and determined at run-time.

Background image for my portlet.

i have set a image for page background .
but i want the same image for all portlets is it possible to do?
if yes how to achive this?
and where shud i keep all my images?
i mean what is the path for images in portal.
really need help.
waiting
chaitali

Create a template.
Set that Image as background image for that template.
Use this template.
Keep the image in some shared dictory
e.g.
/image

Div background images moving in template

Similar Messages

Maybe you are looking for