Getting backround image to fit in all browser sizes

I have an image of a baseball field that I would like to use as the backround of a website I am building. The problem I am having is that the image doesn't adjust to the size of the browser if I shrink or inlarge the browser. Is there a way to get backround images to autofit the browser with dreamweaver?

No. Background images are static. They are the size that they are. You can't make a huge background fill viewport in all displays so don't even attempt to use this as your body background image.
The best backgrounds are small, seamless tiles or slices that you can repeat vertically and/or horizontally to fill the available viewport.
More on Backgrounds:
http://alt-web.com/Backgrounds.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Similar Messages

Getting an image to fit across width of browser

Hi
Im trying to get an image to fit across width of browser - I thought i could do it as you would a shape ie size image until red line appears both sides so it will fill automactially as same as a shape. However when I do this it just isnt working - it doesnt stretch across width of browser.
I do realise that I can use BROWSER FILL - however as i already have an image for footer i've used this function which works well. Ive also tried combining the image and my footer as one large image using browser fill - however this doesnt work as when the image is scaled up on a large monitor it puts everything out, as it is just treating it as one large background image.
So my question is - is there anyway I can get an image thats placed to fill browser width without using browser fill?
Many thanks in advance
Paul

Hi,
It works, but when I try this, my image is cut in the length (cutting is different, it depends on witch screen you look).
He don't scroll in image.
Specifications image
Fill (image): filling
Site properties:
Scrollbars browser: always (vertical, horizontal)
Anybody an idea?
Thanks!

Get Cropped Image to Fit Screen?

Whenever I crop a photo the new image snaps to the corner and gets very small. Is there a way to change this so my new image stays floating AND fits the screen? I thought that in the past whenever I cropped an image it would fill the window the same size of the un-cropped photo. The only thing I can do now is after I make the crop select "fit to screen" (Ctrl-0) to get the image view large again. I don't remember having to do this. I crop a lot of photos so I'd really like a way to make the crop instantly go to a large image. Did I mess up my settings some where or do I have to click "fit to screen" after every crop?

