CSS and Background Images

I am trying to create a page using CSS. I have a background
image that tiles like I want it to. Here is the CSS:
padding: 0;
Margin: 0;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position:center;
I want some of my various other divs to lay on top of this
background but have a different background color that overlays the
page background image. Instead of taking the background color I
specify, the main page background above shows through. For example
below, the dark brown background doesn't show:
#nav {
margin-left: 4px;
width: 802px;
height: 26px;
background-color:#211400;
Thanks in advance for helping.

This is what I did for mine:
background-image: url("../images/background.gif");
Erin
"Mike Dockray" <[email protected]> wrote:
>
Can u put floating background images in the CSS.
eg. background: #fff url(images/backgrd.jpg) bottom right no-repeat fixed;
if so what is the context, find the color but not the image, url is relative
to
what ????
(yes , i'm a newbie, first day on the case :)

Similar Messages

Ringtones and background images not available after call manager upgrade

Hi,
We have upgraded our call manager from version 8.5 to 10.5. Once after the upgrade we lost all the Ringtones and background images except the two default ringtone and background images. we got 8945 sccp phones(running 9-3-1 firmware) and 9951 sip phones(running 9-4-1 firmware). Both these phones lost these list. However the ringlist.xml is available in the tftp server with all the ringtones and the phones are pointed to the right tftp servers. I tried to restart the tftp servers and tried again, however that didn't help. we are using call manager 10.5 and h323 voice gateway. Could anyone please help on this.
Thanks
Barry

Hi Tony,
I can see the ringtone files in the call manager (osadmin>tftp file mgmt), i have also restarted the tftp services, but it didn't help. I believe you advised to re-upload the ringlist file (Ringlist.xml) and try again. I will try this and update you. Please let me know if you have any other suggestions.
Thanks
Barry

Is there a better way to do this? CSS rules/Background image/tables

Hi,
I am designing a site and I have used a table for the banner. Everytime a different page is displayed, the banner image changes. I have created .html pages, and I have created a lot of css rules to change the background image. I think there must be a more efficiant way to do this?
http://www.taffyproductions.com/test/
ALSO... I need to figure out how to make the links (hover/active states) work on all the pages... I figured it out on the index page, but I'm sure there is a better css rule?

Put a div in the head section? Surely you jest!
But you do hint at the easy solution - just have an embedded stylesheet in the head of each page that changed the background image only on that page. No need for any other complexities.
In other words on page1, change this -
<link href="outpost.css" rel="stylesheet" type="text/css" />
</head>
to this -
<link href="outpost.css" rel="stylesheet" type="text/css" />
<style type="text/css">
table#banner { background-image:url(images/banner1.jpg); }
</style>
</head>
and on page2 change it to this -
<link href="outpost.css" rel="stylesheet" type="text/css" />
<style type="text/css">
table#banner { background-image:url(images/banner2.jpg); }
</style>
</head>
etc.

Main Wrapper, Container and background-image repeat problem-and Footer :-)

