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

Similar Messages

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

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

Resizing 1) background images and 2) div's containing images

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}

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/

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.

Different background image (div) on each page of site complicated by template

Hope I can explain this: Below are specifics
- Using Dreamweaver cs5.5
- Making the pages from a template.
- Each page will have a different backround image; but the image is contained in a div tag (div name is .mainbackground) which runs behind the main core of the site, the image is not in the <body>
- The div .mainbackground is EDITABLE
- I have already made a specific css class to assign to that div on each page so that the image is different on each page.
- On the template page the div .mainbackground has no image class assigned to it (thus no background image)
- Since that div is editable I can then go into each page and assign the desired image class to it - works great. EXCEPT...... & here's my main question:
- In the code all of the other regions are contained IN that above mentioned div of .mainbackground SO that means that:
- if I need to update the structure of the pages I will have to remove the Editable region that controls the background image which would be - removing the .mainbackround editable region. Then go back to my template, make changes and save everything - thus all the changes will carry through to my other pages. This is good and bad because I would get all the structural changes but I would also loose all of the text specific to those pages.
-Then when I'm finished I would have to go back and first add an editable region back to the .mainbackground class and then re-apply the background classes back to the .mainbackground to fix the images on the pages again...
The site is very small site so I can deal with it but am I going about this all wrong?
Is there some template feature I'm not getting? I would like to keep using the template feature, and i do want a different pic on each page.....
I have attached a picture showing one page so you can see the background image - which will be different on each page.

If your Template has embedded CSS within the <head> tags, and the <head> has an editable region defined, you should be able to change styles in child pages.
TEMPLATE CODE:
<head>
<style type="text/css">
.mainbackground { }
</style>
</head>


CHILD PAGE CODE:
<head>
<style type="text/css">
.mainbackground {
background-image:url(page2-BG.jpg)
</style>
</head>
Give it a try.
Nancy O.

Fix background image within div

Hello
I've done a lot of research about this, and tons os answers have come up, still, none solved my problem so far.
I'm trying to make the background image within a div to be fixed when i scroll vertically.
Have a template made, in which the only editable div is the rightdiv. (in red, to be easier)
Here's my code
CSS
body {
margin-top: 0px;
margin-bottom: 0px;
background-position: center center;
background-image: url(../Images/bgdr.jpg);
background-repeat: no-repeat;
#wrapper {
height: 875px;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
#header {
background-repeat: no-repeat;
clear: none;
float: none;
height: 214px;
width: 1000px;
background-image: none;
position: relative;
padding-top: 10px;
#leftDiv {
clear: none;
float: left;
height: 500px;
width: 245px;
position: relative;
text-decoration: none;
#rightDiv {
clear: none;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;
#footer {
height: 100px;
width: 1000px;
clear: both;
position: relative;
padding-bottom: 20px;
And here is my HTML

<div id="rightDiv" style="background-image: url(Images/informacao.png)">
</div>

Well, thing is that on Internet Explorer 9, the background image will repeat vertically when i scroll vertically. On Chrome it will stay fixed on scroll (and that is what i want).
I tried adding style="background-attachment:fixed" , but that will make the image align fix itself relatively to the whole page, not the div only. Also, it repeats itself 4 times to oocupy the screen. I can solve that by "no-repeat", but it still is fixed to the browser page, not the div.
I've been trying to fix this for days.. Help would be much appreciated.
Funny thing is that this only happens in IE9.. Chrome works perfectly.

DevilUrd wrote:
Didn't work. sorry, but i don't think i understood ur reply quite well..
Here's what i used:

<div id="rightDiv" background: url('Images/informacao.png') no repeat fixed;>
<tr>
<td>textextextextextextextextext</td>
</tr>

Could u pls be a little more detailed?
sorry, but i'm still very unexperienced at this..
That is not a valid way to write css into your page and will not work. You appear to be trying to use the background shorthand css property within the html tag itself. If you want to use an inline style, it would need to be within the style html attribute...
<div id="rightDiv" style="background:url(Images/informacao.png") no-repeat fixed top left;">
But it would be better to place it in your css instead...
#rightDiv {
clear: none;
background:url(Images/informacao.png") no-repeat fixed top left;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;

Div background images moving in template

I am using a "stock" css layout (from Dreamweaver). I have a
header div with an image placed in it with text on top. I have made
some content text editable on other parts of the page, however when
I make the page a template the image placed in the div disappears.
I checked the code, and the .jpg is still listed. Any ideas or
suggestions on how to fix this would be appreciated!

Line 30?
Can you upload the page and post a link instead?
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
==================
"VIPGuilford" <[email protected]> wrote in
message
news:[email protected]...
> Ok. here is the code. The reference to the image.jpg is
on line 30. It was
> placed as a background image in Header div in DW.
> and the text was placed on top..thanks for your help
everyone ( sorry for
> all
> the commenting in the code)
>
> <!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>Vacation Palace</title>
> 
> <style type="text/css">
> <!--
> body {
> font: 100% Verdana, Arial, Helvetica, sans-serif;
> background: #FFFFFF;
> margin: 0; /* it's good practice to zero the margin and
padding of the
> body
> element to account for differing browser defaults */
> padding: 0;
> text-align: center; /* this centers the container in IE
5* browsers. The
> text
> is then set to the left aligned default in the
#container selector */
> color: #000000;
> }
> .twoColFixLtHdr #container {
> width: 780px; /* using 20px less than a full 800px width
allows for
> browser
> chrome and avoids a horizontal scroll bar */
> background: #FFFFFF;
> margin: 0 auto; /* the auto margins (in conjunction with
a width) center
> the
> page */
> border: 1px solid #000000;
> text-align: left; /* this overrides the text-align:
center on the body
> element. */
> }
> .twoColFixLtHdr #header {
> padding: 0 10px 0 20px; /* this padding matches the left
alignment of
> the
> elements in the divs that appear beneath it. If an image
is used in the
> #header
> instead of text, you may want to remove the padding. */
> background-color: #FFFFFF;
> background-repeat: no-repeat;
> background-position: 0px;
> background-image: url(file:///Macintosh
>
HD/Users/davidwasserboehr/Desktop/lesson01/images/cloud_header.jpg);
> }