Usually when you crop an image in the full edit mode,
the cropped image will be at the same viewing percent
as the uncropped image. In other words if your image was at 100%
view (actual pixels), the cropped image will also be at 100% view.
Sometimes in the floating image mode (non tabbed view) the window will
get smaller and end up on the left top of the screen (don't know why).
If your using pse8-9, you can work in the tabbed viewing mode to prevent the window resizing,
but the image itself will still not fill the screen, only the document window.
In earlier versions you can use the maximize window mode.
MTSTUNER

Need background to fit on all screen sizes

Hi
I have got one of websites live digital-colours.co.uk but the background looks different on different screen sizes, I am just looking to see if any of you have an idea how I can make it fit on all screens.
Thanks
Faye

Hi Faye,
you could have a look here: http://johnpatrickgiven.com/jquery/background-resize/ (You have to wait a little bit until the image is completely built.) On the other hand you should have a view to your site in a global way with critical eyes with "Google labs - Browser Size":
http://browsersize.googlelabs.com/
Hans-Guenter

How do I get a picture to fit the full frame size?

I uploaded pictures into premiere pro and the picture is tall enough for the frame but not wide enough. I want to get rid of the black border without stretching the picture, How do i do so?

If your images are an aspect that does not fit easily into
a standard video frame, you might need to scale up
(or preferably down) and reposition your images to fit.
What are your image dimensions?
What are your Sequence settings?
What is the intended destination for your finished video?
Premiere Pro / Motion: position, scale, and rotate a clip
http://help.adobe.com/en_US/premierepro/cs/using/WSC7A162B6-6EF1-49e1-8622-8127366710BB.ht ml
How do I choose the right sequence settings?
http://www.video2brain.com/en/lessons/how-do-i-choose-the-right-sequence-settings
Also, make sure you're running the most current update (CS6.0.5).
Within Premiere: Help > Updates...

Can't get multiple images to come up in browser.

'alt U' ain't working as I assume it is supposed to be working...
Sometimes when I'm working with Aperture I find I can't get the multiple images to come up in the 'Viewer'. All I get is one image.
And the 'alt U' doesn't work.
This is erratic. Sometimes a double click allows me to toggle between single frame and multiple frames view (as one does with iPhoto). Sometimes it doesn't. What am I inadvertently clicking or not clicking that might be causing this?
Clue (perhaps). Right now the resize slider in the lower right corner seems to be working ONLY on the Browser, not on the Viewer. No matter how I've set the 'View Mode'.
And when it's working as I want ... it's working on the Viewer.
All ears,
Ben

Aha!
I answer my own question. One little icon ... up near the top on the left of the viewer\browser, next to drop-down menu titled (custom), a tiny little icon for the 'view mode'.

Automatic scale of Flash movie to fit different screen/browser sizes

Hi guys,
I am a mid level Flash user. I have a online portfolio site which I have had running for around 4 years.
The site at the moment is in its 4th incarnation as I keep growing tired of the layout and design and keep striving to improve it visually. The previous designs have always been at the standard 800x600px or slightly bigger. So when viewed on the majority of different screen sizes and browsers the site was always fully visible at 100%.
For the latest redesign I've opted for a much larger site size of 1024x768px. This is obviously alot clearer for the user and looks great when viewed on a 19" monitor and above. I for example have a 27" iMac so the site in my opinion looks great.
The problem I have is when the site is viewed on a smaller screen 17" and below, laptops etc. Due to the size of my Flash site if I view it on a laptop screen the side and bottom scroll bars obviously appear on the browser. I want to know if there is anyway that I can publish the Flash site so that whenever the site is viewed on whatever sized screen or browser it is always seen at 100% without scrollbars.
I have played about with the publish settings but can't seem to find a way to do this. I have also downloaded SWFFit (Flash Fit) but i'm not sure whether this will do the trick?
My site can be viewed at:
www.nineteeneightyone.co.uk
Any help or advice would be greatly appreciated.
Thanks in advance.

I was a little confused when you mentioned wanting to "scale" the site and then you mentioned that "the site was always fully visible at 100%".
Now I understand that when you say 100%, you simply meant that all of the site was visible at the same time... no scrolling needed.
"whenever the site is viewed on whatever sized screen or browser it is always seen at 100% without scrollbars".
By this I assume you mean that the site is fully visible? not that you want to view the site at !00%... correct?
Typically when discussing Flash scaling, 100% mean 100% of the browser window, and has nothing to do with how much of the site is visible inside that window.
When looking at Flash scaling, there are a number of things to consider, width, height, aspect ratio, and the use/no use of scrollbars.
Using a size of 1024 X 768 is a good example of a size that will require scrollbars or downscaling in order to display in a Web browser on a 1024 X 768 monitor. A 1024 X 768 will only display about 1000px or less in width and of course with the Web browser address bars etc, a height of 600 or so would be more realistic. So by default, the size requires both horizontal and vert scroll bars when viewed on a 1024 X 768 monitor.
So what would be required to display the entire site without scrollbars? Well in this case, since only 600 px in height are available, the height has to be downscaled about 78% of the original height... so to maintain the same aspect ratio (the ratio of width to height), then the width was also be downscaled to about 78% or original or about 800 px wide... OK that's fine, but because the monitor is about 1000px wide, there will now be about 100 px unused space on the right and the left.
By default, Flash likes to maintain that aspect ratio, so that round things stay round and square things stay square. It just means that as you increase or decrease width or height, the corresponding dimension will also change.. decrease height.. and width decreases also.
Here is an old post that illustrates Flash scaling and how aspect ratio can be maintained or distorted:
Here are examples of different scaling parameters available in the Publish settings. You can also add these parameters directly in the html (<param name="scale" value="noscale"). All the examples replace the actual Flash dimensions with 100% for both width and height (width="100%" height="100%"). These examples use the old <object> and <embed> to illustrate the different ways to scale Flash. Once you understand how it works I’d recommend that you use swfobject to place the Flash in your final project.
View the source code for each page to see the full code.
http://www.cidigitalmedia.com/tutorials/scale/exact_fit.html
"exactFit" scales the file to fit exactly within the confines of the screen, irregardless if the movie becomes consequently distorted. The original aspect ratio is not maintained. So round things are not round and squares are not square.
http://www.cidigitalmedia.com/tutorials/scale/noScale.html
"noScale" is the default setting, and causes the movie to be displayed at the originally designed dimensions.
http://www.cidigitalmedia.com/tutorials/scale/no_border.html
"noBorder" causes the movie to be scaled to what ever dimensions are needed to have no border surrounding the movie within the player, which consequently could result in some of the movie being cut off from view. In other words, the movie will maintain the original aspect ratio and will fill the screen completely. But if the movie has to be streched wider to fill both sides of the screen, it will also stretch taller, but then some of the top and the bottom of the movie may be cut off from view.
http://www.cidigitalmedia.com/tutorials/scale/show_all.html
"showAll" scales the movie to the size of the screen (which could cause pixelation if the file contains raster information), the difference between showAll and exactFit is that showAll mantains initial movie size proportions. Because it maintains the original aspect ratio, there can be space to the sides or the top and bottom. But everything always shows and they are not distorted. But notice the photo in the center, it becomes pixilated at larger screen resolutions.
The trickiest part of trying to go full screen is that it’s difficult to make the Flash wider without making it taller also, that is, to maintain the correct proportions or aspect ratio of everything on the stage. These methods are just simple scaling accomplished with html. There are also methods to dynamically scale the stage and it’s elements using Actionscript… but that’s a much more complex undertaking.
Best wishes,
Eye for Video
www.cidigitalmedia.com
Best wishes,
Adninjastrator

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.

Parallax scrolling not adjusting to different browser size, help?

Hello everyone,
I am putting together this parallax website, http://natashajackson.businesscatalyst.com/index.html and it works on my 15 in mac book, but does not adjust size for smaller or larger screens. I can't seem to make the timing for all the "scrolling effects" line up for all browser sizes.
I have watched many muse tutorials and have figured out how to avoid horizontal scrolling, but again, it only appears to be working on my 15 in book.
The below photo shows my layout properties. Any magical tips that I am missing? I look forward to your feedback!
Thank you

Hey manna9er I was able to figure out the 100% browser width and it turned out to be pretty simple. At first I was "Placing" my images into muse and scaling them to the width of browser, and it never was 100% width. I found that you cannot "Place" you must use the "Rectangle Tool" and create box the width of the browser, make sure that it is 100% browser width, the border line turns red and a tool tip informs you, as seen in image)
Next use the "Fill" option on your top menu bar-->select "Choose Image Background"--> upload image file-->scale to whatever size/style you want. (see image below)
For parallax go to Window-->scroll effects--> and play with Motion, Initial Motion, Key Point and Final Motion. Parallax takes some toying with to get desired effect.
Hope this helps

