Populate Empty DIV with Background Image

I have a three columns page layout, a centered content column accompanied by two side columns. Those two side columns are empty. How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? You can do this effortlessly in table cell, but why is it almost making one knocking down a wall to accomplish such an easy task? BTW One of the tutorials on your website introduces a way to do it by setting a background color on the container DIV and claiming content DIV color white, thus making the sidebar bearing a background color, also at the same length as the container DIV. I can't seem to understand its logic.

joycwang wrote:
I have a three columns page layout, a centered content column accompanied by two side columns. Those two side columns are empty. How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? You can do this effortlessly in table cell, but why is it almost making one knocking down a wall to accomplish such an easy task? BTW One of the tutorials on your website introduces a way to do it by setting a background color on the container DIV and claiming content DIV color white, thus making the sidebar bearing a background color, also at the same length as the container DIV. I can't seem to understand its logic.
I don't fully understand what you have said below?
'How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? '
(not color) is the bit that confuses me?
You have a background image that you want behind all 3 columns? This background image is not color? Is it an image?

Similar Messages

FF36: Sites with background image flickers/flashes when going back to tab after 2 minutes.

Figure I'll mention this here as well.
When viewing websites with background images, such as twitter.com or my own website at www.markheadrick.com and I change to another tab for 2 minutes (this amount of time is repeatable anyway) I get a flicker of a black background before the page is fully drawn. If I have multiple tabs with the same background image, only the first tab will show the flicker. It's like it's loosing the image in memory or something. It has done this with Firefox in Safe Mode and with a new, clean profile. It has also done this with Hardware Acceleration off.
Windows 7 Pro 64bit w/ NVidia 550ti and 314.22 drivers. Newer drivers are more problematic which is why I have stayed with these.
Again, only pages with background images seem to show this flicker. Did not happen with Firefox 35 on my system.
I created a bug for it here: https://bugzilla.mozilla.org/show_bug.cgi?id=1137082
Thanks,
Mark H

