How to expand background image or a div to fit browser

Hi All,
Can anyone advise on how I can expand my background image (or currently an image in a div) to fit the browser.
Current page is www.curtissigns.com
I have been trawling through the forum but could do with being pointed at some sample code.
Any advice would be helpful..bearing in mind that I am no expert and have lots to learn LOL
Stuart

You have some serious issues with your code.
40 errors and 5 warnings.
You'd be best off if you clean those up using the validator here: http://validator.w3.org/
As for the 100% background image, there are several ways to do that, all with varying support in older browsers. The easiest way (with least old browser support) would be to use the background-size:cover css attribute. Here's an explanation of how to use it: http://www.w3schools.com/cssref/css3_pr_background-size.asp
If you are worried about older browsers, you'd need to use a javascript, depending on your coding skill, this page gives you everything you need http://louisremi.github.com/jquery.backgroundSize.js/demo/

Similar Messages

Div Background Image...Resize To Fit Browser Window...???

[b]hello again[/b]...
I would like to have a background image (.jpg) automatically resize to fit any browser's window...& I read somewhere on the web it should be accomplished by placing the image in a layer (as a background image); & then set the layer size to 100%.
can someone please tell me how the coding goes for this...?
[or...if that [i]is[/i] in fact the correct approach? I don't care if it's html or css...I just want it to work. (&...I'm starting off w/ a larger image (so resolution doesn't get lost when going bigger)]
thanks very much,
[b]mark4man[/b]
btw - I should add that it's the image's [i]WIDTH[/i] I'm interested in resizing...while it's aspect ration remains in tact.

http://css-tricks.com/how-to-resizeable-background-image/
For the record, I'm not a big fan of huge background images on web pages. They take forever to load on slow connections. And some mobile devices won't display them at all. So all that weight just for eye candy is kind of a waste IMO.
I think the safest, most practical way to achieve backgrounds that fill available viewport is to use a small, seemless tile and repeat horizontally, vertically or both.
More on background-images:
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

Resizing images in a div to fit browser width

