Constrain Browser to size of background image

I have my background image at 770 x 989. I inserted 1 table
cell at 100% and imported the background image into it. How do I
keep the browser from enlarging bigger than the table cell? I'm
using DW CS3 and have Firefox as my main browser. I'm on a mac
running Leopard 10.5.2
[email protected]

As an example of how you will be trying to accomplish the
impossible, open
the page in Firefox, and increase the text size in the
browser.
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
==================
"Walt F. Schaefer" <[email protected]> wrote in
message
news:fvlvur$aeh$[email protected]..
> If your goal is to make your text content remain fixed
to the background
> image you are chasing a will-o'-the-wisp. Best you stop
and take time to
> learn HTML & CSS and how they interact.
>
>>How do I keep the browser from
>> enlarging bigger than the table cell?
>
> You don't. Again, take time to learn how web pages work
or you will be
> chasing your tail.
>
> --
>
> Walt
>
>
> "James Bechdel" <[email protected]>
wrote in message
> news:fvle96$n39$[email protected]..
>>I have my background image at 770 x 989. I inserted 1
table cell at 100%
>>and
>> imported the background image into it. How do I keep
the browser from
>> enlarging bigger than the table cell? I'm using DW
CS3 and have Firefox
>> as my
>> main browser. I'm on a mac running Leopard 10.5.2
>> [email protected]
>>
>
>

Similar Messages

Cross browser CSS Buttons with background images

Hi All,
I have to make a button for a website in which the labels
will be DB driven, so i came up with css to make such buttons, but
the problem is i need the buttons to work in almost all browsers
(from version 5 - 7 IE, FF 1.0 -2.0, Opera 7 - 9 Netscape 6- 9,
safari and Mac IE and FF), The buttons are also designed in a
specific manner (i.e the button label will be having a break if
there are two words in it and will be aligned center to the
container. the edges of the button are curved and has a gradient
effect.)
I am not able to get the text centrally aligned also the text
goes off the container and gets hidden behind the right side image
in FireFox but in IE it manages to stretch the container but
doesn't gets aligned to the center, thats because i guess i am
specifying width to the container.
Any Help will be highly appreciated.
Thanks
Vinay

