Background JPG Stretch to Browser Size

I have a gradient saved as a jpg and have set it as the background image for a page. I want it to stretch it to the size of any browser window so it will completely fill the background. How do I accompilsh this?

You can repeat it horizontally by using the CSS repeat-x attribute in a background rule:
http://www.w3schools.com/css/pr_background-repeat.asp
Vertically (down the page) the usual approach is to make the image dimensionally greater than 2 or more screens in height but very narrow
e.g. a 5 pixel wide x 1500 pixel high image. This keeps file size to a minimum with maximum screen coverage.

Similar Messages

Make a background photo that will resize to the users browser size

I'm trying to create an effect like this in Iweb:
http://neistatbrothers.com/
You'll notice that the background image resizes to the browser size.
I have read threads like that say to edit the HTML from "Scroll" to "Fixed"... that doesn't seem work.
THIS website is NOT what I am looking for.
THIS website is NOT what I am looking for.
Thanks!

Thanks Wydor,
I'm trying to decode this very elegent and cryiptic answer. I am an iweb user after all so I need a few more baby steps. I'm going to try and over-communicate to clarify. This response is long, but I appreciate your help.
The link that you sent me (the way that page looks) is exactly what I am looking for.
So I'm assuming that this is the code I will need :
<script language="JavaScript" type="text/javascript">

</script>
And of course changing the image title and folder.
From iweb I have downloaded my "site" to a local folder where I can edit the HTML files from Dashcode 3.0.1.
The code looks like this for that page which I have titled "Blank", the Image I want to use is titled "SNV33631.jpg" :
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Generator" content="iWeb 3.0.4" />
    <meta name="iWeb-Build" content="local-build-20110920" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="viewport" content="width=700" />
    <title>Blank</title>
    <link rel="stylesheet" type="text/css" media="screen,print" href="Blank_files/Blank.css" />
    
    
    <script type="text/javascript" src="Scripts/iWebSite.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
    <script type="text/javascript" src="Blank_files/Blank.js"></script>
</head>
<body style="background: rgb(255, 255, 255) url(Blank_files/SNV33631.jpg) repeat scroll top left; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
    <div style="text-align: center; ">
      <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: transparent; text-align: left; width: 700px; " id="body_content">
        <div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div class="com-apple-iweb-widget-navbar flowDefining" id="widget0" style="margin-left: 35px; margin-top: 0px; opacity: 1.00; position: relative; width: 630px; z-index: 1; ">
            <div id="widget0-navbar" class="navbar">
              <div id="widget0-bg" class="navbar-bg">
                <ul id="widget0-navbar-list" class="navbar-list">
