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
-
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.FHi,
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!
ChrisThis 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.
ThanksHi
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?
ThanksOkay. 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. -
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.4I 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?
RegardsSwing 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
-
I am trying to save space on my computer if I can...
-
Calling Stored Procedure(takes varray of objects as input) from jdeveloper
How can i call Stored Procedure which takes varray of objects as input from jdeveloper My object is : TYPE Entry IS Object ( Name VARCHAR2(1024), Value VARCHAR2(1024) & the varray is : TYPE EntryArr IS varray(10) OF Entry ; & the procedure is : PROCE
-
Video back up to icloud.
When I've backed up my iphone via itunes to icloud, how do I view the video that is on their so I can attach it to an email as it's too long to do it straight from phone?
-
HT201406 how do i fix my iphone that does not do anything
how do i fix my iphone that does not do anythig
-
Beep sound on powering, Beep sound on powering
Beep sound and not getting powered on