Using Background Image In Dreamweaver

Good evening.
I'm using a non-repeating, centered background image in Dreamweaver. But i'd like it to self-adjust its size depending upon what monitor size its viewing it. Can someone provide some coding for help with this???
Here's where i'm at thus far..
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="welcome10.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body style="background-color: #000; background-position: center top; background-repeat: no-repeat; background-image: url(images/girls-bg9.jpg); background-attachment: fixed;">
<div id="wrapper">
          <div id="container">
    </div>
</div>
</body>
</html>
css -
@charset "utf-8";
/* CSS Document */
#wrapper{
          width: auto;
          height: 1600px;
#container {
          background-color: #FFF;
          height: 200px;
          margin-right: 100px;
          margin-left: 100px;
          margin-top: 100px;
thanks guys, and gals...

Background-size would do the trick, but keep in mind, most CSS3 does not function in IE9 (though this will), and won't at all in IE8 and down. If you need it to work in those browsers, the best way to do it would be with javascript. I've used the script available on this site with some success...
http://louisremi.github.io/jquery.backgroundSize.js/demo/

Similar Messages

Background image in Dreamweaver CS3

When I set my background image in Dreamweaver it shows on the "Design", although when previewed on a browser it does not show. I've checked the directory and it seems fine. What is causing this?

Modify-->Page Properties, Im using css but not for the page background. I tried previewing the page locally and I have tried it on the server. The entire site root folder was uploaded which has the background.

How to use background image for a page that work in Netscape..???

Hi there
Is there anyway around to use background image for a portal page that works well with netscape.
As I have used that but in coming in Netscape.
thanks
Rakesh

1) You post questions in the wrong forum. (As you title says this is a Swing question).
2) Not once in your last 10 postings have you ever bothered to reply to a posting to thank people for the help you have received.
I seriously doubt you well ever get answers in the future.

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

HTML Emails and background images in Dreamweaver

Hello. I created a HTML email in Dreamweaver. The original design came out of Indesign and had very specific background art. I removed all the text out of the Indesign and created a jpg. I took this jpg in Photoship and sliced and optimized it. I imported this HTML into Dreamweaver. Here I need to add in all the text (which is variable). I was originally thinking that you can only place background images with CSS. But I was told that you should not use CSS for HTML emails. So instead I left all the background art as normal images inside of a table. At this point I need to add text over these images. They only way I could figure out to do it was to add a div tag right over the image and type into there. This seemed to work fine but when I tested it in some emails all the div tags with text showed up under the table with images. This needed to display over. What is the best way to handle this issue? Thank you in advance.
Melanie

Sorry, but you cannot layer text over images in emails. Simplify your design or make an image with text on it in Photoshop. Use absolute URLs to images on your web server. And give people who can't see graphics and HTML pages in their email client a link to the HTML page on your web server.
How to Code HTML Emails
http://www.sitepoint.com/article/code-html-email-newsletters/
Chart showing how various email clients handle CSS.
http://www.campaignmonitor.com/css/
Download some HTML Email Templates from the links below to get started.
Mail Chimp
http://www.mailchimp.com/resources/html_email_templates/
Constant Contact
http://www.constantcontact.com/email-marketing/html-email-templates/index.jsp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

How to use background image in ABAP - webdynpro

Hi,
My requirement is like that.
I want to display a background image. Over the background image i want to display my ALV list or report.
How to display my personalized image in background.
Please assist me....
Thanks in Adv.

hi ,
this is not possible:
refer these threads :
Background Image
I Assign Background Image to a Group (Ans by Thomas)
Image as Background Image possible?
as correctly pointed above and in this thread
use your own stylesheets
refer this thread for more information on styles :
EP 7 Portal stylesheet with WD ABAP
to display image in the foreground :
refer this WIKI
https://wiki.sdn.sap.com/wiki/display/stage/DisplayEmployeeImageinABAPWebDynpro+Application
regards,
amit

