Background image to fit in DW WYSIWYG editor using HTML

I am trying to create an HTML background that will serve as the landing page on my website. I need help with formatting the image to fit the entire screen so that it does not scroll down or repeat. Also. Once this is done. I would like to upload it onto my website background page. I am using the WYSIWYG editor because for now. I can somewhat make sense of it. However am stuck trying to get the image to fit perfectly. I am not using CSS and don't wish to either. I understand HTML a little better. Please, help. I've been stuck for days at this rate.

Unfortunately, you can't design modern websites without a good grasp of both HTML and CSS code. Don't limit yourself with Design View only. Use Split View so you can see the code DW is creating.
http://w3schools.com/
http://www.csstutorial.net/
http://phrogz.net/css/HowToDevelopWithCSS.html
To answer your question about BG image. Use CSS background-size property with vendor prefixes. This can't be done with HTML.
CSS Code:
body {
      background: url(your-BG-image-here.jpg) no-repeat center center fixed;
    /**for Safari,Chrome**/
       -webkit-background-size: cover;
     /**for Firefox**/
       -moz-background-size: cover;
      /**for Opera**/
       -o-background-size: cover;
      /**for all other browsers**/
      background-size: cover;
Nancy O.

Similar Messages

How do I adjust my background image to fit my browser

I have a background image that it 1600 x 1200 and when I try to view in browser, almost half the image gets cut off. How do I adjust the size to fit my browser or even adjust it to fit any browser?

1600 x 1200 is a huge image by web standards. Images don't resize to fill viewport without workarounds (tricks). And while Martin's solution works in some browsers, it's not bulletproof. Downsides may outweigh advantages.
For best cross browser results (including older IE), establish a fixed page width of say 1000px to fit on average displays. Center your page layout.
Open your image in Photoshop or Fireworks and resize it to 1000 x 750. Your image won't fill the viewport but it will fit your page width.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How can I put a background image into the cell of a table using Dreamweaver CC.

I want to place an image in a table cell and then be able to place editable HTML in the same cell on top of image. I also have Dreamweaver CS6. I can't get either one to do it using solution I found searching on web. Please help ASAP. What am I doing wrong. Example code would be great. Thanks!

No tables required for any of this. You simply need a 3-column starter page.
In DW, go to File > New > Blank page > HTML.
Select a 3-column layout from the 3rd panel.
Hit Create button.
Learn to use CSS floats, margins and padding to align elements. DO NOT use positioning.
Start with & bookmark these links for future reference:
CSS Box Model
http://css-tricks.com/all-about-floats/
CSS Float
Floatutorial: Step by step CSS float tutorial
CSS Margin
CSS Padding
Nancy O.

In OAF restrict the richtext editor using html tags

Hi Gurus,
In my page Insert/Update I have requirement of Adding Comment. I have used MessageRichText for this Comment section. The data type of the corresponding Table column is CLOB.
But while saving the entered comment, data is getting saved with HTML tags. .... :
I have another search page that cannot have MessageRichText filed; only MessageStyledText field could be used to show the Saved Comment.
As the data has been stored with HTML tags in DB Table, in the Search Page it showing the Last Inserted Comment with HTML tag.
I want to show the actual Comment entered without HTML tag.........how to do this??????
Please help!!!!!!!!!!!!!!!!!!!!!!!!!1

Hello cornelius.
For one, you need to select RTF for message composition and not Plain Text.
Select/highlight the text you want for the hyperlink and at the menu bar, go to Edit and select Add Hyperlink.
Enter the URL in the space provided and be sure to include http://
Select OK when finished.

How do I fit a background image to fill the entire page?

Hi,
could anyone please tell me how I use e.g. a jpeg image as a background image that fits the entire page without getting horizontal or vertical scroll bars?
Thanks

Hi Pziecina and Nancy O.,
thank you so much for your mails. However, I'm still trying to figure this out.
@ Pziecina...I studied the source code of your webpage and tried to insert parts of it into my own page in different variations. The solution to my problem must have something to do with CSS and img src height and width. All I get is a white page. I found out that an image size set in Photoshop apparently doesn't have any effect on whether the image fills the browser 100% or not.
@ Nancy O. What I'm trying to do is to use one single image as background for a single page on the website, I'd like to construct. An image that opens up to the entire width of the screen...not just the browser. I imagine this with layers of transparent/solid color for text fields. I studied the website page, you suggested and a repeat action is not what I aim for. And I realize that maybe I'm thinking too much in Photoshop terms...thinking I can do similar actions in Dreamweaver. I'm well aware of the whole thing being 'too much' in terms of design and usability but if you check out www.frauhaus.dk I think that works beautifully, although it doesn't open up to the entire screen. I'd like to see if that design concept will work for my own website or if it's going to be too confusing.
And to both of you I really appreciate your time and input, thanks. Even though I'm still getting grey hairs as a beginner I keep thinking that there's got to be a solution to this.
Best regards from MissRaspberryDream

Can we resize and change the background image in a 2 page layout?

I am a two page layout report in RTF. Can I use different background image on page 1 and page 2? The first page background will not be repeated but the second page will. Also, it seems when we insert a background image by going "Format -> Background -> Fill effect -> Picture", after we finished the whole process we can't get the background image to fit with the page, can we resize it to be fit with the page? Thanks for your help!

Yes. Select the image and go to the Inspector/Hyperlink/Link pane and use the Link to One of my Pages option.
Remember: the photo must be added to the page by dragging it onto the page and then be selected. It can't be added as a background image with the Inspector/Page/Layout pane.
OT

Menu background image size

Hi...if I follow this link http://docs.info.apple.com/article.html?path=iDVD/6.0/en/17.html and the instructions for preparing menu background images. My images still get cropped. Does anyone know the real sizes that will fit perfectly?
From the Apple link:
"If you want your images to fit the DVD window exactly, use an image-editing application to crop and resize the images to the following dimensions:
720 x 540 pixels for standard video in NTSC format
854 x 480 pixels for widescreen in NTSC format
768 x 576 pixels for standard video in PAL format
1024 x 576 pixels for widescreen in PAL format"
Many thanks in advance

Shingy,
Today there is an update to iDVD (as well as other iApps) that you should make.
After doing the update this is what I found:
I'm not sure if the things I'm seeing are a result of the update, but after updating I have further defined the problem.
The problem now seems to be in figuring out the proper background size when using a widescreen theme converted to 4:3
Widescreen as widescreen and 4:3 as 4:3 work as expected in PAL.
So, if you stick with the originally discussed image sizes for PAL you will be OK AS LONG AS you don't try to use a widescreen theme as a 4:3 theme. (I didn't try using a 4:3 theme as widescreen.)