Hi All,
I have to make a button for a website in which the labels
will be DB driven, so i came up with css to make such buttons, but
the problem is i need the buttons to work in almost all browsers
(from version 5 - 7 IE, FF 1.0 -2.0, Opera 7 - 9 Netscape 6- 9,
safari and Mac IE and FF), The buttons are also designed in a
specific manner (i.e the button label will be having a break if
there are two words in it and will be aligned center to the
container. the edges of the button are curved and has a gradient
effect.)
I am not able to get the text centrally aligned also the text
goes off the container and gets hidden behind the right side image
in FireFox but in IE it manages to stretch the container but
doesn't gets aligned to the center, thats because i guess i am
specifying width to the container.
Any Help will be highly appreciated.
Thanks
Vinay

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 :(
>

Set browser window size?

Is it possible to set the browser window - specifically IE - when opening my form when using seperateFrame=false?
I am developing a single window app that is lost in the IE window when it starts up. I would like to size the IE window in relation to my app when it opens.
Also, can I display something other than the dark grey background surrounding my form - perhaps replace it with a nice jpg?
Thanks
Richard

Richard,
- only if you start the browser window from another using javascript (window.open()) you can define the size of the browser window.
- set background = <image name> in the formsweb.cfg file
Frank

Multiple Instance of Same Background Image

Hello.
Everytime I make a new page, iweb obviously makes a new folder with the supporting documents of that page.
The problem with this is that images, such as background, are reloaded for every. single. page, over and over again. The browser views the same background images as different ones because well, they are.
The site I am referring to is http://audiologic.us Every time you go to a new page, it takes forever to load because none of the images are stored in the browser cache since they are all duplicates, in different folders.
Does anyone know how to force iweb, or an easy way outside of iweb to cross-reference the same background image on multiple pages so it is stored in the browser cache?
Thanks a bunch
~ Ben

Check this thread.
http://discussions.apple.com/thread.jspa?messageID=4477351&#4477351
The trick is to use images that don't need to be re-rendered before they're posted. So if there's any opacity, size, orientation changes that need to be made, do them outside of iWeb then drop them in. iWeb should then place these items in it's Images directory and all pages will reference those from that location.
I used this on one of my pages
http://web.mac.com/makentosh/iWeb/tipsfromtheiceberg/visual_archive.html
so that each indicator loads only once, but shows on the page several times.

Tables & Background Images

I am currently using Dreamweaver CS4. I am attempting to add
a background image into a table cell. When I look at how to do this
on the web, it says to select the Bg Image within the PROPERTIES
PANE, then browse and choose a background image. My problem is as
follows; the 'Bg Image' feature does not appear in the PROPERTIES
PANE, only the 'Bg Color' selection appears. Is there a setting I
need to set to turn this feature on in the PROPERTIES PANE?
Thanks,
Rick

RickGenga wrote:
> My problem is as follows; the 'Bg Image' feature does
not
> appear in the PROPERTIES PANE, only the 'Bg Color'
selection appears. Is there
> a setting I need to set to turn this feature on in the
PROPERTIES PANE?
No. You need to learn how to create a CSS style rule.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Button with full background image

Hello,
I want to have a button with a image as background.
The background image has to fill the complete button background.
If you see the screenshot (url) , there is space around the image.
I have add a red border to see that the button size != background image.
I also tryed style with -fx-background-repeat: repeat-x;
[http://office.techniconsulting.be/~peeters/button.png]
Button button = new Button();
ImageView imageViewOn = new ImageView();
imageViewOn.setImage(....);
ImageView imageViewOff = new ImageView();
imageViewOff.setImage(imageViewOff);
button.setText(this.name);
button.setGraphic(imageViewOff);
button.setContentDisplay(ContentDisplay.CENTER);
button.setStyle("-fx-border-color: red; -fx-border-width: 1;");

Maybe not the perfect solution, but you can make the background transparant of the button so you won't see the button.
button.setStyle("-fx-background-color: rgba(0%,0%,0%,0)}");Else I would say, don't use a button and create your own.
-Stackpane
--ImageView with image
--text
For events, you can put events on the StackPane..
Edited by: FXdude on 25-jan-2013 5:02

Footer over background image

I have a site with a large different background image behind every page. I want the footer to be stick to the bottom of the browser window, with the background image going behind the footer.
Muse pushes the footer below that background image.
Suggestions?
Jeff

Hello, I can think of 2 ways to fix this.
1. Use this background image as browser fill and it will stay behind the footer.Second half of the video below explains how to do that.
Add an image to the background of the page or browser | Adobe Muse CC tutorials
2. You can also use layers tab in muse.
    Create a new layer in Layers tab
    Move the new layer below the existing layer (drag and drop).
    select the footer items and move them to the lower layer by right click > Move to layer > select the lower layer. Make sure Footer items are below the layer that has the background image. Check more about layers in the like : Adobe Muse Help | Working with Layers
Regards
Vivek

Background image inside a div that rescales to the size of the browser in jquery mobile

I want to place a background image in my content area using Jquery mobile, however i want the image to re-scale itself to the size of browser and different devices. How would i go about this ??

jQuery Mobile is essentially a one page site. Background gradients are determined by the jQuery Mobile Theme you use (a, b, c, etc..). I don't know if it's possible to use a scaling background with jQMobile. I've never tried it. But you'll find the relevant code in your Theme.css file. Look for ui-body-a, ui-body-b, ui-body-c, depending on which Theme you're using.
Nancy O.

Resizing browser to background image size

I am trying to redo my website and I want to have a large landscape image on the opening page and for the browser to automatically resize to the proportions of the images and for the image to change in size when the browser window is changed in size.
To make it easier to understand I want it to work like this:-
http://www.lachapellestudio.com/
I don't want a 'border' to appear at any point. Does anyone know a small HTML snippet that will make this work???

> Does a background image have to be smaller than a
certain size in order to
> show up as your background on a web page
no
-Darrel

How to get background image to fill the browser and remain fixed in both IE and Firefox?

Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
First of all, I'm using IE8 and the latest version of Firefox to test this.
I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

This works in modern CSS3 supporting browsers. But not pre-IE9.
http://alt-web.com/TEST/Resizable-BG.shtml
Nancy O.

Problems with the background image size in a photobook

Hi there, I really need help here. When I make a photobook I want to display my images large, taking the whole page. To do that I put the image as a background and it's OK. My problem is that when I do this, iPhoto always crops it. I have to use the move tool to move the image up and down, left or right to chose a best position. I don't want to do this, I want my image to be shown perfectly from end to end. I have to resize the image in many ways, even used the book's native resolution but it still doesn't work. If I choose "fit photo to frame size" I end up with two stripes at the top and the bottom of the page.
Please help me, what size should I resize my image to, so that iPhoto displays it as it is?
Thank you

Hi
The fact you are using a Mac is why both myself and JCellini assumed you where using a pre IE7 version.
But the code you are using to test in IE will cause a problem with any 'virtual machine' such as crossover, because it cannot reference anything outside its own assigned section of the drive, and referencing the png in the way you are would be for it an invalid reference, it also would not work in any browser when you uploaded the site.
Change - background-image:url(file:///Macintosh HD/Users/myname/Documents/websites/test/Test/images/test_back.png);
To - background-image:url(images/test_back.png);
But if the region is not editable I would suggest you temporarily make it so, externalize your css to a css file, insert a link to the external css file in your head content, then lock the region once again. This way you will always be able to edit your css without worrying about 'locked regions'.
PZ
www.pziecina.com

Match Background Image and Browser Image

Hello,
I am using a background image that I created for my page background. I would like it to be the same image for the browser background as well vs. the solid color option.
I've attached the same image and when it is live, the color is off (it's a gray image with a texture treatment). So, it looks like a box and then another box.
Anyway to get around this? Should I resize? Can I make the background image bleed so it takes over the browser background?
I tried making the page size large, but then on screen, the scroll bar made everything of center.
Help please!
Thanks!

Have you tried setting your page background to none?
If you do this you will only see the browser background (with your image on it) when published.
David

Background image sizing for all screen sizes

How do I make my background image conform to different size screens? I had it set for my 27" monitor but it looked horrible on my laptop so I made it smaller and its still not fitting my laptop scree and it looks so small on my 27' now its horrible there. Please help???

Hello,
I would suggest you to use this image as the browser fill.
You can check the links about browser fill:
Add an image to the background of the page or browser | Adobe Muse CC tutorials Check from 2:00
https://helpx.adobe.com/muse/using/using-fill-browser-fill-options.html
Regards
Vivek

Background Image Size

Hello! First time poster :)
Is there any way to compress background images in Captivate
3? I'm creating a tutorial on how to use the admin side of a
website that will be uploaded for people to log in and view. When
all is said and done, there will be about 300 slides and 45 minutes
of audio broken up over those slides. I'm editing MP3s outside of
the program to keep their size low, but the background screen shots
are killing me. In order to fit the entire browser into the shot,
the slides had to be 920 x 695 pixels and each shot is about 2.5MB,
making my .cp file size a cumbersome 800+MB. I'm worried that the
size of the published file is going to be too large for most people
to view easily.
I feel pretty comfortable with this program, but as a first
time user, I'm worried that there are things I should be doing
differently to avoid such large file sizes. Any suggestions on ways
to decrease my file size?
Thanks so much!

Thanks for your quick reply! Having only used Captivate in
tutorials, I wasn't sure what its capabilities were as far as how
much you should put in one file. I have the slides divided into
sections that I could easily save out as separate projects, but
here is my concern. I need the tutorial to work as one cohesive
piece. Ideally, the user needs to be able to watch it once all the
way through, but have the option of skipping to various sections
they'd like to view again. I was planning on doing this via a
button appearing on each slide that would take them to a single
slide that would navigate them to whatever section they needed. Is
there any way to split up the files, yet still make a singular
published file (or at least something functioning as like a
singular published file)? What are your recommended limits for
Captivate projects?
Any suggestions are welcome as I'm running into a time
crunch. Let me know if my explanation is at all unclear.
THANKS!!

Constrain Browser to size of background image

Similar Messages

Maybe you are looking for