Background image in dreamweaver help?

Thanks for looking,
I have this menu I made:
http://www.ivoog.com/link4
How can I make the background image fit? You can see that its
kindof messed up. How do I make it fit? Please explain or show.
Thanks!

As explained in previous posts, you cannot do what you want
without using
one of the alternatives mentioned now in this post and all
the previous
ones..
The offer still stands from the previous few posts.
I'd be happy to help.
Make the menu in pop menu magic, post the page, and I'll be
happy to show
you how to change the CSS and use a repeating background
texture image and
borders to make them look like you want.
Take care,
Tim
"hahahaadobeman" <[email protected]> wrote
in message
news:fotb49$5pe$[email protected]..
> Thanks for looking,
> I have this menu I made:
>
>
http://www.ivoog.com/link4
>
> How can I make the background image fit? You can see
that its kindof
> messed
> up. How do I make it fit? Please explain or show.
Thanks!
>

In AFBrandingBarTitle how to use background-image

Tell me the exact use of background-image component in AFBrandingBarTitle with the line of code and full description

Mayur Mitkari
version -JDeveloper 11g Release1
customizing skins through code
try to add image from desktop into the skin , As a background image of Branding bar title
Edited by: 942784 on Jul 9, 2012 11:13 PM
Edited by: 942784 on Jul 9, 2012 11:14 PM

How to make a fixed background image in Dreamweaver CC

I'm trying to make my background image fixed so when I scroll down in Dreamweaver CC it stays completely still, could someone please tell me how to do that?