Background image stretch in html not working if 'never remember history' is choosen

I have a problem that did not exist in previous mozilla versions. I found the problem after installing the most recent version and after setting firefox to "never remember history"
The problem is related to the CSS code for stretching a background image to fit the screen. The background image does stretch if "never remember history" is NOT set. Only part of the image is displayed and the rest of the background is black. I first noticed it with my website www.missionbayhighalumni.com and later found that the same problem also occurred with this website:
http://www.htmlite.com/faq022.php or http://www.htmlite.com/faqEX004b.html
I created several test cases with very simple code, all had the problem. The background image stretch code tests all work for other browsers and even firefox if "never remember history" is not selected. It also appears to be intermittent.

Looks fine to me and all containers have a height:100%, so that is also correct
You can remove all data stored in Firefox from a specific domain via "Forget About This Site" in the right-click context menu of an history entry ("History > Show All History" or "View > Sidebar > History") or via the about:permissions page.
Using "Forget About This Site" will remove all data stored in Firefox from that domain like bookmarks, cookies, passwords, cache, history, and exceptions, so be cautious and if you have a password or other data from that domain that you do not want to lose then make sure to backup this data or make a note.
You can't recover from this 'forget' unless you have a backup of the involved files.
It doesn't have any lasting effect, so if you revisit such a 'forgotten' website then data from that website will be saved once again.
Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.
*Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
*Do NOT click the Reset button on the Safe Mode start window
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

Invisibles are creating a new page when I try to move background image....

Hey Guys.
I am doing a resume for a friend of mine and its quite simple what Im trying to do;
-Background image
-Image
-Text
And I noticed when I try to put the background image to fit the background that it will create a new page... but I can't seem to find how to get around this problem... can anyone help?
Here's a screenshot: http://i46.tinypic.com/nf1t3r.png

JoeyDee
Your image has word wrap on it that is squeezing out either text or a page break underneath.
The process and fix (turn off word wrap for the background image) were described here:
http://discussions.apple.com/thread.jspa?threadID=2166684&tstart=45
Peter

Air 2, Flex 4.1, embedding xstandard wysiwyg editor