i have a page with rollovers in a DIV:
http://toddheymandirector.com/REEL/index_newlook.html
i want the the images, "nike the getaway", etc, to resize to fit the browser window width. i tried putting them in a div and adding
row {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
but it didnt work..
ideas?
thanks

You could try something like the below. Basically it will show a maximum of 4 images per row (25%) so:
if your image width is 300px, for the browser to view all 4 at 100% their window needs to be 1200px wide
if their browser window is smaller than 1200px, the images will start to move onto new rows
if the browser window is bigger than 1200px, it will scale the 4 up to fit the width.
You can change the width of the images to match your optimal browser window and/or change the percentages to see the effect it has.
Eg, if you remove the "min-width:25%;" from #gallery ul li it will not scale the images at all. If you change "min-width:25%;" to "width:25%;", it will always show 4 images in a row and scale up or down to fit the window.
Best thing to do is play around until you're happy. Good luck.
<!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">
body{
    background-color:#666666;
    margin:0;
    padding:0;
#container{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
#title{
    width:100%;
    float:left;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:140%;
    line-height:150%;
    margin-bottom:30px;
    text-align:center;
#gallery{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    float:left;
#gallery ul{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    float:left;
    background-color:#666666;
    list-style-type:none;
#gallery ul li{
    min-width:25%;
    display:block;
    margin:0;
    padding:0;
    float:left;
    background-color:#666666;
img{
    display:block;
    border:none;
    margin:0;
    padding:0;
    width:100%;
</style>
</head>
<body>
<div id="container">
<div id="title">This is a floating web gallery</div>
<div id="gallery">
<ul>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
</ul>
</div>
</div>
</body>
</html>

Background image in a div?

I know how to use css to place a background image inside a
div. However, I would like that image to be contextual, and be
differrent depending what the current page is. As an hypothetical
example, I would like a non-repeating background image of an apple
inside <div class="content"> when the page apples.html is
open, but then an image of a banana would be the background image
inside <div class="content"> for bananas.html.
If there is a way to place background images on the fly,
directly in the html, that would be the better solution for this
novice.
Thanks for any help!
r

Do it this way -
<style type="text/css">
div.content { background-repeat:no-repeat; }
#apples div.content {
background-image:url(/images/apple.jpg); }
#banana div.content {
background-image:url(/images/banana.jpg); }
</style>
(put this in the head of each page (or put the rules into a
site-wide
external stylesheet)
Now, on the apples page, change this -
<body>
to this -
<body id="apples">
and on the bananas page, change it to this -
<body id="bananas">
Get it?
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
==================
"Sbisa" <[email protected]> wrote in message
news:ffqvhs$5q6$[email protected]..
> Thank you!
>
> I will give it a try. I am googling for tutorials on
this, but if anyone
> has one in their pocket that they could share, much
appreciated.
>
> r

Changing background Image of a DIV on RO

I am trying to figure out how to change the background image of a div upn Roll-Over (RO) from the users mouse.
My search thus far has led me to javascript, but if any other ideas/method are known, i have no preference for any language.
I have a horizontal menu w/ 3 divs and a single word centered inside each div. I wish to use each of these divs as buttons w/ RO effects.
To do this i wanted to try and make it so upon roll,over the bg would be replaced with a modified version of the normal bg of the div's.
css rules did not work, and i am trying JS now.
Here are some snippets of code that i have writtin and made from sources i have found online but it still does not appear to work when i test in Firefox.
Here is the addition to the <HEAD> part of my html page.
<script src="../quirksmode.js"></script>
<script type="text/javascript">
     function mouseover(id)
     document.getElementById(id).style.background="url('/images/objects/optionsBarADark.png') no-repeat";
     function mouseout(id)
     document.getElementById(id).style.background="url('/images/objects/optionsBarA.png') no-repeat";
</script>
and here is the code in the html page which is supposed to make the rollover casue the bg to change. (note that i have not added links to the text in the center of the divs yet)
     <div id="middleWrapper">     
         <div id="contentMenu">          
             <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" /> 
            <div class="contentMenuButtons" id="theID1" onmouseover="mouseover(theID1)" onmouseout="mouseout(theID1)">
                 <h1 class="contentMenuHeaders">projects</h1>
            </div>
            <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" /> 
        <div class="contentMenuButtons" id="theID2" onMouseOver="changeHeader(theID2,'1');" onMouseOut="changeHeader(theID2,'2');">
                 <h1 class="contentMenuHeaders">catalog</h1>
          </div>
            <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" /> 
            <div class="contentMenuButtons" id="theID3" onMouseOver="changeHeader(theID3,'1');" onMouseOut="changeHeader(theID3,'2');">
                 <h1 class="contentMenuHeaders">featured*</h1>
            </div>
            <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" /> 
        </div>
and here is some css for the affected class. the a, and a:hover rules are left-over from when i had the text linked.
.contentMenuButtons {
     float: left;
     height: 28px;
     width: 308px;
     background-image: url(../images/objects/optionsBarA.png);
     background-repeat: no-repeat;
     text-align: center;
     line-height: 27px;
.contentMenuButtons a {
     color: #F9FBFB;
     text-decoration: none;
.contentMenuButtons a:hover {
     color: #F9FBFB;
     text-decoration: none;
if you need anything else from the code let me know, but this is everything i have added to try and get this to work.
Any ideas?

I agre with SnakEyez :-)
Your method seems to be the long way of doing a simple roll-over menu.
Lots of examples here as well:
Basic css menus: horizontal / vertical:
http://css.maxdesign.com.au/listamatic/index.htm

HOW TO UPLOAD BACKGROUND IMAGES IN SMARTFORMS

HI
HOW TO UPLOAD BACKGROUND IMAGES IN SMARTFORMS

Hi,
goto se78 -> in the menubar click graphic and import to select ur images from ur system .. then click transport button .. it automatically gets into the smartform graphic image list.. then get into transaction smartform and use the image u imported into that..
U can import anykind of image which u have stored in ur pc through se78..
Regards,
Priya.

Flex 4 Mdi canvass, how to set background image..?

Hi.,
     Now i try to use mdi canvass background image,how to set background image in mdi canvass in flex 4..
With Regards
LinFlex-

In the past flex 3 version, there is an attribute call <flexlib:MDICanvas backgroundImage="@Embed(source='/imgFolder/imgFile.png')/>
to set it. However it has problem in Flex 4 because of 'halo' and 'spark' theme library changed.
The following is my post that still haven't found the answer.
Dear all,
We have a project that doing migration from flex 3 to flex 4. We use flexlib the latest version of
flexlib - 2.5 - flex4.zip.
However we confronted problems that several of attributes that flex 4 doesn't support:
Constraints are listed as follows:
1) <flexlib:MDICanvas backgroundImage="@Embed(source='/imgFolder/imgFile.png')/>
2) <flexlib:MDICanvas backgroundSize="auto"/>
3) <mx:ApplicationControlBar barColor="#000000">
original error message:
====================================================
Description     Resource    Path    Location    Type
The style 'backgroundImage' is only supported by type 'flexlib.mdi.containers.MDICanvas' with the theme(s) 'halo'.    MainView.mxml     /osss/flex_src/hk/gov/labour/osss/view    line 242    Flex Problem
Description    Resource    Path     Location    Type
The style 'backgroundSize' is only supported by type 'flexlib.mdi.containers.MDICanvas' with the theme(s) 'halo'.     MainView.mxml    /osss/flex_src/hk/gov/labour/osss/view    line 242     Flex Problem
Description     Resource    Path    Location    Type
The style 'barColor' is only supported by type 'mx.containers.ApplicationControlBar' with the theme(s) 'halo'.    MainView.mxml     /osss/flex_src/hk/gov/labour/osss/view    line 227    Flex Problem
Regards,
Man Pak Hong, Dave
manpakhong
[email protected]

How to upload background image in Theme Editor

Hi
I want upload an image to theme
I try by the theme edit i'ts not work
I try by Edit "Right to Left" Theme Images
I don't find the button "Upload"
please Help!!!!
How to upload background image in Theme Editor without to entry to the server
Regards
Yossi

Hi
Thank you for response
I want upload to TransparentContainer Image in background
I change the design to Plain
I Try Upload by the browse in the theme
but The image is not upload
even if i delete the chace serever
i'ts not working

How to change background image in existing template?

Hi
Current website needs overall change in background image which is already set in template. Is there anyone who knows how to change background image in existing templates?

Make a friend with firebug & you could find yourself from where it is getting applied.
For the website you have given the background image it is using is [1] and it is getting set in css of body tag [2]. So Find the css at [3] and modify it OR replace [1] with other image with same file name.
[1]   www.hanwha.com/etc/designs/hanwha/images/bg-body.jpg
[2]
body {
    background: url("images/bg-body.jpg") repeat-x scroll 50% 0 #FFFFFF;
    color: #757373;
    font: 14px/18px Arial,Verdana,Helvetica,sans-serif;
    margin: 0;
    min-width: 979px;
[3]
/etc/designs/hanwha/...../*.css

What is the Proper Way to place a Background Image inside a Div?

I have been searching Google and the Adobe forums for awhile now, and while there are very valid solutions to similar problems I found that none of them fixed the problem that I am facing. I blame myself and getting lost in this sloppy coding of mine, so part of my plan was to start my style sheet over from scratch.
My question, what is the proper way to add a background image into a div? I currently have the top div following the "header" css style, here is what I have typed into that sections:
<style type="text/css">
@import url("../twoColLiqLtHdr.css");
.header {
    width: 1000px;
    height: 300px;
    background-image: url(Assets/HeaderTemplate.png);
    background-repeat: no-repeat;
    background-position: center;
The problem here is that the background image isn't even appearing. I would greatly appreciate any help, could anyone inform me on the proper way to doing this so that I can implement images in divs in the future without turning my coding in a down right mess?
Thank you in advance.

I apologize, I'm unable to post a link to the page just yet. This is a snip of coding for a website still in the making for the company I work for.
Would any of the coding below help?:
</script>
<style type="text/css">

</style>
<link href="../twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />
</head>
<header class="twoColLiqLtHdr">
<scmenu class="twoColLiqLtHdr">
<tab class="twoColLiqLtHdr">
<body class="twoColLiqLtHdr">
<div class="header" align="" id="header">Content Goes Here</div>
<div class="scmenu" align="" id="scmenu">Content Goes Here</div>
<div class="tabs" align="" id="tabs">Content Goes Here</div>
<div class="body" align="" id="body">Content Goes Here</div>
<div class="footer" align="" id="footer">Content Goes Here</div>
<script type="text/javascript">var TFN='';var TFA='';var TFI='0';var TFL='0';var tf_RetServer="rt.trafficfacts.com";var tf_SiteId="11773g197b36be92cde14c11fc77dacc3a2a4f1660eb17h9";var tf_ScrServer=document.location.protocol+"//rt.trafficfacts.com/tf.php?k=11773g197b36be92c de14c11fc77dacc3a2a4f1660eb17h9;c=s;v=5";document.write(unescape('%3Cscript type="text/JavaScript" src="'+tf_ScrServer+'">%3C/script>'));</script>
</body>
</html>
That above is parts I added into the source code.

Trying to put a background image into my div but it closes out. What gives?

I keep trying to put a background image into my div but it always closes out when I try to pick an image from the browse button and then I get the spinning colored wheel of death. I've tried it on the CSS Designer Properties section and in the Properties Box on the bottom of the layout.

Could be a memory issue. Try closing Dreamweaver and re-start your computer.
Nancy O.

Auto change background image in . Div

Is there a way to have the background image of a Div change
automatically.
Either at regular intervals or randomly would be fine. The
Div will be a
protected part of a template. Currently the Div is set up as:
#apDiv5 {
position:absolute;
width:970px;
z-index:4;
left: 62px;
top: 147px;
background-color: #cfba8e;
background-repeat: no-repeat;
background-image: url(../images/main-background-09-3.gif);
thanks;
Pat

thanks Murray.
"Murray *ACE*" <[email protected]> wrote
in message
news:go4fns$46s$[email protected]..
> Google JQuery....
>
> --
> 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
> ==================
>
>
> "Pat Jones" <[email protected]> wrote in
message
> news:go49l4$q39$[email protected]..
>> Is there a way to have the background image of a Div
change
>> automatically. Either at regular intervals or
randomly would be fine. The
>> Div will be a protected part of a template.
Currently the Div is set up
>> as:
>>
>> #apDiv5 {
>> position:absolute;
>> width:970px;
>> z-index:4;
>> left: 62px;
>> top: 147px;
>> background-color: #cfba8e;
>> background-repeat: no-repeat;
>> background-image:
url(../images/main-background-09-3.gif);
>> }
>>
>> thanks;
>>
>> Pat
>>
>

How to change background image for each individual page in a template?

I've been working for hours to try to figure out how to change the background image for each individual page in a template. I have tried making a div in the body and adding a CSS and setting a background picture. Unfortunately even after I made it editable all templated webpages changed. I tried looking at different forum results which didn't really help me out. http://forums.adobe.com/message/2670005#2670005#2670005. I've also tried embeding a CSS style on the webpage instead of the external CSS which again didn't work. I'm not sure where to go from here. Is there a good video that explains this clearly. Please help. Thanks.

Adjust inline styles to suit your needs.
<li><a tabindex="-1" href="giving/index.html" class="MenuBarItemSubmenu" style="background:none; color:#FFF; background: #000;">GIVING</a>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How to make background image editable in a template

I have built a template and would like to make the background
image editable, but not the rest of the settings in the body style.
(I'm not sure of my terminology yet.) The background image is
currently set in the locked part of the page. I've tried to insert
an editable region in the html code, as I cannot get to the
background image by clicking on it or selecting on the Design page.
But I am not allowed to change the code in this way.
What is the best way to do this? I'm not sure how to make a
div of this one setting. Or even if that is what is needed.
Thanks for any suggestions.

So to give a different background image to different pages using CSS.
Create a CSS file in your Dreamweaver site.
Link it to your pages.(in your head tag like so: <link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />)
In your HTML code find the body tag and give it an id (like so: <body id="myUniqueID">)
In your stylesheet write the following code:
#myUniqueID{
background: #color, url("path/to/image.jpeg") repeat);
And now extrapolate the above steps and code to your other pages and voila, you now have different background images for your different pages.
To learn more about CSS - visit your local web search engine.
To see the power of CSS, check out http://csszengarden.com/ where the exact same HTML file is styled by different CSS stylesheets.

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.

How to expand background image or a div to fit browser

Similar Messages

Maybe you are looking for