Creating a centering background image

I would like to have a background like this page. http://www.atlantafalcons.com/MediaLounge/VideoLanding.aspx?q=Falcons+First+Take
As you can see it centers itself. I checked out the code and did not see anything about centering. Here it is.
</head>
<body class="multiMedia" style="background-image:url(/~/media/5C0943272C2443F4801646B2B490AF41.ashx); background-color: #b88035;">
<div id="wrapper">
Any ideas?
SH

JCellini wrote:
They used a text-align: center declaration in the body rule
body {
    margin: 0;
    padding: 0;
    text-align:center;
    font:11px Arial, Verdana, sans-serif;
    color:#000;
    background:#bd0d18 url(/media/backgrounds/bg_page.jpg) no-repeat center top;
Actually that is calling a different image and it's this line that centers that particular background:
background:#bd0d18 url(/media/backgrounds/bg_page.jpg) no-repeat center top;
However, not even sure where it's used... this is the direct link to that image:
http://www.atlantafalcons.com//media/backgrounds/bg_page.jpg
This is the actual bg image used on the page:
http://www.atlantafalcons.com/~/media/5C0943272C2443F4801646B2B490AF41.ashx
and in the code:
<body class="multiMedia" style="background-image:url(/~/media/5C0943272C2443F4801646B2B490AF41.ashx); background-color: #b88035;">
They haven't used any positioning on that image however. Starts at top 0 left 0.

Similar Messages

Centering background image [was: I have inserted an image background...]

Here is the code. body{ background-image:url(backgrounds/MOMANDDAD.JPEG);}. what do i need to do to correct this mistake?
I have made an inline stylesheet on a html and put a background image in it and it will not center in ie8, but is okay in firefox 3.09. what is going on?
thanks mike

In the future, try to keep your subject brief: "Centering background image" would suffice.
Without seeing your site, image and other code, it's hard to guess what you have done so far. Posting a URL to the live page is the best way to get a reply.
Try this in your CSS:
body {
background: url (your_image.jpg) top center no-repeat;}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
Tutorials - http://w3schools.com/

Create repeating / tiled background images

I may have missed this in the previous versions of Adobe Photoshop.
Is there "a way / or method" to create repeating / tiled background images in photoshop?
Many times a "tile" for a tiled background is quite small at around 150px x 150px.
1:
It would be very nice to be able to work on the tile, be able to zoom in and out of it, and actively see a functioning live tiled background.
Yes it might be a bit like a kaleidescope, but it would be live and you would see any harshness in the pattern and can remedy glitches it in real time.
2:
It would also be very nice to be able to "draw / paint / edit" off the edge of the tile and have the effect carried over to the other side...
Yes just like in Asteroids.
I think creating Tiled BG's is a very strong contender for being one of the more frustrating things I do with Photoshop. I hope the above ideas can be added to PS6.
Just to you you know... DPaint IV for the Amiga did this very well back in 1990'ish.

There will not be any substantial changes to CS6 to add new features beyond the beta. We are too far along in the process for that. To accomplish what you desire, can you use the pattern feature to tile? For any new features you wish to request, you can to to this website http://feedback.photoshop.com/photoshop_family people can vote on the favorite features.
Pattie
Use the Rectangle Marquee tool on any open image to select an area to use as a pattern. Feather must be set to 0 pixels. Note that large images may become unwieldy.
Choose Edit > Define Pattern.
Enter a name for the pattern in the Pattern Name dialog box.

Centering Background Image

After countless hours of using the forums I finally am
posting my first question.
Is there a way to center the background image that is set
through page properties? I have a centered table and it would be
nice to have a continuous background.
Any help would be appreciated.

Or you could do what Murray just said :-) But through
standard html, no.
Lawrence Cramer
*Adobe Community Expert* - Dreamweaver -
http://tinyurl.com/jhnyq
email: lawrence at cartweaver dot com
Cartweaver CF, ASP & PHP Shopping Cart for Dreamweaver
www.cartweaver.com
news://support.cartweaver.com
=====================================================
"Lawrence *Adobe Community Expert*"
<[email protected]> wrote in
message news:emuj2u$636$[email protected]..
> Nope, you can't center a page background image. You have
to work from the
> top left hand corner.
>
> Now you could create a fixed width, floating, centered
"master container"
> div and have a background image for this div. Then place
all your
> content in this container. This would give you the
illusion of a centered
> page background.
>
> Hope this helps.
> --
> Lawrence Cramer
> *Adobe Community Expert* - Dreamweaver -
http://tinyurl.com/jhnyq
> email: lawrence at cartweaver dot com
>
> Cartweaver CF, ASP & PHP Shopping Cart for
Dreamweaver
> www.cartweaver.com
> news://support.cartweaver.com
> =====================================================
>
>
> "cheesewagon" <[email protected]> wrote
in message
> news:emuhmn$4hv$[email protected]..
>> After countless hours of using the forums I finally
am posting my first
>> question.
>>
>> Is there a way to center the background image that
is set through page
>> properties? I have a centered table and it would be
nice to have a
>> continuous
>> background.
>>
>> Any help would be appreciated.
>>
>>
>
>