Hi,
Has anyone had any experience with embedding the xstandard wysiwyg editor into a flex application using the Air HTML component?
For those who don't know; it is an activeX control providing xhtml compliant code generation, drag, drop and upload functionality (in one move) etc and is far superior and easier to use than the freebee wysiwyg editors out there.
The editor requirement:
Easy table generation
drag and drop of images onto the interface with upload and insert into content
Paste of MS Word content into the editor. (automatic image upload and insert)
Editor solution:
xstandard ( http://www.xstandard.com )
are there any others that provide this functionality?
The problem at hand:
I have developed an inhouse application which embeds a wysiwyg editor using the HTML component of AIR.
The editor is embedded on a php page which take care of loading the data and the editor controls. With the appropriate parameters it works independantly outside of the Air/Flex application.
Initially we were successfully using TinyMCE (pre editor requirements) however the less computer savvy users (most of them) were having issues using the table generator and the image uploaded. To difficult, inefficient and too many steps.
xstandard integration:
xstandard is working fine externally to the application, as it does with TinyMCE. When loading it into the Air/Flex application the controls don't show up instead the source editor is visible. It looks like it is partially loading the activex control.
I have spoken with the xstandard developer, we have tried a few things, different test build etc however with little success.
I thought it may have been the userAgent however I set the HTML parameter userAgent to "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)" ut this did not work.
Does AIR have restrictions applied to embedded objects?
Any other suggestions?
any help will be greatly appreciated.
Damian Georgiou

Hi Damian,
ActiveX is only supported by IE on Windows. Also, I believe the HTML component in Adobe AIR only supports the flash plugin and pdf plugin.
Best,
Rob

Background image to fill the whole screen

Hi everybody
Please assist,
1st question : I want to add the background image that fit the whole screen. I have tried to put image background however it leaves white spaces on the edges and another thing is that after adding the background image when I add content in the tables the background image start to repeat.
This is the website example I want to achieve : www.inesjaksic.com , www.grupa-desperado.com
www.street-heroes.com
2nd question : How to add the scroll bar on the text content, so when you scroll only the text moves.
Website example : http://www.kls.com/page.php?p=about/biography/index
Thank you in advance for your help.
Kind regards
Vusi

#1 Background images are static. They don't resize to fill the browser viewport without a lot of additional tricks which may or may not work in all browsers. Moreover images that resize quickly become distorted. For best all around results, build your page to a fixed-width target audience (990px is usually fine for most users). Use a seamless background tile or gradient slice and repeat it vertically (repeat-y), horizontally (repeat-x) or both ways (repeat).
#2 Use CSS overflow and height property.
#divName {
height: 400px;
overflow: scroll;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Spry Menu Bar using CSS background image without losing submenu ( V) indicators

Spry menu bar sets the down and side submenu indicators using
a positioned background image. I have a requirement to use a
specific background image yet must retain the > and v submenu
indicators. Without having to generate full width custom background
images for each of the menu item types to include the side and down
menu indicators, is there anyway to use a generic background image
and show the indicators using just CSS?

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

How to show a background image in the Forms 6i MDI window?

Hello,
We are using Oracle Forms 6i Release 2 Patch 18 on Windows XP in client/server environment (not web server).
Is there any way to show a background image in the MDI root window without using DLL injection to subclass the MDI root window procedure.
Kurt

Please try this
Public Function Decompress(ByVal arr As Byte()) As Byte()
Dim s As Byte()
Dim notCompressed As Boolean
notCompressed = False
Dim MS As System.IO.MemoryStream
MS = New System.IO.MemoryStream()
MS.Write(arr, 0, arr.Length)
MS.Position = 0
Dim stream As System.IO.Compression.GZipStream
stream = New System.IO.Compression.GZipStream(MS, System.IO.Compression.CompressionMode.Decompress)
Dim temp As System.IO.MemoryStream
temp = New System.IO.MemoryStream()
Dim buffer As Byte() = New Byte(4096) {}
While (True)
Try
Dim read As Integer
read = stream.Read(buffer, 0, buffer.Length)
If (read <= 0) Then
Exit While
Else
temp.Write(buffer, 0, buffer.Length)
End If
Catch ex As Exception
notCompressed = True
Exit While
End Try
End While
If (notCompressed = True) Then
stream.Close()
Return temp.ToArray()
Else
Return temp.ToArray()
End If
End Function
Thanks & Regards Manoj

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).

Best practice for Spark repeating background image in a SkinnableContainer?

In my old Flex 3.5 code I would accomplish this by dropping an Image into a Canvas and hitting the Canvas with some css style stuff to get the repeat. The Image tag had a source property that would take a web address so I could dynamically grab different images from the web based on some conditions. Little bit more trouble with Flex 4.5 and Spark but I'm trying to get there.
Here Adobe docs explain how to *embed* a background image:
http://help.adobe.com/en_US/flex/using/WS422719A4-7849-4921-AF39-57FF567B483B.html#WS063B0 491-B7AB-4b00-A39F-E44310BCB0E0
They use a BitmapFill object in the skin.

    <s:Rect id="background" left="3" top="3" right="3" bottom="3" alpha=".25">
        <s:fill>
            <s:BitmapFill source="@Embed(source='../../assets/myImage.jpg')"/>
        </s:fill>
    </s:Rect>
Problem is I need to do this without embedding the image. In my old code I grabbed the image from web (set source property on Image tag to web address). What's the best practice for achieving this with a skinnable container? The BitmapFill object used above won't take a web address for a source.
Thanks in advance.

Use BitmapImage with a fillMode of repeat:
<s:BitmapImage source="http://www.google.com/intl/en_com/images/srpr/logo2w.png" width="100%" height="100%" scaleMode="stretch" fillMode="repeat" />

Background image to fit in DW WYSIWYG editor using HTML

Similar Messages

Maybe you are looking for