How to do the background image for a site

Hi.
First, thanks for reading this.
I'm planning on using a gradient image as a background on a new site with black on the sides gradiating to blue in the middle which I created in Photoshop. The site is designed for 1024 (955) and up. How would I handle the background image so that no matter what the resolution above 1024, the visitor will see the gradient properly, meaning the blue will always be exactly in the center of the page and the image does not tile horizontally? (I don't want it to repeate from left to right when someone's resolution is really high)
I have seen a couple of sites that use solid images that appear to stretch the background image depending on the resolution, but have not been able to figure out the CSS code. In my case, I can have a single image that's say 5 pixels high, whatever width I need for the maximum (reasonable) resolution, and let it repeat from top to bottom.
Thank you.
MFitz721

Thanks for your reply, SnakEyez02 .
Another concern is wide-spread compatablilty on the largest number of browsers and PDAs possible, so it sounds like using the method you suggested would not be an option. What would you say is my next best option? Should I just design it for 1024 pixels wide (or perhaps 1440) and let what happens happen?
Thanks again.
Fitz21

Similar Messages

How to put the background image in Title Window?

Hi,
I'm newbie in flex. I 'm using Flex 4.
Can anyone give me some guidelines on how to put the background image in Title Window?
Is it possible to do this?
Thanks.