Stop centered background image from getting cut off by a shrinking window

My problem can be seen at cortw.public.iastate.edu
my background image is centered to the top of the screen. When the browser window shrinks, I want the background image to stop moving when it reaches the edge of the screen. Currently, the image continues to move past the edge of the window. I want to create an affect similar to apple.com and Facebook.com
I have little experience coding. Any help would be greatly appreciated!

Your CSS is seriously flawed. Replace what you have now with this CSS code and it will work better:
body {
padding:0;
width: 980px;
margin:0 auto; /**centered on screen**/
color: #333;
background: #FFF url(background.jpg) no-repeat;
/**menu**/
#apDiv2 {
margin:55px 0 0 350px;
For best results, don't use positioning. You don't need it. Use CSS margins, padding and floats to align elements on screen.
Example: (View source in browser to see the code)
http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml
Nancy O.

How can I create a single background image for a BorderLayout?

I can create a background with an image file for the individual panel (North, West, Center, East and South) in a BorderLayout, but I've been spinning my wheel for a long while now trying to figure out how to create just one background with a single image file for all of these panels?
In my application, a panel may contain various buttons, a listbox, a group of checkboxes, a combo box, or a canvas. Even if I used the same image file, when the panels are finally put together, one can clearly see that the end product is the result of a lot of patch works.
Hope someone has an answer for this. BTW, I'm using AWT because it works with existing browsers without the need for a separate Java plug-in.
Regards,
V.V.

Look at this :
import java.awt.*;
import java.awt.event.*;
import java.util.*;
import java.awt.image.BufferedImage;
public class PanI extends Frame
     Image map;
     Panel pan;
     myPan p8,p4,p6,p2,p5;
     BufferedImage I;
public PanI()
     addWindowListener(new WindowAdapter()
    {     public void windowClosing(WindowEvent ev)
          {     dispose();
               System.exit(0);}});
     map = getToolkit().getImage("map2.gif");
     MediaTracker tracker = new MediaTracker(this);
     tracker.addImage(map,0);
     try   {tracker.waitForID(0);}
     catch (InterruptedException e){}
     I = new BufferedImage(1,1,BufferedImage.TYPE_INT_ARGB);
     setBounds(10,10,map.getWidth(null)+8,map.getHeight(null)+27);
     setLayout(new BorderLayout());
     pan = new Panel();
     add(pan,BorderLayout.CENTER);
     pan.setLayout(new BorderLayout());
     pan.setSize(map.getWidth(null),map.getHeight(null));
     p5 = new myPan(5);
     p5.setBackground(Color.red);
     pan.add(p5,BorderLayout.CENTER);
     p8 = new myPan(8);
     p8.setBackground(Color.orange);
     pan.add(p8,BorderLayout.NORTH);
     p4 = new myPan(4);
     p4.setBackground(Color.blue);
     pan.add(p4,BorderLayout.WEST);
     p6 = new myPan(6);
     p6.setBackground(Color.green);
     pan.add(p6,BorderLayout.EAST);
     p2 = new myPan(2);
     p2.setBackground(Color.pink);
     pan.add(p2,BorderLayout.SOUTH);
     setVisible(true);
public class myPan extends Panel
     int where;
public myPan(int i)
     super();
     where = i;
public void paint(Graphics g)
     if (I.getWidth(null) != pan.getWidth() || I.getHeight(null) != pan.getHeight())
          I = new BufferedImage(pan.getWidth(),pan.getHeight(),BufferedImage.TYPE_INT_ARGB);
          Graphics      G = I.getGraphics();
          G.drawImage(map,0,0,pan.getWidth(),pan.getHeight(),null);
          G.dispose();
     int x1=0;
     int x2=getWidth();
     int y1=0;
     int y2=getHeight();
     if (where == 8)
     if (where == 2)
          y1 = p8.getHeight()+p5.getHeight();
          y2 = getHeight()+y1;
     if (where == 4)
          y1 = p8.getHeight();
          y2 = y1+getHeight();
     if (where == 5)
          x1 = p4.getWidth();
          x2 = x1+getWidth();
          y1 = p8.getHeight();
          y2 = y1+getHeight();
     if (where == 6)
          x1 = p4.getWidth()+p5.getWidth();;
          x2 = x1+getWidth();
          y1 = p8.getHeight();
          y2 = y1+getHeight();
     g.drawImage(I,0,0,getWidth(),getHeight(),x1,y1,x2,y2,null);
public void update(Graphics g)
     paint(g);
public static void main (String[] args)
     new PanI();
Noah

Centering background images problems

Let's say I apply a background image to the body and center top the image like this
=========================================================
<body style="background:url(BG_05.jpg); background-position:top center; ">
</body>
=========================================================
the background aligns itself in the center when the page load, and even if i resize the browser window the background image will center automatically...but is it possible to let the background stay in the same position even if i resize the browser's window?
Many thanks...

Sure. Instead of applying the BG to your body, apply it to a #wrapper div along with an expressed width in px, and margin-left & margin-right of auto.
CSS:
#wrapper {
width: 990px; /**adjust width to suit**/
margin:0 auto; /**with width, this is centered on screen**/
background: url(your_bg_image.jpg) top center;
HTML:
<body>
<div id="wrapper">
your centered page content goes here...
</div>
</body>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

How do I create a common background image in Pages?

The Pages Help has NO RESULTS for "common background". The support site:
http://www.apple.com/support/pages/setup/
has a link to this (http://docs.info.apple.com/article.html?path=Pages/2.0/en/slng411.html ) but the link is dead.
Grumbles:
This "discussions" change is awful. The frame scroll is a pain. Doesn't Apple know iframes are unsupported now in HTML 4 Strict? The "more options" search found no results for this topic. It DID find lots of results for "crashed" and "quit unexpectedly". Here's hoping Apple knows the database doesn't work and can fix it. The "Product" drop list below is not alphabetical.

I agree that the forum changes are not all to the better and nowhere where we can tell our views about it.
About the Background. If you use the Pages User Guide and search for background you'll find the answer.
Pages User Guide is free to download and use from the Help menu in your Pages application.
Profile on products will be added in the post if one uses the Advanced reply option

How to add a link in a header created only of a background image

Hi, I created my website with CSS in Dreamweaver. Here is a sample page:
http://www.bfranklincrafts.com/NewSite/BonneyLCalendar.html
The header is created with a background image. How do I put in a link in the header that when they click on Ben Franklin Crafts & Frames would take them to the home page? I have nothing to attach my link to?!?!
Thanks.
Liolee

Putting a clearpixel or transparent.gif over your background image won't work very well if CSS is turned off.
My preference would be to take your Business Name out of the background image and replace it with real text inside an <h1> tag in the foreground - where it will be visible to search engines, screen readers and translators.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

How to create a scaled page background image?

Hi - does anyone know of a way of creating a page background image which will scale to fit any screen width? I've tried googling it, but get back so many complicated explanations that I don't know which to believe. Up until now I've resorted to creating a large image, usually around 1700 x 1400px, which just about works, but obviously smaller screens lose a lot of it. I'd really like to understand how to do this properly,
Thanks
SW

How far back in browser version history do you want to support?
IE9+ and any modern browser (like Firefox, Safari, Chrome and Opera) will work with the background-size:cover attribute:value in CSS3: http://www.w3schools.com/cssref/css3_pr_background-size.asp
For older browsers, you'll need a bit more complicated solution using javascript like this page: http://louisremi.github.io/jquery.backgroundSize.js/demo/

Need to create a background image for Joomla

I need to create a custom background image for a Joomla site.
Can anyone offer a simple tutorial on the steps I need to take to create the image?
Thanks

Okay. The image has a gold gradient from top to bottom, but the text repeats in smaller blocks.
First, you need a tiling image of some text, on a transparent background. Then, this image needs to be added as a pattern in Fireworks.
Next, you get to use your new pattern. In your document, create a tall rectangle with a vertical gradient. Make this image the same width as your tiling pattern, so that your resulting background image will also tile. Over that you put a rectangle with no color fill, but fill it with the text pattern. Save this working Fireworks document, then export to use on the Web.
I don't understand the phrase "I need to know how to size the image, possibly with CSS." Background images are the size they are. When this image is set to be the background, then it should be specified to repeat in the horizontal direction (repeat-x).
Here's some info on making a seamless tile:
http://forums.adobe.com/message/2384441
Using patterns:
http://www.entheosweb.com/fireworks/patterns.asp
There have been some recent threads on using gradients, just flip back a page or two (unless my mind's playing tricks on me and they're older).
Hmm... Possibly helpful:
http://spectrum.troy.edu/~techtip/classes/tutorials/fireworks/fw2004/gradient/gradient.htm

Background Images not showing up in template-based pages

For some reason, whenever I make a custom .dwt template, with
background images for things such as buttons, on my newly created
page, the background images do not show up. Anyone know why? Thanks
for the help in advance.

Best you start here:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmattsworld.mooretecproductions.co m%2F
55 code errors. Yikes!
Fix those and then see if the problem goes away. If not, post
back. At lease
with clean code we may be able to spot the problem.
Walt
"Irish_Cereal" <[email protected]> wrote in
message
news:fegl0v$jvc$[email protected]..
> Alright guys, I get it. Here's a link to the index:
>
http:///mattsworld.mooretecproductions.com
> Click on Videos on the navigation bar and you'll see
what I'm talking
> about.
> Notice how on the navbar on the index theres the custom
button? On videos
> it
> doesn't show up.
>

MS Word Background image not converting

I have Microsoft Word 2007 & Acrobat Pro 9. I created a document in Word, and that doc has a background image. However, when I try to convert it to a PDF, one of two things happens: 1) the PDF is created with no background image, or 2) the background image is reduced in size & tiled in repeating rows in the background. Neither of these is acceptable! I've tried the following:
From in Word -->Print-->Acrobat PDF
From Acrobat -->Create PDF-->From File
From Word -->Save As-->PDF
From Acrobat-->set background image
This is quite frustrating, since I don't want to re-do everything in Photoshop just to render the PDF properly. I set the image as a background in Word because I want it to cover the whole 8.5"x11" space without any margins. The image is a 95 dpi JPG sized at 8.5"x11"