You've got a lot of code that you don't need. And I'm very dubious about the file:/// path to your image. Are you working in a Defined Local Site Folder? The image path should be pointing to your site, not files:/// on your local hard drive.
body {
background:#000 url(concept_watch_dogs___wallpaper_1366x768_by_mackintosh141-d6led76.jpg) no-repeat center center fixed;
Nancy O.

Re: Problem using Background Images

Newbie is trying to use a background image inside a table. It seems that if the table size is larger that the original image itself; then the table has a blank space where the image does not show; and if the table is smaller than the image; then the background image has a cropped appearance. What do we have to do to correct this problem?

Background images do not stretch to fill their container. At least they don't do this yet (reliably). That's just the way it is. Most people will fill the remaining space with a color similar to the overall image color, when the image is too small to fill the background. When it's too large? Well, that's just the way it is.

Adding .flv or .swf in dreamweaver on top of background image

Hi,
I added an image background 1900 x 1200 in dreamweaver, which will serve as my background image for my web site. I would like to incorporate my .flv or .swf on top of my background image. Although, when doing so, the .flv or .swf gets placed under the background image and not on top. How do I place the .flv or .swf file on top of my background image in Dreamweaver CS5.
Thanks

Hi
This sounds as though you are not actually using a background-image but just placing an image on the page. To get any help people will have to see your page and the code, can you provide a link to a live page?
BTW: Your background-image size is way to big for most users monitors, just thought you should know.
PZ

Import text image in Dreamweaver

Hi All
I have designed some text headings (which are in colour) with a transparent background in fireworks and exported it (gif) to Dreamweaver. That is all good. But when I place the text image (as a background image) in Dreamweaver the text has (in places) white edges which I dont want. Any ideas why this is happening???
Any advice
Paul

The effect that you're experiencing is known as "jaggies". When exporting from Fireworks, you need to set the Matte colour picker to a similar colour to your background.
A better solution, though, would be to use an embedded web font. You can get a lot of free webfonts from www.fontsquirrel.com. Alternatively, if you're using the Creative Cloud, you have access to a lot of TypeKit fonts.

Inserting a Spry Accordion on top of a background image?

I created an 800 x 600 pixel graphic image in Adobe Photoshop CS4 to be used as an overall background image for a webpage. I also created a few navigation links from the image Layers using the Slice Select Tool, then optimized and saved the image as an html file using the Save for Web & Devices command in Photoshop. Next, I opened the html file in Dreamweaver CS4.
Is it possible to insert a Spry Accordion with a clear (transparent) background anywhere on top of that background image in Dreamweaver CS4 so that I can see the background image behind the text content of the Spry Accordion? I use Windows Vista.

Hi,
Yes, as is shown by the following 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>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body style="background: url(images/detail/cd1.jpg) no-repeat center;"> //use your own location and file
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Background Images Do Not Display

Hi --
On this page:
http://www.thelegatogroup.com/test/
I have the DIVs #left and
#right and each has a background image. My problem is that
neither display
either in preview or when live. I can, however, see the
images in DW's
design view.
The DIV #left should display this image:
http://thelegatogroup.com/test/assets/backgrounds/home_piton.jpg;
The DIV #right should display this image:
http://thelegatogroup.com/test/assets/page_elements/divider.jpg
The CSS appears correct and the rules point to the correct
files, the images
are on the server, the page validates, and yet no images.
Can someone take a look and help me see what I'm missing?
Thanks,
John

Good luck! 8)
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
==================
"Tarvardian" <[email protected]> wrote in message
news:[email protected]...
> Because I don't use background images very often, and I
didn't know any
> better. Now I do.
>
> Thanks for your help. I appreciate it.
> John
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>> Remove this -
>>
>> background-attachment: fixed;
>>
>> You don't need it. Why did you use it?
>>
>> --
>> 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
>> ==================
>>
>>
>> "Tarvardian" <[email protected]> wrote in
message
>> news:[email protected]...
>>> Hi Murray --
>>>
>>> Thanks for taking a look. You were right...the
path was incorrect. But
>>> fixing that, unfortunately, doesn't fix the
problem. I've even used an
>>> absolute page for below file, and it still
doesn't display correctly.
>>> Oddly enough, when I use remove the rule:
background-repeat: no-repeat;
>>> the image appears. It's tiled -- which I don't
want -- but it appears.
>>>
>>> Any idea what's going on?
>>>
>>> John
>>>
>>>
>>> "Murray *ACE*"
<[email protected]> wrote in message
>>> news:[email protected]...
>>>> Your links are incorrect.
>>>>
>>>> background-image:
url(../assets/backgrounds/home_piton.jpg);
>>>>
>>>> This one implies that the image would be
here -
>>>>
>>>>
http://www.thelegatogroup.com/assets/backgrounds/home_piton.jpg
>>>>
>>>> but it's not - it's here -
>>>>
>>>>
http://www.thelegatogroup.com/test/assets/backgrounds/home_piton.jpg
>>>>
>>>> --
>>>> 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
>>>> ==================
>>>>
>>>>
>>>> "Tarvardian" <[email protected]>
wrote in message
>>>> news:[email protected]...
>>>>> Hi --
>>>>>
>>>>> On this page:
http://www.thelegatogroup.com/test/
I have the DIVs
>>>>> #left and
>>>>> #right and each has a background image.
My problem is that neither
>>>>> display
>>>>> either in preview or when live. I can,
however, see the images in
>>>>> DW's
>>>>> design view.
>>>>>
>>>>> The DIV #left should display this image:
>>>>>
http://thelegatogroup.com/test/assets/backgrounds/home_piton.jpg;
>>>>> The DIV #right should display this
image:
>>>>>
http://thelegatogroup.com/test/assets/page_elements/divider.jpg
>>>>>
>>>>> The CSS appears correct and the rules
point to the correct files, the
>>>>> images
>>>>> are on the server, the page validates,
and yet no images.
>>>>>
>>>>> Can someone take a look and help me see
what I'm missing?
>>>>>
>>>>> Thanks,
>>>>> John
>>>>>
>>>>
>>>
>>
>

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.

Using Background Image In Dreamweaver

Similar Messages

Maybe you are looking for