I tried, but could not see and problem.
Hello,
In order to better assist you with your issue please provide us with a screenshot. If you need help to create a screenshot, please see [[How do I create a screenshot of my problem?]]
Once you've done this, attach the saved screenshot file to your forum post by clicking the '''Browse...''' button below the ''Post your reply'' box. This will help us to visualize the problem.
Thank you!

DIV Style background image not showing

Hey Friends - can anyone take a look at line 136 to show why my background-image is not showing in this DIV Style?
http://www.gratefulcreative.com/Andre_Madiz/index.html
Thanks in advance!
ken d
creative director
grateful creative
www.gratefulcreative.com

You have no width or height set for that element so it can not show an image unless you make the div at least the same size as the image.
<div style="background-image:url(http://www.gratefulcreative.com/Andre_Madiz/images/bottom_text.png);ba ckground-repeat:no-repeat; width:871px; height:483px;">
You may also want to consider adding this to your main css file and giving the div an id which will help you out in the future.

Looking to create fully editable PDF files with background images

Hello and thank you, I create menu's and flyers for a group of restaurants. I need to make text editable PDF menus with background images. I believe Livecycle is able to do this, but would really like to hear it from someone who knows for sure. Again thank you.
Cheers,
Charlie

Yes it can. Download a free trial and try it out.

Vertical tabbed panel with background image

Hi all,
I have a working vertical tabbed panel. For the text that's shown, there's a background image assigned to the associated DIV.
However...
The background image that's shown is clipped to the bottom of the text.
In other words, if I have 3 lines of text, the bottom of the background image only goes as far down as the bottom line of text. In order to show the entire image, I have to put in a lot of </ br> tags for "empty" text, not a very good approach.
More of the backgound will show if I increase the text text size via the browser.
To try to describe this more accurately,
Let's say I have a background image that's 600 px in height, but the lines of text only measure to 400px. That means that the bottom 200 px of the image doesn't show, unless I add more lines of text.
Hoping someone has an answer!
Thanks,
Jerry

Gramps,
Again, thanks for your time. While we're now full time commercial photographers (http://www.jerryandlois.com), I was a software engineer for some 20+ years in an earlier life, all on the application side of things. Not really any appreciable time with website stuff.
There are a few more tech/how-to questions I have that are specific to CSS, in terms of polishing up the small site I'm working on. However these are not SPRY related, unless SPRY can solve this for me.
In particular, suppose I have a large block with a background image and a body of text. I want to ensure the text wraps around the image, rather than being a complete overlay where the text can collide with the main body of the photo.
Example:
http://jerryandloisstudios.com/about.html
The issue is that the text is resizable, by design of course. Is there any way to manage these two elements (text and image) so they get along the right way? We want the text to overlay some of the image, but only on the periphery, if that makes sense. So far, the only solution I've seen is to keep the text formatted roughly in a column so that if its size increases all will still be OK. But... artistically that just doesn't look right.
If you're up for it, I'd certainly welcome a private email thread, unless others can also benefit from the rather newbie questions I'm raising: [email protected]
Again, thank you for your help!!!
Jerry

Help with background image center position in firefox

See here on
firefox<<<
i dont know whats going wrong, i tried many different ways
with divs only but doesnt work...
any help appreciated...
css
/* CSS Document */
body {
background-image:url("resources.jpg");
background:url("resources.gif") no-repeat center;
.textstyle01res {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:62%;
color:#FFFFFF !important;
text-align:center;
padding-top:360px;
text-decoration:none;
.textstyle01res a {
color:#FFFFFF !important;
text-align:center;
padding-top:360px;
text-decoration:none;
html
<!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=iso-8859-1" />
<link href='res.css' rel="stylesheet" type="text/css"
media="screen" />
<title>Feast of Marriage - Resources</title>
<style type="text/css">

</style>
</head>
<body>
<div style="width:940px; height:140px;">
</div>
<div style="padding-left:227px;" align="center">
<table width="200" border="0">
<tr>
<td><img src="res-a.jpg" border="0"
alt=""/></td>
</tr>
</table>
</div>
</body>
</html>

css:
table#centerTable {
margin-left: auto;
margin-right: auto;
html:
<body>
<div style="width:940px; height:140px;"></div>
<table id="centerTable" width="200" border="0">
<tr>
<td><img src="res-a.jpg" border="0"
alt=""/></td>
</tr>
</table>
</body>
Lampros_uk wrote:
>
http://www.3ddream.net/feast/resources.html<<<
> i dont know whats going wrong, i tried many different
ways with divs only but
> doesnt work...
> any help appreciated...
>
> css
> /* CSS Document */
>
>
> body {
> background-image:url("resources.jpg");
> background:url("resources.gif") no-repeat center;
> }
>
> .textstyle01res {
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size:62%;
> color:#FFFFFF !important;
> text-align:center;
> padding-top:360px;
> text-decoration:none;
> }
> .textstyle01res a {
> color:#FFFFFF !important;
> text-align:center;
> padding-top:360px;
> text-decoration:none;
> }
> --------------
>
> html
> <!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=iso-8859-1" />
> <link href='res.css' rel="stylesheet" type="text/css"
media="screen" />
> <title>Feast of Marriage - Resources</title>
> <style type="text/css">
> 
> </style>
> </head>
> <body>
> <div style="width:940px; height:140px;">
> </div>
>
>
> <div style="padding-left:227px;" align="center">
> <table width="200" border="0">
> <tr>
> <td><img src="res-a.jpg" border="0"
alt=""/></td>
> </tr>
> </table>
> </div>
> </body>
> </html>
>
>

Problem with Background image and JFrame

Hi there!
I've the following problem:
I created a JFrame with an integrated JPanel. In this JFrame I display a background image. Therefore I've used my own contentPane:
public class MContentPane extends JComponent{
private Image backgroundImage = null;
public MContentPane() {
super();
* Returns the background image
* @return Background image
public Image getBackgroundImage() {
return backgroundImage;
* Sets the background image
* @param backgroundImage Background image
public void setBackgroundImage(Image backgroundImage) {
this.backgroundImage = backgroundImage;
* Overrides the painting to display a background image
protected void paintComponent(Graphics g) {
if (isOpaque()) {
g.setColor(getBackground());
g.fillRect(0, 0, getWidth(), getHeight());
if (backgroundImage != null) {
g.drawImage(backgroundImage,0,0,this);
super.paintComponent(g);
Now the background image displays correct. But as soon as I click on some combobox that is placed within the integrated JPanel I see fractals of the opened combobox on the background. When I minimize
the Frame they disappear. Sometimes though I get also some fractals when resizing the JFrame.
It seems there is some problem with the redrawing of the background e.g. it doesn't get redrawn as often as it should be!?
Could anyone give me some hint, on how to achieve a clear background after clicking some combobox?
Thx in advance

I still prefer using a border to draw a background image:
import java.awt.*;
import java.awt.image.*;
import javax.swing.border.*;
public class CentredBackgroundBorder implements Border {
    private final BufferedImage image;
    public CentredBackgroundBorder(BufferedImage image) {
        this.image = image;
    public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
        int x0 = x + (width-image.getWidth())/2;
        int y0 = y + (height-image.getHeight())/2;
        g. drawImage(image, x0, y0, null);
    public Insets getBorderInsets(Component c) {
        return new Insets(0,0,0,0);
    public boolean isBorderOpaque() {
        return true;
}And here is a demo where I load the background image asynchronously, so that I can launch the GUI before the image is done loading. Warning: you may find the image disturbing...
import java.awt.*;
import java.io.*;
import java.net.URL;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.border.*;
public class BackgroundBorderExample {
    public static void main(String[] args) throws IOException {
        JFrame.setDefaultLookAndFeelDecorated(true);
        JFrame f = new JFrame("BackgroundBorderExample");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JTextArea area = new JTextArea(24,80);
        area.setForeground(Color.WHITE);
        area.setOpaque(false);
        area.read(new FileReader(new File("BackgroundBorderExample.java")), null);
        final JScrollPane sp = new JScrollPane(area);
        sp.setBackground(Color.BLACK);
        sp.getViewport().setOpaque(false);
        f.getContentPane().add(sp);
        f.setSize(600,400);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
        String url = "http://today.java.net/jag/bio/JagHeadshot.jpg";
        final Border bkgrnd = new CentredBackgroundBorder(ImageIO.read(new URL(url)));
        Runnable r = new Runnable() {
            public void run() {
                sp.setViewportBorder(bkgrnd);
                sp.repaint();
        SwingUtilities.invokeLater(r);
}

Mixed results on iPad and iPhone 6 Plus with background image. How to fix this?

Flash Professional CC
I'm having an issue with adding images on iPhone 6 plus and iPad. I'm getting mixed results with two items: 1) a background image and 2) a button that should appear at the bottom left-hand corner on any device. In one case the background image appears enlarged and only shows about 30% of itself. In the other case, the bottom left-hand button appears about 50 pixels to the left when x=0. I also get different results when I set the following:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
This does not produce the expected results. I would like to have consistent results across iPad and iPhone 6 plus, which seams to be an issue. The immediate fix for this is to leave the images on the stage instead of using addChild. I could then just stretch the background image so that it spans the whole screen. But I want to add the items dynamically for greater flexibility.
Here are two cases:
Case #1:
This an iPhone 6 plus and you should notice 2 things. 1) There is black and white on both sides. The blue background SHOULD APPEAR ACROSS THE WHOLE SCREEN. 2) The red button in the corner SHOULD APPEAR IN THE LEFT MOST CORNER OF THE
SCREEN.
Case #2:
This an iPhone 6 plus and I have set the scale X, Y to the stage.stageWidth/Height:
mc_stageBackground_Main.scaleX = stage.stageWidth;
mc_stageBackground_Main.scaleY = stage.stageHeight;
This results in a close up of the background image.
Here is the code that I'm using:
import com.greensock.TweenLite;
import com.greensock.easing.*;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
//When this is active the background image spans across the device (iPhone 6 plus) correctly. The main logo image does not line up correctly.
/*stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;*/
var main_logo:MC_LOGO_MAIN = new MC_LOGO_MAIN();
var mainBackground_2208: MC_MAIN_BACKGROUND_2208 = new MC_MAIN_BACKGROUND_2208();
var mainBackground_1024: MC_BACKGROUND_1024 = new MC_BACKGROUND_1024();
var mainCorner: MC_MAINCORNER = new MC_MAINCORNER();
var chapters: MC_CHAPTERS = new MC_CHAPTERS();
var _stageWidth = 1024;
if (stage.stageWidth > _stageWidth)
    //Add bigger background if the stage is bigger than 1024
    mainBackground_2208.x = stage.stageWidth/2;
    mainBackground_2208.y = stage.stageHeight/2;
    addChild(mainBackground_2208);
    //Using this code results in a very close up view of the stage on iPhone 6 plus
    /*mc_stageBackground_Main.scaleX = stage.stageWidth;
    mc_stageBackground_Main.scaleY = stage.stageHeight;*/
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild(mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //add logo to sit at 50 pixels from the top of the stage
    /*main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});*/
else
    trace ("The stage is 1024 or smaller");
    //Add 1024 background if stage is 1024 or smaller
    mainBackground_1024.x = stage.stageWidth/2;
    mainBackground_1024.y = stage.stageHeight/2;
    addChild(mainBackground_1024);
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild (mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //adds chapters
    chapters.x = (stage.stageWidth - stage.stageWidth)+75;
    chapters.y = stage.stageHeight - 120;
    addChild(chapters);
    TweenLite.from(chapters, 1,{ height: 0, delay:.5, ease:Elastic.easeOut});
    //adds the Main logo to sit at 50 pixels from the top of the stage
    main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});

On all of the devices go to settings - facetime - iphone cellular calls - oFF, this part of Apple continuity.

How do you make a rectangle resize with background image?

I'm trying to add links (transparent rectangles) to a background image that is set with "scale to fit". However when it scales in needs to scale with my links. Can I have the rectangles scale with the background image? If not is there a better way of doing this?

As I understand. correctly. You want the rectangles that you have added over background image, (to which links are added) to be responsive in layout within the project, Am I correct ? If yes ! Muse does not implement "Responsive Layout" as defined by a hand coder. For more details refer to : Can you create responsive sites with Adobe Muse?

Replacing images used as a link with background image

OK - I'm embarrassed to say that what I'm trying to do is
blindingly
obvious, and I've used Dw for several years - and do most of
the work
in code view but I'm having a senior moment and can't do what
I want.
I've read that when you use images on a page for background
styling,
for example the logo, or an image of a professional body such
as IEE,
it is more semantically correct to use CSS background images
rather
that a <img src=
tag
So I have a div in which I put the background, but then
perhaps quite
logically you can't directly put a link to it. So how do you
do it.
I've tried to ensure there was a block element so when you
hover l
mouse over it you get a block link - but no joy.
maybe my dyslexia early is the sign of premature brain fade
~Malcolm N....
~

You cannot place a link on a background image. However, you
can place a
link on a transparent image floated over the background.
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
==================
"Malcolm N_" <[email protected]> wrote in message
news:[email protected]..
>
> OK - I'm embarrassed to say that what I'm trying to do
is blindingly
> obvious, and I've used Dw for several years - and do
most of the work
> in code view but I'm having a senior moment and can't do
what I want.
> !!!
>
> I've read that when you use images on a page for
background styling,
> for example the logo, or an image of a professional body
such as IEE,
> it is more semantically correct to use CSS background
images rather
> that a <img src=
> tag
>
> So I have a div in which I put the background, but then
perhaps quite
> logically you can't directly put a link to it. So how do
you do it.
>
> I've tried to ensure there was a block element so when
you hover l
> mouse over it you get a block link - but no joy.
>
> maybe my dyslexia early is the sign of premature brain
fade ;-)
>
> --
>
> ~Malcolm N....
> ~

Weird issue with background image (Safari)

Just wonder if anyone can shed any light on this one....
Basically have a design in progress here:
http://www.hpwebdesign.co.uk/rachelworrall/index101.php
All was fine until I added the three images that fade into one another using the Ultimate Fade In slideshow script ( http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm )
When the page is initially loaded in Safari (5), the top section of the background image doesn't display - it starts just beneath the main content below the navigation.
The weird part is that it literally only takes a click of the mouse outside that Safari window to make it appear. A refresh, however, won't.
It seems fine in Firefox on a Mac, and the client didn't report any issue in IE.
Can anyone with Safari have a quick look and replicate that glitch? If not, then it might just be some weird local issue here.
Many thanks.

I've put up a couple of screenshots here:
http://www.hpwebdesign.co.uk/rachelworrall/screenshots.htm
Its like that in Safari 5.0.3 (and 5.0.4 which I've just updated.)
Again, it literally just needs a click out of the Safari window to make it appear correctly as per the second screenshot.
Its like this on a 27" iMac, but had a look on the macbook, and its fine on there.
So if it looks OK with anyone else, I'm just going to put it down to a weird glitch on my machine here.

Firefox scrolls slowly on websites with background images.

I find that when I go to websites that have background images, such as my tumblr (deshaunic.us) or the call of duty websites (http://www.callofduty.com/missions), scrolling is very slow and stutters, even though I have smooth scrolling enabled.
I have not had such issues with IE. I also have not had these issues on a different machine running Firefox 4 beta.

A workaround is to use a bookmarklet to make the background scroll.<br />
This code may not work on all sites, only if the background image is attached to the body.
<pre><nowiki>javascript:void(document.body.style.backgroundAttachment='scroll');</nowiki></pre>
See also http://en.wikipedia.org/wiki/Bookmarklet

Div with a image

Hi ,guys, when I use the image on the site and div to control
its position, I put the div and text together in the layout.But i
am not sure how to layout and make them look well as the image
overlap the text and hide some of the content. How to avoid this
problem?
Any help is appreciate.

Not really. I'd like to see the whole page, please, so I can
look at both
the code and the relevant CSS.
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
==================
"ahmultHoAngel" <[email protected]> wrote in
message
news:fm3k2l$t53$[email protected]..
> Hi, this is the part I use for div and the content. Hope
this helps
>
> <body topmargin="0" >
> <div id="apDiv1"><span class="test4"><img
src="../v1/images/capral.jpg"
> alt=""
> width="224" height="98" align="right"
/></span></div>
> <table class="test1" width="816" border="0"
align="center" cellpadding="0"
> cellspacing="0" >
> <tr>
> <td><img src="images/index7bSlice1_02.jpg"
width="815" height="168"
> border="0" usemap="#Map" /></td>
> </tr>
> <tr>
> <td><img src="images/index7bTestimonial_04.jpg"
width="815"
> height="67"
> /></td>
> </tr>
> <tr >
> <td class="test2"
background="images/index7bSlice1_06.jpg"><p
> class="test3">
Manager </p>
> <p class="test4" align="left">
'In a world where risk assessment has
> become a part of our everyday lives,....' <br
/>
>
Richard<br />
>
Ag Business Manager<br />
>
William </p>
>

Help with background image (Not sure how to ask this..........)

I have just started to try and make my first site. I designed it in Photoshop first as I learned in many tutorials. I don't know why my background image looks like this when I scale down below 100%, but at 100% or "fit all"&"fit width" it doesn't change and I can't move it with the hand tool or scroll it. I'm sorry, I'm just learning.
Thank you.

Hello,
in addition, I tried this (page properties = translated from my German DW) too an the only difference had been this "missing end bracket".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ioneglines.com</title>
<style type="text/css">
body {
background-image: url(myImage.png);
background-repeat: no-repeat;
</style>
</head>
<body>
</body>
</html>
... before you insert your image as a background image, you have to give it the dimensions, you want to see in your file. Please use try and error method.
Hans-Günter

Working with Background images

HI. I have a project which contains a few slides with the same background image...an image that was caught with Snagit and then merged onto the slide. I anticipate needing to replace this image with an updated one in the near future. Is there a quick and easy way of replacing that image (which contains a number of captions, highlight boxes, etc) without having to recreate the entire slide from scratch?

Hello again,
Please save the image (p.e. as a PNG) on your PC, do not copy it to the Clipboard. The workaround I described would work, but here is even a shorter way:
Open the Slide Properties (righ mouse click menu)
Use the button 'Change background image' and point to the image saved.
The background image will be replaced, you will see both of them in the Library in this case
But there will be no problem to delete the old image (right mouse click on the image in the Library)
Try it,
Lilybiri

Populate Empty DIV with Background Image

Similar Messages

Maybe you are looking for