Hi,
Check the below sample code
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|BorderContainer {
            background-image:Embed(source="image/wheres_the_green_rez.jpg");
            background-image-fill-mode:clip;
    </fx:Style>
    <s:TitleWindow width="100%" height="100%">
        <s:BorderContainer width="100%" height="100%"/>
    </s:TitleWindow>
</s:Application>
Regards,
Anitha

How to create a background image for each item in a List object

Hello.
I am trying to create a background image that displays whenever a user posts something to a list. For example when a user posts text it would appear in a list. The new item in the list would contain a specific background image with the users text appearing on top of the background image. I do not want a background image for the entire list, rather each item within the list.
I am not sure how clear this is so I added an image below. When a user enters text in and clicks the "post-it" button their text would appear below with the sticky note background.
I am not sure which list type would be best for this problem or how to create insert the image, so I am open to suggestions.
Thank you for your help. Any advice or guidance will be greatly appreciated!

Hi
the easiest way would be with itemRenderer.
You have to do two things:
1. In your list declaration use a item renderer: <mx:List itemRenderer="myRenderer"/>
2. create a flex component myRenderer that will be the single item. This can be a canvas with a background image and a text field on it.
When you add a new item to the list, a new myRenderer item will be created and the data property will be passed to it. So you have to put "data" in your textField.
If you need more help try looking at Tour de Flex samples, they're pretty easy.
Andrei

How to setup jpeg file as background image for all site pages and resolution stay same?

I have uploaded my new site to http://wwwtjhtestdec2012.businesscatalyst.com
I have background image set the same on all site pages but image is incorrectly zoomed way in on some pages (like Home page for example).
The Donate Page shows the correct resolution which I want displayed on all site pages.
How do I set all other site pages to match background image resolution of the Donate Page?
I am not sure what I am doing wrong that is changing this, or if it's possibly a bug?
I want the background image to be full screen on all site pages please advise how to resolve.
I would appreciate the assistance!
Thank you kindly!
Tammy

I have re-uploaded my site to http://wwwtjhtestdec2012.businesscatalyst.com.
If I set the Master page to Tile vertically that is only way I can get full screen background image of vegetables (without distortion).
Then however another issue occurs....
On Home Page of site I set same property to Tile and the background is better (no visible line where tiles meet---above the navigation tool bar--that is what I want for all pages associated to Master.
So logically, I tried setting a 2nd associated site page to same master, to Tile but on Statement of Faith Page, notice the horizontal line where tiles meet, above my navigation bar on that site page?
Why does Muse not handle both site pages associated to the same master identically?
Any of the other options besides Tile or Tile vertically cause the background to not fill entire screen.
Ideas?

How to add different background image for submenu items???

Hi all,
I'm pretty new to web design and CSS in particular. Here's my problem...
I've got a Spry horizontal menu bar (untouched as yet), and I want to have a different background image for my submenu items than that of my menu items. From searching the internet I think that I need to apply a class to the submenu item (please correct me if I am wrong).
How would I go about doing this and how would I assign the class to just the submenu items?
Also ideally I want to have my first and last menu items to have rounded corners on one side (therefore making a rounded edge menu bar), is it possible to have a different background image for individual menu items? If so, how?
Really appreciate any help!

Thanks for the link! I've managed to sort the background issue, and it seems to be working fine!
Just one little issue left to tackle...
I want my text to be centered in my top menu items BUT aligned left in my drop down menu items. I have managed this but the text hugs the left hand side. I've tried adding a little margin to the left but that doesn't seem to affect anything???
Here's my CSS... Any ideas which class I should be targeting or why adding the margin isn't working would save my tearing the rest of my hair out! thanks! (screenshot attached).
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    cursor: default;
    width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 120px;
    float: left;
    height: 24px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background-repeat: repeat-x;
    background-color: #333333;
    background-image: url(../images/navbar_bg.jpg);
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #000000;
    border-left-color: #666666;
ul.MenuBarHorizontal li li
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    height: 24px;
    background-color: #333333;
    background-image: none;
    padding: 0;
    margin: 0;
    left: -1px;
ul.MenuBarHorizontal li li a
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    float: left;
    height: 24px;
    background-image: none;
    font-size: 12px;
    font-weight: normal;
    border: 0px 0 0;
    width: 120px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 120px;
    position: absolute;
    left: -1000em;
    height: 24px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    height: 24px;
    width: 120px;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal li a
    display: block;
    cursor: pointer;
    text-decoration: none;
    font-style: normal;
    text-transform: capitalize;
    text-align: center;
    white-space: normal;
    padding: 0px;
    height: 24px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 20px;
    margin: 0px;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #000000;
    background-image: url(../images/navbar_bg_hover.jpg);
    background-repeat: repeat-x;
    line-height: 22px;
ul.MenuBarHorizontal li li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #000000;
    background-image: none;
    background-repeat: repeat-x;
    width: 120px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-repeat: repeat-x;
    background-position: 95% 50%;
    background-color: #333333;
    background-image: url(../images/navbar_bg.jpg);
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-repeat: repeat-x;
    background-position: 95% 50%;
    background-color: #000000;
    background-image: url(../images/navbar_bg_hover.jpg);
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;

Can we set the Background Image for a Report

Hi,
I am generating a report thru the web now i want to give the background image to the report, let me know if any body knows about this.
Thanx

hello,
try the before reports value of your report-level properties. add the BACKGROUND attribute to the BODY tag to reference an image-file for the background.
regards,
the oracle reports team

How to disable the background image in 6680

hi
i am from pakistan and i had Nokia 6680. i want to disable the background image. when i apply any theme i cant see any theme image in the display background. secondly the main reason to remove the background image is place locater. in pakistan our services had an option to locate the location where we are in at the moment. it displays in the mobile set 6680 but only when the call is on. otherwise it doesnt shows that. other nokia series shows it on display as there isnt any background image on it or if there is any then it also shows in the background also. secondly i am sick of this orange image which is running on my nerves when ever i see that background. thats the reasons i want to remove the background image. i read the posts to removing the background image. but there isnt any disable option in the handset so there isnt any chance to editing the theme and check the option of default background.

Hi
In your smartform...
Select the page you want BG picture...Double Click...
On the right side, select Background Picture..
Give the Details ;
Name , Object , ID
Save and Activate...
Object should be availabe.
Hope it helps.
Thanks
Praveen,

How do I change the background image for a single tab on the navigation bar

I'm creating a movie website for TDKR and for the navigation bar, I intend to have a different character for each tab. However, I'm having trouble putting a single image each separate tab. Instead one image appears on each of the tabs. Here's an example of the source and CSS.
<td width="200"><ul id="navigation"><br />
      <li><a href="../pages/index.html">Home</a></li><br />
      <li><a href="../pages/cast.html">Cast</a></li><br />
      <li><a href="../pages/pictures.html">Pictures</a></li><br />
      <li><a href="../pages/soundtrack.html">Music</a></li><br />
      <li><a href="../pages/interview.html">Interviews</a></li><br />
      <li><a href="../pages/links.html">Links</a></li><br />
    </ul>
    </td>
#navigation {
          list-style-type: none;
          padding: 0px;
          margin: 0px;
#navigation li {
          margin: 0px;
          padding: 0px;
          list-style-type: none
#navigation li a:link, #navigation li a:visited {
          display: block;
          width: 200px;
          height: 100px;
          text-decoration: none;
          text-align: center;
          line-height: 100px;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-weight: bold;
          -webkit-transition: 1000ms ease;
          -moz-transition: 1000ms ease;
          -ms-transition: 1000ms ease;
          -o-transition: 1000ms ease;
          transition: 1000ms ease;
          color: #648AAE;
          background-repeat: no-repeat;
          background-image: url(../Images/gifs/Batman-still-2.gif);
          background-position: center bottom;
          text-transform: uppercase;
          letter-spacing: 0.79em;
          border-radius: 5px;
#navigation li a:focus, #navigation li a:hover, #navigation li a:active {
          color: #000000;
          background-image: url(../Images/gifs/Batman-animation-2.gif);
          background-repeat: no-repeat;
          background-position: center bottom;
          background-color: #454545;
          border-radius: 25px;
So, how do I put a single image on each tab (home, cast, pictures, etc). Thank you for your help in advance.

Assign a class to the item and use CSS to apply an image as in
<li><a href="../pages/index.html" class="home;">Home</a></li><br />
<li><a href="../pages/cast.html">Cast</a></li><br />
<li><a href="../pages/pictures.html">Pictures</a></li><br />
<li><a href="../pages/soundtrack.html">Music</a></li><br />
<li><a href="../pages/interview.html">Interviews</a></li><br />
<li><a href="../pages/links.html">Links</a></li><br />
and the CSS
#navigation li a:link.home, #navigation li a:visited.home {
     background-image: url(../Images/gifs/Batman-still-2.gif);

How to change the background image on IP Phone 8861

Hi Concern,
I face some problem on changing background image on IP Phone 8861. I prepare
.png file as per below doc.
Full size image - 800 pixels (width) X 480 pixels (height).
Thumbnail image - 159 pixels (width) X 109 pixels (height).
http://www.cisco.com/c/en/us/td/docs/voice_ip_comm/cuipph/8811_8841_8851_8861/10_5/english/adminguide/P881_BK_A92A3B94_00_adminguide-8811_41_51_61-10_5/P881_BK_A92A3B94_00_adminguide-8811_41_51_61-10_5_chapter_01010.html#P881_RF_C8927D88_00
I upload the png and List.xml on cucm 10.5 as per above doc.
List.xml Example
<CiscoIPPhoneImageList>
<ImageItem Image="TFTP:Desktops/800x480x24/TN-Fountain.png" URL="TFTP:Desktops/640x480x24/p1-800X480.png"/>
<ImageItem Image="TFTP:Desktops/800x480x24/TN-FullMoon.png" URL="TFTP:Desktops/640x480x24/p2-159X109.png"/>
</CiscoIPPhoneImageList>
Now i go to phone set and check new background picture not shows it says "no wallpaper server" something like that.
Please help on the issue.
Thanks
Afzal

Hi Jaime,
Thanks is done ..
On dx650 phone background change is same procedure or different.
File size is different i know but list.xml is same or different ?
Or i can upload only one list.xml file just line add for dx650 phone.
Thanks
Afzal

How I resized the Small Image for a Product Module

I wanted a big picture for my small product module.
1. I inserted {tag_largeimage} in place of {tag_smallimage} on the small product module.
Site Manager -> Module Templates -> Online Shop -> Individual Product Small.
The picture was 200 X 275. It was getting cut off.
2. I open File Manager -> CSS and look in style.css for numbers smaller than those dimensions.
At the bottom, at lines 1594/1595 I found what I was looking for: "#content .shop-product-small .image".
3. I increased the dimensions to 200*275. If your site is automatically generating a border you'll need to include them in the final dimensions.
The customer gets a better view of what I'm selling. I'm happy with the result. I hope this helps.

Hi Steve,
You should just use the large product image, use _path to get the raw URL of the image and use the tumbnail generation code (see knowledgebase) and specify your dimensions. This allows you to use then properly use a large product image in your detail view

Migration to a new machine lost all the background files for iWeb site

Help!
I have just migrated to a new mac pro from my old G5 power mac. I use the migration tool to move all my stuff over to the new machine.
When i started up iWeb and looked at my site, all the background items are gone. it tells me there are missing files. these are all the standard iWeb theme files.
i don't even know where to start. where are these files supposed to be? can i transfer them over manually from the old mac to the new one?
i really don't want to re assign themes for 100 or so pages.
thanks

Welcome to the Apple Discussions. Manually copy the domain.sites2 file that's in your *+User/Library/Application Support/iWeb folder+* on the G5 to the same location on your new Mac Pro, replacing the domain file that's there now due to the migration assistant. See if that will open with all files.
OT

How to change the background color for lookup column options in sharepoint 2007

Hi,
I have a custom List with 10 fields,and in the edit form we want to display only 6 fields,
So I have customized it with sharepoint designer 2007 ,designed a new custom edit form(Insert->ShaerPoint Controls->Custom List Form)
We are using IE8 Browser,and the site has JQuery 1.8 loaded .
The lookup columns is getting rendered as textbox and dropdown arrow image,instead of select html element.
When we click on arrow image,its displaying the values magically,So I am unable to highlight the options with text "ABC" in yellow background color
basically in the input textbox its storing all the lookup values as "ID|value "in choices attribute (I saw this in browser dev tools)
I tried to set the textbox color everytime it loses focus using blur,however its always returning the previous value instead of current selected value.
Is there any way we can achieve this,Any solutions/thoughts
Thanks everyone..

hi i bet you need to amend your jquery script to get onclick values and put it with like append HTML if you want to use Jquery.
Also did you know you could use javascript in calculated column with type number?
Check:
http://sharepointwijzer.nl/sharepoint-blog/tech/icc-html-calculated-column-sharepoint-view
Imposible is nothing

How to delete the Background job for Deleted user

Dear experts
The User RAMESH was delted before one month
I dont know what job had he Created and Scheduled
where should i find the perticular user backgroung jobs and how to delet it
regards
krishna

From SM37....you can give the user name and find all jobs scheduled by the user
select all jobs>>>>delete
*This should have admin access on jobs
Regards,
Nick Loy

How to change background image for each individual page in a template?

I've been working for hours to try to figure out how to change the background image for each individual page in a template. I have tried making a div in the body and adding a CSS and setting a background picture. Unfortunately even after I made it editable all templated webpages changed. I tried looking at different forum results which didn't really help me out. http://forums.adobe.com/message/2670005#2670005#2670005. I've also tried embeding a CSS style on the webpage instead of the external CSS which again didn't work. I'm not sure where to go from here. Is there a good video that explains this clearly. Please help. Thanks.

Adjust inline styles to suit your needs.
<li><a tabindex="-1" href="giving/index.html" class="MenuBarItemSubmenu" style="background:none; color:#FFF; background: #000;">GIVING</a>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How can I put a vertical menu ON TOP OF the background image?

I've taken a screenshot to describe my problem.
http://i48.tinypic.com/10ndeg4.jpg
I want to put the menu on top of the background image. Compare it to placing another image on top of the background image. HOW on earth can I do this?

Did you try putting the image in a <div> and setting the background image for the <div> with CSS. Then within the <div> place your menu.
Just a thought.
LJD

How to do the background image for a site

Similar Messages

Maybe you are looking for