You may need to check Acrobat and be sure you have Display Large Images selected. If that is not the issue, it may be a setting in your print options of WORD. Programs like WORD and PPT often have the default set to not print background images because they use so much toner in a regular printer. Since you are using a digital printer that option is not needed.

Using Background Image In Dreamweaver

Good evening.
I'm using a non-repeating, centered background image in Dreamweaver. But i'd like it to self-adjust its size depending upon what monitor size its viewing it. Can someone provide some coding for help with this???
Here's where i'm at thus far..
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="welcome10.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body style="background-color: #000; background-position: center top; background-repeat: no-repeat; background-image: url(images/girls-bg9.jpg); background-attachment: fixed;">
<div id="wrapper">
          <div id="container">
    </div>
</div>
</body>
</html>
css -
@charset "utf-8";
/* CSS Document */
#wrapper{
          width: auto;
          height: 1600px;
#container {
          background-color: #FFF;
          height: 200px;
          margin-right: 100px;
          margin-left: 100px;
          margin-top: 100px;
thanks guys, and gals...

Background-size would do the trick, but keep in mind, most CSS3 does not function in IE9 (though this will), and won't at all in IE8 and down. If you need it to work in those browsers, the best way to do it would be with javascript. I've used the script available on this site with some success...
http://louisremi.github.io/jquery.backgroundSize.js/demo/

Custom background image for 7942 IP phones on CCM 6.1.2

All,
i am unable to create the custom background images for the Cisco 7942 IP phone, i am running a CCM version 6.1.2. I have uploaded the Image files and also the List.xml file, but when i click on custom images i dont see the image that i uploaded and it say "no selection available". And also after i uploaded the files i have restrated the TFTP services.Have attached the images and List.xml files.Please have a look @ them and let me know if i am missing something here.
Thanks,
Rohith

First off, as this is a CUCM question, you'd be better of over in the IP Telephoney forum (
https://supportforums.cisco.com/community/netpro/collaboration-voice-video/ip-telephony )
The thing that jumps out at me is the case of the filename. CUCM Runs on Linux which is case sensitive. Try matching the case.
If that doesn't help, try looking at the phone logs or Wiresharking the phone.
GTG

Creating a centering background image

Similar Messages

Maybe you are looking for