<li></li>
</ul>
</div>
</div>
          </div>
          <script type="text/javascript"><![CDATA[//><!]]></script>
          <div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
        </div>
        <div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div style="height: 1px; width: 630px; height: 1px; left: 35px; position: absolute; top: 3px; width: 630px; z-index: 1; " class="tinyText">
            <div style="position: relative; width: 630px; ">
              <img src="Blank_files/shapeimage_1.jpg" alt="" style="height: 1px; left: 0px; position: absolute; top: 0px; width: 630px; " />
            </div>
          </div>
        </div>
        <div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div style="height: 480px; line-height: 480px; " class="spacer"> </div>
        </div>
        <div style="height: 150px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
        </div>
      </div>
    </div>
</body>
</html>
My question are as follows
1: Where do I paste the code you gave me.
2: do I need to reformat or add modifiers like, "<" or ">" to it because it is Javascript not HTML code.
3: do I paste it in the "Index" file or the "Blank" file.
Thanks

How to make a background image stretch?

I notice there are two options for background option "tile" and "original size". What happened to stretch? I would like the background image to take up the whole page no matter what size the browser window is. Easy enough to do with CSS and HTML. Any ideas on how to do this, am I missing something, or can I employ some sort of trick to achieve this? Thank You : )
Regards,

It's available for the Page background in the Inspector/Page/Layout pane but not for the Browser background.
Click to view full size
OT

Flash based website.. stage/background resize to fit browser?

Hi,
I've built a pretty basic portfolio-style website using Flash and Actionscript 3. All is functioning well, with the exception of stage size vs. browser size. Basically, I want the stage/background image to resize to fit the stage, while having the main content stay fixed in the middle. What is the easiest way to go about doing this? Also, if at all possible, a step-by-step guide would be amazing since I'm pretty new to AS3/coding in general.
Thanks so much!

That helps with it resize with the browser, but there is still a considerable gap on either side of the background(striped) image. I know I can handle the top/bottom gap with a little CSS, but how do I make the background stretch all the way left and right? I think even tiling it might work fine, but I'm still unsure of how do do that.
I've attached a screen cap of what's seen in the browser preview.

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

Background troubles. Locked page size, or repeating background...?

I'm trying to decide between a 1024x768 page size, and locking that in so it will always be that size, or having the content flow downward with a repeated pattern in the background. But I'm not sure how to do either of those things. Point me in the right direction?

You can define the Page width and Min height globally for all site pages in File -> Site Properties or for individual pages in their Page Properties. The page height would flow downward based on the content height in individual pages. To have a repeated pattern in the background, use the Fill/Browser Fill options in the Master Page and setup a background image with Fitting set to Tile.
Thanks,
Vinayak

Hi there, I want to change the background-color of the browser, when a popup-picture is shown. This picture pops up by clicking a hyperlink in the text...can anyone help me please...thanks a lot

Hi there, I want to change the background-color of the browser, when a popup-picture is shown. This picture pops up by clicking a hyperlink in the text...can anyone help me please...thanks a lot

Hi,
CSS is interpreted by your browser, so server cache seems unlikely in htis case. There is however some hierarchy in CSS, so parts of the APEX CSS, theme CSS or page CSS might overwright or block yours.
Does changing the CSS on runtime affect your page? Eg, run the following in your browser console and see if your page turns black: $('#uBodyContainer').css("background-color","black")
Also try moving up your css in the hierarchy labeling it as important:
div#uBodyContainer {
background-color:#000000 !important;
See:Assigning property values, Cascading, and Inheritance
Regards,
Vincent
http://vincentdeelen.blogspot.com

Ibooks author, how do I get the standard book pages background into my document. I have published one book so far which does not display with a book pages background or options for font size.

ibooks author, how do I get the standard book pages background into my document. I have published one book so far which does not display with a book pages background or options for font size.

No on the book title, no problem there.
The issue is: my book pages appear as on white paper, no background that resembles a open book and also no option to change fonts. The book was created in iBooks author, there was a problem going with the "Publish" menu route so I was instructed my Apple to "export" the file and submit that. I think that's the problem after reading that iBooks author is a hybrid epub file.
Thanks for getting back to me.

Site that automatically resizes images based on browser size

Hi. I need to make a site that automatically adjusts the size of the images based on the browser size, but keeps the image quality. Does anyone know how to do this without using flash?
I basically want the site to perform like [http://www.shotview.com/|http://www.shotview.com/] . Thanks for your help.

first time accessing website get screen size info using javascript and then redirect to next page and store screen size info into session. then, when requesting pictures from browser use custom servlet, mapped to image extension, that renders images to different resolution.

Displaying a jpg on the browser using a simple http server.....

Hi
I've written a simple server which responds by sending a jpg file .
BROWSER ---request---> SERVER ( reads a jpg file, converts to byte[] and writes to browser )
^
|
|
<----response ----------
So I connect from the browser and the server sends a jpg and I'd to display that. Everything is thru sockets. There is no webserver as such.
The problem is, I'm getting the text fine, but instead of the picture, I get lots of characters...probably the browser is unable to interpret the jpg . How to I display the jpg ? Do I have to convert the characters in the server code before sending it ?
Anything to do with Base64 encoding ??
Thanks !!

All answers to this question including mine disappeared ??????
In order to serve an image or any other type of data over the HTTP protocol you have to supply the correct HTTP response header with the data.
The stream of bytes written to the client should be structured like this:
A status code followed by several lines of key/value pairs with header information, a blank line and finally the bytes of the image.
All lines in the header should end with \r\n no matter what OS the server is running.
HTTP/1.1 200 OK
Date: Wed, 07 Nov 2001 18:37:47 GMT
Server: MyServer/0.1
Content-Type: image/jpeg
Content-Length: 4321The Content-Length field must have the length of the image data in bytes. The Content-Type field must be the correct mime type for the image data.
Read RFC 2068 if you want or need more information.

How come every time I bring in a new image into Adobe Ideas as a background it's a different size?

I created a multilayered stencil in Photoshop and each layer was exported as a TIFF. Then I uploaded those TIFFs to Adobe Creative Cloud. My idea was to trace each of the TIFFs using Adobe Ideas, which seems to work except, every time I bring in new TIFF as the background photo to trace, it's a different size.'
How come every time I bring in a new image into Adobe Ideas as a background it's a different size?

When importing images through the Photo layer in the layers panel, the image that comes in has a size that is dependent on the current zoom level of the document. This may explain why you are seeing different sizes. You can select the hand tool and double-tap on your sketch to return the zoom level to 100%. If you do this before importing your photo, then your photos should all be imported at the same size.
Hope that helps,
Frank
Ideas Engineering

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

Keeping layers overlapping in different browser sizes

I am having trouble finding a simple solution to a AP Div problem. I have set up a new file using Dreamweavers HTML page "1 column fixed, centred, header and footer". This is excellent as it keeps the design no matter which browser size my audience may be using. I now wish to add a new Div which will contain my links bar across the top overlapping my logo. When I do this the links bar layer does not move with the rest of the design as the browser size changes.
So basically how can I maintain any new layers I add to this page to keep them moving in line with the headers, footers and rest of the Divs as the browser resolution/size changes?
Help appreciated!

If you do keep on with the use of AP divs then I think my earlier comment is how I see the solution to what throws a lot of people:
martcol wrote:
If you do use position absolute you should think about using position:relative on the containing element which will then become the reference for the positioned element.
An absolutely postitioned element is always positioned relative to something. If a containing element is not set as position:relative the absolutely positioned element's reference becomes the browser window. This means that the absolutely positioned element is positioned relative to something that can be moved around (that's my paraphrase).
Likewise, absolutely positioned elements don't seem like anything else that isn't absolutely positioned or fixed. So, if you use AP divs as a crucial part of the structure of your page you need to check carefully what might happen if the user increases the text size in the browser.
Best of luck
Martin

HT4236 Why will my iPod not sync all the photos I want it to - I get a message saying that it cant display certain images. All my photos are in jpg format and similar size.

Why will my iPod touch not sync all the photos I want it to. I get a message saying it cant display some of my photos. They are all in jpg. format and similar size. Never had any problems before!
Thanks

That sounds exactly like an issue that has plagued McAfee users for around a year.
Try disabling email scanning in your anti virus program.

Background JPG not showing in IE - Firefox perfect

http://www.fixyourenergy.net/
Firefox displaying perfectly.
but In IE, only "HOME" link is OK, background JPG displaying way out of position (in bottom right) on all other links.
I've gone blind looking through the code for my mistake
Gratitude for a solution will be unbounded
TIA

You could start by uploading your CSS file. 404 error, not found:
<link href="oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Background JPG Stretch to Browser Size

Similar Messages

Maybe you are looking for