Firefox 4.0: Improper handling of Animated Gif background-image

FF 4.0 is giving erratic and incorrect displays of an animated gif on a project I am working on. I have prepared a very small sample that demonstrates the problem.
The problem occurs when an animated gif is used as the background-image for a div (it may also be true when used as a background-image for the body, but I have not tested that).
When a page is first loaded, the animated gif displays properly.
I would expect that the animation be displayed as animated either:
# On each page load
# On a page load with new session or when the image is removed from cache prior to loading the page. Otherwise the last frame of the image would show
The sample page is designed to test this.
IE: Behaved as in #1, i.e. the image was animated on each and every page load. (IE 8: 8.0.6001....)
Google Chrome: Behaved as in #2, i.e. the image is animated only when there is a new session or when the image is no longer in cache. (Version 10.0.648.204)
FF 3.6.8: Slightly strange, but acceptable.
* The image is animated on new session and on any reload button.
* The last frame is displayed if the location is reentered in the URL bar.
* The last frame is displayed if the back/forward navigation buttons are used.
* SOMETIMES the image is animated and sometimes the last frame is displayed when the change page button is pressed (i.e. Javascript change page).
FF 4.0: Just plain NOT acceptable
* Correctly animates the image on page load for new session
* Correctly animates the image on reload button following clearing the image from cache.
* INCORRECTLY shows the FIRST gif frame if the reload button is pressed.
* INCORRECTLY shows the FIRST gif frame if the URL is reentered from the URL bar.
* INCORRECTLY shows the FIRST gif frame if the page change button is pressed (i.e. Javascript change page).
* INCORRECTLY shows the FIRST gif frame if theURL is reentered from the URL bar after clearing the image from cache.
* INCORRECTLY shows the FIRST gif frame if the page change button is pressed (i.e. Javascript change page) after clearing the item from cache.
All of these tests were run with Windows XP-Pro (all service packs and updates applied).
I can find no clear specification as to what ''should'' happen with pages using animated gifs that are already loaded.
* I can conceive of rationales for always displaying with animation.
* I can also conceive of rationales for sometimes displaying the last frame, especially if the same page is being reloaded since many sites reload the same page in response to user form submissions.
# '''I can see no rationale for displaying the first frame of the gif and would suggest that this is a bug. '''

