How to make background image scalable

I am working on my site and I am constructing it using only
external CSS. I am looking for a different look than I have
previously done and want to use an actual image for the back ground
of one of the DIV containers rather than just a color. My problem
has been since I want my site to be fluid I need to find a way to
have the image scale with the container. I could have sworn I saw
how to change this attribute during some online reading I had done
but I can not find it. Can anyone here help?
Dara

Scaling images is usually a bad thing - they will lose both
aspect ratio and
image quality when you do.
However, if you are willing to suffer these indignities, you
can place an
image into a div that is 100% height/width (of whatever the
<div> tag's
contaner is), and make the image 100% height/width as well.
Depending on
the layout, that could accomplish your goals.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Dara_BSI" <[email protected]> wrote in
message
news:f4vm0n$kei$[email protected]..
>I am working on my site and I am constructing it using
only external CSS. I
>am
> looking for a different look than I have previously done
and want to use
> an
> actual image for the back ground of one of the DIV
containers rather than
> just
> a color. My problem has been since I want my site to be
fluid I need to
> find a
> way to have the image scale with the container. I could
have sworn I saw
> how to
> change this attribute during some online reading I had
done but I can not
> find
> it. Can anyone here help?
>
> Dara
>

Similar Messages

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

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 make keynote images full screen?

Question: how to make keynote images full screen? I just noticed. after many successful full screen shows with Keynote 09 5.1.1 that I am no longer seeing the show full screen, at 1280, but only using the center part of my macbook pro 13 inch screen (which will mirror just like that on the projection screen, as far as I know). Did I hit a setting I do not know about to keep the images so small?
Thanks

Keynote > Preferences > Slideshow: Scale slides to fit display

How to make mirror image on officejet pro 8600

how to make mirror image on officejet pro 8600

Hi,
You can not make mirror images with printers but you can print mirror images on printers. This is how to print mirror images on a normal printer:
http://h10025.www1.hp.com/ewfrf/wc/document?cc=us&dlc=en&docname=bpu02032&lc=en&product=61561
Regards.
BH
**Click the KUDOS thumb up on the left to say 'Thanks'**
Make it easier for other people to find solutions by marking a Reply 'Accept as Solution' if it solves your problem.

How to make slide images with Dreamweaver CS6?

How to make slide images with Dreamweaver CS6? Please teach me.

Hello
in addition to Jon's hint, I'll send you some links to nice sliders (have fun with the different representations ):
http://sandbox.scriptiny.com/javascript-slideshow/
http://jquery.malsup.com/cycle/
http://wowslider.com/best-jquery-slider-crystal-linear-demo.html
http://www.jcoverflip.com/demo
http://www.jacksasylum.eu/ContentFlow/
http://addyosmani.com/blog/jqueryuicoverflow/
You only need to use the source code to implant these shows there where you want. In my eyes it would be the best that you use first a very new and blank DW file to perform (maybe in LiveView) the one or the other.
Hans-Günter

How to make the table scalable inside a tap control?

Hi,
Does anyone know how to make the table scalable inside a tap control in LabWindow CVI? I see that there is option for a panel to scale contents on resize, but not available for a tab control. Any ideas?
Thanks a lot!
Weiming
Solved!
Go to Solution.

Hi SGIE,
you have posted a LV-related question to the LabWindows/CVI forum: you should post it in the LabVIEW forum instead.
Proud to use LW/CVI from 3.1 on.
My contributions to the Developer Zone Community
If I have helped you, why not giving me a kudos?

How to make background fit screen

how to make background fit screen

go to settings
go to desktop & screen saver
there you have a dropdownbox with all the options

How to make floating image with dim background

hi guys, i would like to know how to make a floating image and the background will dim? like for example when you click a thumbnail, the bigger version of that image will pop up on the same page and will have a dim background? can someone point me to a tutorial? any help would be appreciated, thanks in advance!

Hi,
If you look at the tutorials in fireworks such as changing images/rolover images you will start to get an understanding.
Cheers

How can I make background images (in p classes) appear in Review PDF?

RoboHelp HTML 11.0.4.291.
In my stylesheet, I have <p> classes for notes, tips, examples, and cautions. Each has a background image.
p.note {
background-image: url(note.jpg);
background-repeat: No-Repeat;
background-position: 0pt 12pt;
margin-left: 12pt;
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom-style: none;
padding-left: 40px;
padding-top: 20px;
padding-bottom: 20px;
The images show in outputs but not in previews, nor in Review PDFs (Review | Create PDF for Review . . .).
Is there a way to make those images appear?

No way that I know of. You have the same problem with printed documentation. The background image's don't show up there either. Please log a bug report with Adobe: https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform&product=38

How can I make background images change automatically

I want my page background to change automatically after a set period of time (almost like a very slow slideshow). Is there any reason (other than file size) I can't simply do this with an animated gif as my body background image? I haven't got the expertise to do anything too technical. Thanks

Is there any reason (other than file size) I can't simply do this with an animated gif as my body background image?
BG images are not meant to be animated. It's a performance problem - the browser would have to continually re-render the whole page, since GIFs work on specific increments. That's why it's not supported. What you wanna do would be best done with jQuery/ JavaScript or Flash, where the substitution can be controlled, so the browser only needs to work hard when there is actualyl something changing. whether that's a good idea, is another matter, though. Personally I really despise such toy-ish features, as they severely impair usability and readability.
Mylenium

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 make background image scalable

Similar Messages

Maybe you are looking for