Inserting 2 background images in to you site

I've seen many sites with more than 1 background images. How
can I do that with Dreamweaver CS3?
I am very curious and I need to know how to do that. I am a
newbie. Please don't give me horrible instructions. If you could
please just give me a link to a tutorial or if it is very simple
just tell me how to do it =]

Ok, try this, it will give you something to play with. Copy
all of the code
below between the *** and *** and paste it into a new html
page.
I did not make the top div 1000px wide, that would cause
quite a few people
to scroll left to right, but change it if you prefer. Your
bottom div will
grow in size depending on content.
Now someone else may have a better suggestion for you, but
this is one way
you can do what you seem to want to do.
<!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>
<style type="text/css">
#topdiv {
width:90%;
margin:auto;
min-height:800px;
background-image:(right click your mouse, go to Code Hints |
URL Browser,
and find your bakcground image file);
background-position:center;
background-repeat:no-repeat;
border:#000066 thin groove;
background-color:#FFFFCC;
#bottomdiv {
width:90%;
margin:auto;
border:#3333FF thin groove;
background-color:#33FF99;
background-image:(right click your mouse, go to Code Hints |
URL Browser,
and find your background image file);
</style>
</head>
<body>
<div id="topdiv">put 1000 x 800 in the #topdiv css rule
above in the head
tag. You will need to put all of your content containers
inside this div to
keep bg image inplace.</div>
<div id="bottomdiv">Put repeating image in #bottomdiv
in the CSS rule in
your head tag.. If you have content that is going to match up
to content in
the topdiv, you will need to keep same size &
margins.</div>
</body>
</html>
"Cyberhuntera" <[email protected]> wrote in
message
news:[email protected]...
>I want a background design image(1000x800) center;top and
a repeating
> background image(5x5) wich is behind the background.
>
> I am novice still, but I want to learn everything about
HTML.
> For now I know basic HTML and CSS - almost nothing about
it :(
>

Similar Messages

  • Inserting background images

    Hello again,
    I'm inserting a background image on a business card. I can change the opacity to be able to view the text and on the screen it looks great. When I go to print, the background image isn't close to what was on the screen. Any ideas?

    you can never be 100% sure that what you print will be what you see on the screen, it has a lot to do with the quality of the printer too and it's imaging capabilities.

  • Is there a way I can add be background image to my sharepoint site with look and feel?

    Whenever i add any background image with "look and feel" it stretches the image. I've tried modifying the CSS file (in body and tried .ms-backgroundImage setting "background-size:inherit !important;") to fix it, but it doesn't seem to
    have any effect. I there anyway i can add a background image to the master html or css code and get it to not stretch?
    Thanks
    James T.F

    Hi,
    According to your post, my understanding is that you wanted to add background image to sharepoint site with look and feel.
    We can define the Image Url  in the Composed looks (Site Settings > Web Designer Galleries > Composed looks) to add background.
    However, the image will be stretched to fill the viewport at 100%.
    Though we can override the CSS attributes which would allow the image to repeat, but instead I recommend to go the no CSS route and switched the background to a much larger one that would fill the viewport nicely without looking pixelated.
    More information:
    SharePoint 2013 Branding: A New Approach
    SharePoint 2013's Branding – My first three lessons
    Best Regards,
    Linda Li
    Linda Li
    TechNet Community Support

  • Spacing of Spry Menu submenu items, and inserting background images

    Hiya, need a bit of help, could someone possibly guide me with this?
    I've created a Spry Menu in DW CS5 - so far, so good.. However I'm pretty new to CSS Styles so need pointers at what to change to get the result I need. I've created the spry menu, however the submenu dropdown items are not flush to the ones above, theres a 1px horz gap between each item and while it looks okay, its particularly visible in Firefox and Chrome and would prefer no spacing at all..
    The live site is at http://www.ebm.co.uk/2011site/indexnavbar2.html
    if you take a look at the drop down menu bar you'll see what i mean - what do I need to do to remove the spacing?
    I also want to replace the solid colour with images, where do I specify the images for 1) top menu item 2) submenu item and 3) 'hover' item, and do I need to make any areas transparent?
    Any advice would be much appreciated.. thanks!
    Chris

    This is a good place to start http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php.
    Also this might help http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml
    Gramps

  • How to add a button to background image in Fireworks

    Hello!
    I created  recently a clickable button with a rollover effect. I made it iin FW  CS5 as a symbol and exported. So I have now .html file and 2 images  files (2 states of my button). The button itself works fine on a live  site. Now, I want to learn a technique to be able to put that button  with the effect and the link in it on an image (it would be like a  background for the button).
    Thanks in advance!

    Two things.
    First, when you save from Fireworks, you get a Fireworks document .png, complete with layers, vector objects, and all the other various complex definitions Fireworks can support. Fireworks is the only program that can interpret this information. Any other program (such as a browser) can display what the document looks like, but it's probably much larger than it needs to be for the Web. For Web use, you want to export an image (.gif, .jpg, or one of the bitmap .png variations). Be careful when you export an image to a bitmap .png format that you do not use the same name as your master FW document and overwrite your FW document.
    Second, DW is not a layout program. In order to create HTML files, you probably ought to learn a bit about HTML. I recommend you work through one or both of these tutorials:
    http://articles.sitepoint.com/article/html-css-beginners-guide
    http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/
    An HTML file defines blocks of content. The blocks can be stacked or can contain other blocks. The basic html file contains two blocks: the head section and the body section. The only thing in the head section that shows is the page title in the browser's address bar. Also, JavaScript code is often put in the head section. The body section contains all the visible content of your page. Within the body section, you add blocks of content that are HTML elements.
    Content blocks can have properties., One of the properties is a background image. If you want to have a page background, then you need to create an image, export it from Fireworks, and then set it as the background for the body section of the page. That image is then behind all the content blocks you define within the body section: buttons, paragraphs, other images, tables, anything. Most of these other elements can also have background images defined, too.
    Fireworks produces images that are defined by what's visible as well as any active slices (such as those created by buttons). When you exported your background image with a button, Fireworks gave you an HTML table (one of the many kind of content blocks) because the button defined slice regions. Fireworks can't "know" that you really wanted a background image and then the HTML to put a button in a certain location on a page. It created the images you defined (but not what you wanted).

  • 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

  • Need to create a background image for Joomla

    I need to create a custom background image for a Joomla site.
    Can anyone offer a simple tutorial on the steps I need to take to create the image?
    Thanks

    Okay. The image has a gold gradient from top to bottom, but the text repeats in smaller blocks.
    First, you need a tiling image of some text, on a transparent background. Then, this image needs to be added as a pattern in Fireworks.
    Next, you get to use your new pattern. In your document, create a tall rectangle with a vertical gradient. Make this image the same width as your tiling pattern, so that your resulting background image will also tile. Over that you put a rectangle with no color fill, but fill it with the text pattern. Save this working Fireworks document, then export to use on the Web.
    I don't understand the phrase "I need to know how to size the image, possibly with CSS." Background images are the size they are. When this image is set to be the background, then it should be specified to repeat in the horizontal direction (repeat-x).
    Here's some info on making a seamless tile:
    http://forums.adobe.com/message/2384441
    Using patterns:
    http://www.entheosweb.com/fireworks/patterns.asp
    There have been some recent threads on using gradients, just flip back a page or two (unless my mind's playing tricks on me and they're older).
    Hmm... Possibly helpful:
    http://spectrum.troy.edu/~techtip/classes/tutorials/fireworks/fw2004/gradient/gradient.htm

  • CS4 no Background Image for cells

    In CS3 there was a way to insert background images in a cell
    using the Property Inspector. Now in CS4 it isn't there!! What
    gives?

    http://www.projectseven.com/tutorials/css/qdmacfly/index.htm
    http://www.macromedia.com/devnet/mx/dreamweaver/css.html
    http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
    http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
    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
    ==================
    "cdscindy" <[email protected]> wrote in
    message
    news:gdd0jh$t33$[email protected]..
    > >With CSS, you define the rule in one place and it
    affects all table
    > cells to which the rule is applied. If you want to
    change the
    > background, you change just one place.
    >
    > You win! Sort of... I have been using html for a
    looooong time. Works
    > pretty
    > good for me. I just can't see an instance where using
    backgrounds in so
    > many
    > cells would even happen. Normally I would just change
    the background once
    > by
    > changing it in PS.
    >
    > Its looking more and more like I am going to have to
    refine my CSS. I want
    > simple...simple book or tutorial. I don't have time
    these days to have a
    > long
    > learning curve. So on the simple part, any ideas?
    >
    >

  • Pinning Multiple background images

    Hello,
    I am working on a site and want to get an effect similar to this site: http://mariusz.cc/ that has multiple "pinned" background fill images. Content boxes and photos scroll over the background images yet when you scroll down you get new backgrounds. Simply using the "pin" feature on Muse will not allow you to scroll past the image. The new parallax scroll feature does not work on full browser width content, from what I saw, so that's a no go as well.
    Does anybody have any ideas on how to replicate this? Thank you in advance.

    Matt --
    You are correct, 100% width objects do not currently work with scroll motion objects (for the moment ;-), but you can achieve this effect by creating extra wide images that are likely wider than most desktop systems. Two Muse template resources -- MuseThemes.com and MuseGrid.com have templates that are using this approach -- MuseThemes.com created a video describing the step-by-step process that you can review here: http://www.muse-themes.com/pages/video-training. Hope this helps.

  • Customizing firefox ... set my own background image for all pages I open in Internet.

    The idea is in using my own *.css file as primary for all sites, i open in firefox (or just my own background image). So that this image replaces the background for all sites I open in Internet.
    Maybe there is a file available in firefox 17.1 for this (maybe UserContent.css).
    Thanks a lot.

    Yes, you can use userContent.css for this, but it's simpler to use the Stylish extension instead.
    * http://kb.mozillazine.org/UserContent.css
    * https://addons.mozilla.org/firefox/addon/stylish/
    You would then use something like this:
    <pre><nowiki>@-moz-document url-prefix("http://"), url-prefix("https://") {
    body {
    background: url("file:///C:/My%20Pictures/Wallpaper/image.jpg") !important;
    color: black !important;
    *:not(body):not(input):not(textarea):not(button) {
    background: transparent !important;
    color: inherit !important;
    /* Unvisited link */
    a:link {
    color: blueviolet !important;
    /* Visited link */
    a:visited {
    color: indigo !important;
    /* Link with the mouse cursor over it */
    a:hover {
    color: lightblue !important;
    /* Clicked link */
    a:active {
    color: red !important;
    }</nowiki></pre>
    * To get the path of the image to use as the background, open it in Firefox and copy the URL from the address bar. Otherwise, keep in mind the protocol is file:/// that spaces must be replaced with %20 and that forward slashes must be used instead of backslashes (the latter is what Windows Explorer uses).
    * Remember to define appropriate colors for text and links, otherwise they will end up unreadable against your background image.
    * Even so, you can expect uneven results. Take this page for instance. “Post reply” isn't an actual button, but a link element styled to look like a button. There's no way to change these on all sites; they must be styled on a case-by-case basis. Another issue are images (e.g. the [https://support.cdn.mozilla.net/media/img/mozilla-support.png mozilla support] graphic here), which might end up unviewable against your background image.
    * If you need help writing CSS, see https://developer.mozilla.org/en-US/learn/css or http://forum.userstyles.org

  • Background images are not rendering while they are in all other browsers.

    Firefox is having problems with certain .jpg images that I have uploaded to a hosting service.
    (Ex: http://img838.imageshack.us/img838/3991/hbbgardenorangepop3.jpg)
    When you set this image as your web page's background image, the image will not be rendered. However, if you go directly to the URL, the image will be rendered (except in the Beta release, where the image won't even render when you go to the URL directly).
    However, if you go to ANY other browser, the image is rendered correctly (both when you go directly to the URL and when you use the image as your background).
    == This happened ==
    Every time Firefox opened
    == Today ==
    == User Agent ==
    Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.125 Safari/533.4

    I assume that you want to add that image as a background on web pages.
    How are you adding that background image?
    Are you using code in userContent.css ?
    If that is the case then please post the code, otherwise provide the steps so we can check what goes wrong.

  • Replacing images used as a link with background image

    OK - I'm embarrassed to say that what I'm trying to do is
    blindingly
    obvious, and I've used Dw for several years - and do most of
    the work
    in code view but I'm having a senior moment and can't do what
    I want.
    I've read that when you use images on a page for background
    styling,
    for example the logo, or an image of a professional body such
    as IEE,
    it is more semantically correct to use CSS background images
    rather
    that a <img src=
    tag
    So I have a div in which I put the background, but then
    perhaps quite
    logically you can't directly put a link to it. So how do you
    do it.
    I've tried to ensure there was a block element so when you
    hover l
    mouse over it you get a block link - but no joy.
    maybe my dyslexia early is the sign of premature brain fade
    ~Malcolm N....
    ~

    You cannot place a link on a background image. However, you
    can place a
    link on a transparent image floated over the background.
    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
    ==================
    "Malcolm N_" <[email protected]> wrote in message
    news:[email protected]..
    >
    > OK - I'm embarrassed to say that what I'm trying to do
    is blindingly
    > obvious, and I've used Dw for several years - and do
    most of the work
    > in code view but I'm having a senior moment and can't do
    what I want.
    > !!!
    >
    > I've read that when you use images on a page for
    background styling,
    > for example the logo, or an image of a professional body
    such as IEE,
    > it is more semantically correct to use CSS background
    images rather
    > that a <img src=
    > tag
    >
    > So I have a div in which I put the background, but then
    perhaps quite
    > logically you can't directly put a link to it. So how do
    you do it.
    >
    > I've tried to ensure there was a block element so when
    you hover l
    > mouse over it you get a block link - but no joy.
    >
    > maybe my dyslexia early is the sign of premature brain
    fade ;-)
    >
    > --
    >
    > ~Malcolm N....
    > ~

  • 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!
    >

  • Using Flash as HTML background image?

    Can I use a SWF as a HTML background image?
    I've tried this a couple of different ways...
    Any tricks to make this work?

    davidlieb wrote:
    > Can I use a SWF as a HTML background image?
    No, you can't use SWF in html background.
    The background does not allow any active content.
    Best Regards
    Urami
    !!!!!!! Merry Christmas !!!!!!!
    Happy New Year
    <urami>
    If you want to mail me - DO NOT LAUGH AT MY ADDRESS
    </urami>

  • How to set background image in jlist

    Hi all
    is there a way for setting an image as jlist 's background?
    I need that this image is trasparent.
    Any idea or usefull link?
    Regards

    Swing related questions should be posted in the Swing forum, but there is no need to repost since all the information is available to you in the forum or the API.
    First, read the JList API and follow the link to the Swing tutorial on "How to Use Lists". It will show you how to create a custom renderer. You will need by make your renderer non-opaque to see the background image.
    Next you can search the Swing forum for examples of how to add an image as a background image. Most of the examples are for a JPanel, but the concept is the same.

Maybe you are looking for