How do i make site fit in diffrent screen Sizes?

How do i make my site fit in all screen sizes?
Thanks
-Bryan

"BryanRob" <[email protected]> wrote in
message
news:emsf4m$nhc$[email protected]..
> Heres what i did i made a site about that size in
photoshop then saved it
> and
> put it in dreamweaver in a layer and moved the layer so
it woul dbe
> centered
> then i added this code to get backround colar <BODY
bgcolor="#3c0404"
> text="#000000"> and then added another layer on top
just for text. What am
> i
> doing wrong? SOme people say it looks good some dont.
What are you doing wrong?
1. Creating the site in Photoshop (web sites shouldn't be
made entirely of
graphics..)
2. Using Dreamweaver layers
3. Using deprecated code to style the the background color
instead of CSS...
As far as how it looks, obviously we can't say anything
unless we see it..
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet

When browsing a new library that I created, the browser shows dotted lines around grey rectangles, no images. When I double click on a rectangle the image appears. How do I get images to appear in the browser rectangles?

When browsing a new library that I created and exported onto an external hard drive, the browser shows dotted lines around grey rectangles, no images. When I double click on a rectangle, the image appears, but all the other rectangles remain empty - no image. How do I get images to appear in the browser rectangles? I am viewing this on a second computer (an older intel duo iMac), not the one I created the library on (a MacBook Pro). Both computers have Aperture 3.2.4 installed. When I return the external to the MacBook, all images appear in browser rectangles. What's happening on the iMac?

You may have a problem with the permissions on your external volume. Probably you are not the owner of your library on the second mac.
If you have not already done so, set the "Ignore Ownership on this Volume" flag on your external volume. To do this, select the volume in the Finder and use the Finder command "File > Get Info" (or ⌘I).
In the "Get Info" panel disclose the "Sharing & Permissions" brick, open the padlock, and enable the "Ignore Ownership on this Volume" flag. You will have to authentificate as administrator to do this.
Then run the "Aperture Library First Aid Tools" on this library and repair the permissions. To launch the "First Aid Tools" hold down the ⌥⌘-key combination while you double click your Aperture Library. Select "Repair Permissions" and run the repair; then repeat with "Repair Database". Do this on the omputer where you created the library and where you can see the thumbnails.
Then check, if you now are able to read the library properly on your iMac.
Regards
Léonie

Do I need to export multiple sizes for all standard print sizes? i.e.Say I crop the image in LR to 6'5" x 9' to fit within an 11" x 14" (overall) mat of a framed print.. Now let's say I want to reprint that same image in a 12" x 16" size ... to fit within

Do I need to export multiple sizes for all standard print sizes? i.e.Say I crop the image in LR to 6'5" x 9' to fit within an 11" x 14" (overall) mat of a framed print.. Now let's say I want to reprint that same image in a 12" x 16" size ... to fit within a mat of with overall size of 20" x 24"? Or will the 1st export be "locked" at 6.5" X 9" (proportionately)?