Hi everyone,
First off, i tried almost every idea i could get to solve this on my own but now im...aaa...
Well, the problem is i have a main wrapper with a background image repeat. A header,menu, body container - which has a left column and right column. I want that main wrapper,body container and both of the columns to grow auto according to content. I tried the height:100%. When i float the columns the text from left column spills over on to the footer. The left column also does not autogrow towards the footer?! I was able to set the footer at the bottom which i want it to remain at the bottom of the main wrapper, but the main wrapper and the columns do not grow automatically...I guess it has something to do with float and the clear properties but what???
body{
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 11px;
font-family: verdana;
text-align: center;
background:url(back_index3.png) repeat-x scroll 0 0 #E4E4E4;
#main_wrapper {
width: 959px;
margin:0 auto;
margin-top:80px;
background:url(backslice.png) repeat-y;
height:auto;
min-height:800px;
#header {
width: 959px;
margin-left: auto;
margin-right: auto;
height:119px;
background:red;
padding-top: 0px;
padding-bottom: 0px;
#topmenu {
background-color:#blue;
height:30px;
margin:0px;
width: 959px;
margin-left: auto;
margin-right: auto;
#body_container {
height:100%;
width: 949px;
margin: 0 auto;
#content {
float:left;
width: 645px;
background:yellow;
border-right:1px solid #ffffff;
padding:10px;
height:100%;
text-align:left;
#sidebar {
float:left;
width: 283px;
background:#234234;
height:100%;
#footer {
clear:both;
height:200px;
background-color: #686768;
margin:0 auto;
border-top: 1px solid #F6F6F6;
text-align:center;
width: 100%;
<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<div id="footer">
asd
</div>
</body>
</html>
Thanks in advance if somebody can help me out here.
you can see an image of the problem in the attachement down thr... thnx

<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<br clear="all" />
<div id="footer">
asd
</div>
</body>
</html>
Hope this will work well

CSS for background image not transfering from template to new page

I have a gradient .gif in my templates which suddenly no longer transfers from the template to a new page created from the template. Everything else about the template transfers. I'm using Dreamweaver CS5 on a Mac running OS 10.6. I've pasted the CSS from the template and the new page below. I've tried the usual voodoo--restart program, restart computer, repair permissions, delete preference file, delete personal configuration file.
CSS from Template:
.container {
    background-color: #ececec;
    background-image: url(../images/faux_column.png);
    background-repeat: repeat-y;
    height: 650px;
    width: 650px;
CSS from page created from Template looks to be the same, but is greyed out in the code, and the background-image entry is not present in the CSS styles inspector:
.container {
    background-color: #ececec;
    background-image: url(../images/faux_column.png);
    background-repeat: repeat-y;
    height: 650px;
    width: 650px;
Any suggestions greatly appreciated.

Unfortunately, I don't yet have a site where I can post the page. I'm new to this, and doing everything locally for now.
After careful rechecking, I found that the links for the template and the child were not the same, as you suspected. So I carefully changed the links to site root relative, which worked for the background CSS in my test image. I then did the same for all of the links to pages on my site, and checked that all were OK with Link Checker in DW. I guess that was a mistake, because now most of them don't work when tested in Firefox--I get the message File not found. Must be doing something wrong.

I'm getting ugly vertical stripes at pictures and background images on my HTC One S.

I like using Firefox on my HTC One S, syncing the browsing history and bookmarks really comes in handy.
But however, sometimes i get ugly stripes above some images. When resizing the site, they sometimes disappear. It happens only with images and css-background images.
A few screenshots: https://www.dropbox.com/sh/tq47ved3p1qe766/0KiMvzEHSD/screenshots/firefoxbug

I think you can thank Apple for this. See this discussion.
Photoshop CC: MacOS 10.10 Yosemite: Graphics driver problem
Nancy O.

Locking div's, banners, and background images

Hello!
I'm trying to figure out how to lock a background image and banner around my body content using div's but am not sure how.
When scrolling I would like only the Header Bar and Body section to move, while the background image and banner always stay put.
In addition, I need to make sure that this happens always, despite screen size and/or zooming.
Any assistance would be greatly appreciated.
Below is a layout of what I am desiring:
1. Header Bar (orange) will move with page scroll.
2. Main Body Area (white) will move with page scroll.
3. BG Image (red) ALWAYS stays put, wrapping around the body area.
4. Banner (blue) sits ATOP the BG Image but AWAYS stays put.
5. BG color (black) in place for when zooming or screen size changes.
I hope this makes sense. And as always, I appreciate the help!

As always, answers to layout questions are contained in your CSS and HTML code. What have you got so far?
Nancy O.

HTML Emails and background images in Dreamweaver

Hello. I created a HTML email in Dreamweaver. The original design came out of Indesign and had very specific background art. I removed all the text out of the Indesign and created a jpg. I took this jpg in Photoship and sliced and optimized it. I imported this HTML into Dreamweaver. Here I need to add in all the text (which is variable). I was originally thinking that you can only place background images with CSS. But I was told that you should not use CSS for HTML emails. So instead I left all the background art as normal images inside of a table. At this point I need to add text over these images. They only way I could figure out to do it was to add a div tag right over the image and type into there. This seemed to work fine but when I tested it in some emails all the div tags with text showed up under the table with images. This needed to display over. What is the best way to handle this issue? Thank you in advance.
Melanie

Sorry, but you cannot layer text over images in emails. Simplify your design or make an image with text on it in Photoshop. Use absolute URLs to images on your web server. And give people who can't see graphics and HTML pages in their email client a link to the HTML page on your web server.
How to Code HTML Emails
http://www.sitepoint.com/article/code-html-email-newsletters/
Chart showing how various email clients handle CSS.
http://www.campaignmonitor.com/css/
Download some HTML Email Templates from the links below to get started.
Mail Chimp
http://www.mailchimp.com/resources/html_email_templates/
Constant Contact
http://www.constantcontact.com/email-marketing/html-email-templates/index.jsp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

OS 10.4.4, iLife 6 and Background images issue

I upgraded my Mac from 10.4.3 to 10.4.4 (with Automatic Updates) and the same day purchased and installed the iLife 6.0 package (that updated the 5.x version that came with my Mac).
A day or 2 later I decided to change the background photos on my displays. I had been using photos from my iPhoto library and as I scrolled around looking for appropriate pictures and trying them out System Preferences quit on me. I had to restart in order to bring back the ability to alter the background images. Other programs and operations remained unaffected but I was unable to bring up the "Change Background Image" option on the contextaul menu until I restarted the computer. iPhoto was not running at the time. I restarted the computer and the same issue cropped up several more times, always after scrolling thru and trying several images.
These problems never occurred with 10.4.3 or before or iPhoto 5 or before. I don't know if the problem is with iPhoto or not, but I assume that there is interaction between System Preferences and iPhoto, or at least that System Preferences uses the iPhoto database files.
Any ideas?
TIA!

(I thought the hardware listing was posted with the thread...)
Hardware:
PM G5 Dual 2.7, 2.5GB RAM, ATI Radeon 9650 with 256 MB VRAM, and 2 LCD Cinema Displays (1 23 In and the other 20 Inch). Both Cinema Displays are set to the maximum resolution (1920x1200 and 1680x1050).

Importing A Combo Banner/Menu Bar And Background Image

Hi,
In one Photoshop file, I've created a banner/menu bar, as well as what I would like to use as the background image for what appears on the remainder of the page. The menu items are not in a box of any sort. And everything is on a separate layer. The image that appears below is one I made up as an example of what I'm talking about. Can I import it into Dreamweaver as one file? Or should I make one file for the banner/menu bar, and one for the rest of the page?
Thank you.

Hi,
I believe it is best to import everything individually in most/all circumstances. When you are talking about banner images or background images think about the size of the file you are exporting from Photoshop. A 'Save for Web' image will be a lot bigger if it includes everything on the page, compared to the individual size of your banner, and therefore will increase the page load times etc.
So, you can create a photoshop file with your whole layout on there, but then crop each of the elements on its own before saving for web. Even each individual menu item.

Jpgs and background images

Hi gang
I have a slight problem with my site, "Chemin de Nostradamus".
http://www.soli-deo.eu
When I made the background images in Photoshop I saved them as jpgs around 100k in size.
When I upped the site to this domain I noticed slow loading times on each background page, too slow for 100k.
Then when checking on the published files I see they have all been converted to .png around 400k, by iweb.
My image quality is the same but now a much bigger file, 400%, thus 4 times slower on loading.
Is there a workaround for this?
Cheers
Jim
Message was edited by: jimpsky

http://www.soli-deo.eu/chemin-de-nostradamus/LeChemin_De_Nostradamus_files/backgroundimage1.png
Is probably not the file you created. My guess is you started with only the smaller image in the upper right and iWeb added the extra black to fit your page dimensions.
You really don't need to set that image as a background. You should be able to make a 20KB .jpg file from your source and just drop it in the location an size it.
You could also edit the file above to reduce its file size and replace the original on your server with it.

Card Layout and Background Images

Hello,
I have an application that uses CardLayout to switch through different layouts. Each layout has a background image. The problem is that since I implemented a CardLayout system, the image has been shifted down about 8 pixels, revealing a grey bar. I have tried setting opacities of my JPanels, but that does not seem to work. What do I need to do to fix this?
Thanks you.

Here is a screenshot of the problem:
http://www.areath.com/images/screen1.bmp
You can see that just below the title bar, there is a grey bar. Before implementing the CardLayout, the placeholder image fit in the frame perfectly. Now, the image and the components on top of it have been shifted down.

XSL-FO and Background Images

I'm using JDK-1.4.2 supplied with XALAN along with Apache FOP to generate PDFs and I'm having trouble adding background images. I want to add the company logo as a background image in the header. My code looks like this:
<fo:static-content flow-name="header"
background-image="url('file:/path/to/company-logo.gif')">
</fo:static-content>But it doesn't seem to work. I scoured the web for info and many sites had various techniques, some of which I tried. None of them worked as they seemed to be be geared towards the commercial FO processors. Are there any good references for FO as it works under FOP? I understand that FOP only covers part of the FO standard. Is it even possible to add background images in FOP?
Cliff

Please help if you can as the problem is not just FOP related. Even if it is these fora are supposed to be general purpose are they not? Would it make a difference if I asked a more general question of how to use XSL-FO to put a background image in a header? If so would it not make sense to follow up if the answer didn't work with the FOP engine? The main reason I don't use the mailing list is that I prefer using a forum. My inbox already gets enough junk from the 10 or so other mailing lists that I'm subscribed to. Also I haven't found a forum dedicated to XSL-FO with enough popularity to ensure resolution o my issue. So I bring the question here hoping to get some good feedback. People stray from the topic all the time and it is up to the moderator to make sure topics do not stray too far. I think my question is on topic enough to warrant an answer.

When I try to print, I get one page with a header and the background image, another page with the content, and a third page with a footer and background image. How can I make it print properly?

Also, if I print to a .pdf, the background does not show up even if I have the checkbox checked to print background image.
The site I'm trying to print is:
[http://www.puertovallartatours.net/coupons-discounts.htm http://www.puertovallartatours.net/coupons-discounts.htm]

I did not have the HP printer software for Mac OSX installed properly. Once installed the problem went away.

JTree and background image

How do I put background image into jTree?

I've never tried it in a JTree, but this is how it can be done with other JComponents:
http://forum.java.sun.com/thread.jsp?forum=57&thread=316074

CSS and Background Images

Similar Messages

Maybe you are looking for