Can be this bug:
* [https://bugzilla.mozilla.org/show_bug.cgi?id=641198 Bug 641198] – Rollover animated gif show only one frame.
You can try these nightly test builds to see if they behave better:
Fx5.0 ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora
Fx6.0 ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-central
Create a new profile exclusively for each Firefox version and create a desktop shortcut with -P "profile" appended to the target to launch each Firefox version with its own profile.
See these mozillaZine KB articles for information:
* http://kb.mozillazine.org/Testing_pre-release_versions
* http://kb.mozillazine.org/Creating_a_new_Firefox_profile_on_Windows
* http://kb.mozillazine.org/Shortcut_to_a_specific_profile
* http://kb.mozillazine.org/Using_multiple_profiles_-_Firefox

How do I place an image in a div container for only 1 page?

I am designing a web site for my wife using DW. The basic
look of all the pages follow this format: <darhosta.com>. I
need to make about four pages that look different that the basic
look above. In essence I want to make the background white and have
a 'background image in the div container. Thanks to Nancy, who
frequents these forums, I was able to get rid of the background
image that surrounds the main div container with the CSS she
suggested. (Here's the page with Nancy's suggestion of the correct
CSS and where to insert it -Thanks Nancy-: <
http://darhosta.com/Pages/iltn.html>
The page is almost done but I want to have a background image
in the main div container. I've been trying to figure this out on
my own but haven't been able to. Can anyone help me? Thanks for the
help,
Lou
Note: Here the CSS that Nancy suggestion with my modification
included to get rid of the background. If anyone needs to see more
of the code please email me.
Thanks again,
<style type="text/css">
body {
background-image: none;

</style>
I now want to place an image in the div container. I've not
been able to figure out how to do this.

louhosta posted in macromedia.dreamweaver
> <
http://darhosta.com/Pages/iltn.html>
> The page is almost done but I want to have a background
image in
> the main div container. I've been trying to figure this
out on my
> own but haven't been able to. Can anyone help me? Thanks
for the
> help, Lou
> Note: Here the CSS that Nancy suggestion with my
modification
> included to get rid of the background. If anyone needs
to see
> more of the code please email me.
No need. All source is available from the link.
In ilth.html, change this:
<style type="text/css">
body {
background-image: none;

</style>
<link href="../css/global.css" rel="stylesheet"
type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
to this:
<link href="../css/global.css" rel="stylesheet"
type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-image: none;
background-color: #fff;
#container {
background-image: url(../images/global/bkPage.jpg);
</style>
By embedding the styles AFTER the linked stylesheets, the
rules
will overwrite property/value pairs in identical rules that
may already exist in the linked sheets - assuming no
!important.
Mark A. Boyd
Keep-On-Learnin' :)

How to create a full page background image that is fluid?

I'm creating a website for my portfolio, and one of the things I wanted to have is a full page background image that the div tags are in. I know there is a way to put it in via page properties, but that doesn't allow you to add CSS styles and I want the image to re-size with window changes. This requires putting the image in a div tag, but then it pushes the other div tags (such as my header section and navigation) so that they aren't over the image like I want. Is there a way to push the image div tag to the back so that the other div tags go over it.
I'm using HTML5, and it will also be a responsive design, but the fluid background is only for desktops.
I don't go on the adobe website often, so if you have an answer to this, or need more information to figure it out please email me at [email protected] and you'll get a faster reply than on this forum.
Thank you everyone for your help.

You should set this forum to email you on a reply.
I don't have a link in your question to determine how you are trying to do this, but here's a technique I have used:
Take a look at this website and see if it doesn't have what you are trying to do. You'll see the flag in the background and I have used opacity in the layers on top of it to keep the flag somewhat visible.
Now, what the flag does not do is re-size itself with the viewport (the browser window). But the flag is in a div that sits on top of the body. My code is accessible, but you're looking for the flag div and it's defined in CSS thusly:
#flag {
          width: 100%;
          background-image: url("../images/polish-flag.png");
          background-repeat: no-repeat;
          min-height: 900px;
Now, CSS3 adds a new attribute you can apply to the background image thusly:
     background-size: 100% 100%;
That would make your background fill the viewport.
I chose to not do that, because I was worried about versions of Internet Exploder before 10.

Background image doesn't preview in browser

Is there something I'm not understanding about my Dreamweaver
Site settings? I'm trying to code a site using CSS which has a
background image in a div but it won't preview in the browser. When
the file is linked to an external style sheet, it displays in
Dreamweaver's design view but not Preview in browser. But when the
styles are included in the file itself, it works. It's a dynamic
site configured for PHP MySQL. Everything in the style sheet seems
to be working except this. I've tried site relative and document
relative links. I even tried posting the image to a live server and
linking it with an absolute url.
Here is the path structure:
BambooJewelry/index.php
BambooJewelry/cw3/assets/css/bamboo.css
BambooJewelry/cw3/assets/images/home/logo.gif
Here is the code in the css file:
div#logo {
background-image: url(../images/home/logo.gif);
background-repeat: no-repeat;
width: 700px;
height: 73px;
Here is the syntax for the linked style sheet in the
index.php file:
<link href="cw3/assets/css/bamboo.css" rel="stylesheet"
type="text/css">
As to the site settings, the local root folder is
Macintosh HD:Library:WebServer:Documents:BambooJewelry:
the http: address is set to
http://localhost/BambooJewelry/
Any help with this is sincerely welcomed!

make sure you're not overriding that rule somewhere else in
your site or farther down the style sheet or with a more specific
rule. Rules directly in a page are given more importance than rules
in an external sheet.

Background image in a div?

Similar Messages

Maybe you are looking for