So, for the first one Export it cropped to 6.5 x 9 - and in the Export Dialog box there is a capability to rename the file for exported output - which would allow you to add something like the crop or intention to the base name of the file. e.g. for _IMG0846.nef - setup the output filename to _IMG0846-65x9 for 11x14.jpg and output it at, say 300 or 360 dpi. So, it has a unique name and purpose in your output folder.
For best results, now, re-crop the picture in LR - just open the crop [R] dialog again, reframe the image to the new ratio, 12x16 and Export again - with an adjustment to the filename. e.g. _IMG0846-12x16 for 20x24.jpg
So, now you have two clearly identified image files in your output area and you can provide those to whomever is printing for you, etc. Discard them when you're done since you always have the original to return to to re-frame again as necessary.
This way you get output sharpening and resolution (in pixels) optimized for your output print size. Maybe not super important for smallish prints-but more important for larger ones. Output at 100 quality.

How do get a dynamic image to open in new browser window

I'm using DW CS3, mysql (MAMP) OS 10.6.2 I'm designing my online store. I need the customer to be able to click dynamic image/thumbnails to view a larger image in a new browser pop up window 400 x 400. An example of this functionality can be seen at :
http://www.designpublic.com/spot-on-square-roh-dresser
So far I can get the separate new browser window to open with the dynamic image, using the open new browser behavior, but the on click also advances to next page with the larger image. You have to press the back button to get back to the product page. I want the customer to be able to see the product page , while viewing larger image, and then close larger image, and still have the product page open. I don't understand why 2 windows are opening.
Thanks for the help people!
William

Hi
I did look at it but, (and this is only my opinion, I do not like such effects) it is your decision.
If you view source you will see -
<a href="#" onclick="popWin('http://www.designpublic.com/catalog/product/gallery/id/12706/image/91883/', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="Spot on Square Roh Dresser" class="gallery-image-link"><img src="http://arcsmedia01.s3.amazonaws.com/catalog/product/cache/2/thumbnail/56x56/5e06319eda06f020e43594a9c230972d/r/o/roh_dresser1.jpg" alt="" /></a>
Which is controlled by the javascript function
popWin()
which you can view using the firefoxe dev toolbar - view javascript function.
PZ

How to get my images always order by file name, and not by time of captur, in all the folders in the library?

How to get my images always order by arquive name, and not by time of captur, in all the folders in the library?
Sorry for the poor english, but im portugues.
In the library we can change the order of classification of image by, time of capture, name of file etc... I'm wondering if its possible define to be always by the name of file.
It ´s possible?
And i have other question, in print label we have an option to auto rotate to feet in page to have the image using the maximum area in the page (auto rotate, zoom etc), its possible to change the orientation of the rotation to be always in the other direction?

The Muvos are USB Mass Storage devices and do not have the ability to display track information based upon ID3 tags.
The Zens all read and display track info based upon ID3 tag information that is either gathered from an online source or entered by the end-user.
If you want the track information displayed instead of the ID3 tag information, you could edit the ID3 tags and rename the title to whatever you have as the file name. Not sure why your file names would differ so much from the ID3 tag info though, almost all of my content has the same name for the filename as it does on the ID3 tag title.

All of a Sudden Getting Jagged Images in InDesign 5.5

Hello,
Saw an earlier thread with someone having touble with placed images that were jagged, but that thread didn't help.
I'm using InDesign 5.5. Just completed an ePub project with a placed .jpg from Photoshop and had no problems at all. Went to repeat the process with a second ePub project and suddenly I'm getting placed images that are jagged. The fonts especially look horrible. I haven't done anything different that I'm aware of with the second file. Same relative file size. I flatten the image in Photoshop and then save it as a .jpg. It looks perfect in Photoshop. No jaggies. Then place in InDesign and yuck. I have the display performance settings on High. Thinking it might just be a display problem, I export to ePub. Jaggies still there. Even tried with a TIFF. No difference. Just in case the one InDesign file had become corrupt, I opened a new file, layed it out and placed again, and it didn't help. Image still jagged.
What gives? Why would one file place perfectly and the other poorly?

GoldCountry86 wrote:
When you say place at 100% how you mean? I didn't think it mattered since it was going to ePub anyway. I used Cmd + D, click on the page in ID, the image loads. I only resize it on the page for my own benefit in layout.
I mean you don't want to scale the image in ID. The pixel dimensions of the saved image should be the same as the number of pixles required to place the image at the intended size and resolution. When you scale, you are either throwing away pixels or make up new ones by interpolation. Your epub is basically just a web page, and it doesn't care about the resolution of your image, just how many pixels are in it. Any non-vertical or non-horizontal line must be made by stair-stepping around pixel edges -- you can't use half a pixel -- and the more pixels you have available for that stair, the less jagged the appearance will be on screen.

Getting backround image to fit in all browser sizes

Similar Messages

Maybe you are looking for