Grid height of container to 100% with background image

Similar Questions

• 100% width background images do not appear in chrome when I apply scroll effects. Please help someone

  Since the last update to dream my 100% width background images do not appear in chrome when I apply scroll effects. Does anyone else have this problem? They work on all other platforms, but not chrome. I talked with adobe and they said basically their cant be a problem on their end because no one else has not complained.

  problem solved, it's adding css that I included in the site

• Menu Spry, problems with background images in Internet Explorer

  Hello

  Looking for help from someone more qualified than me with some menus spry.  I have problems with background images don't show is not for some of my items menu in Internet Explorer.  Safari and firefox seem to accept it's ok.

  Here is a link to the menu: http://www.scottbrownwebdesign.com/beta/HTML/index.html

  and here is a link to the spry .css: http://www.scottbrownwebdesign.com/beta/HTML/SpryAssets/SpryMenuBarHorizontal.CSS

  I know that these are the elements that have the drop down or the side of the arrows.  I can't have two background images that I can?

  Thanks in advance,

  -Scott

  My first thought...

                       display: inline;          f\loat: left;          background: #FFF;
  
  Try declaring the background-image here as well... where it says not to mess with unless you know what you are doing.
  
  I'm just guessing though. If I had more time I'd look into it further but I do not.
  

• Need help with background image a clickable link

  Hi guys,.

  I want to make the background of my site a background of advertising where the background image is clickable.

  I tried a few tutorials, but none seems not to work

  What I have, it's like my CSS...

  #skin {position: absolute;
      width: 100%;
      height: 800px;
      margin-left: auto;
      margin-right: auto;
      top: 0px;
      left: 0px;
      z-index: -1;
      background-position: fixed;
  }
  

  .. .and this as my HTML code...

  <div id="skin"><a href=""><img src="background.jpg" /></a></div>
  

  It works soon, but the link is only a thin strip of hand and side of the screen for some reason any and don't extend to the background of the entire image.

  Does anyone have any ideas as to where I'm wrong?

  I thank you and hope to hear from you!

  SM

  Spindrift wrote:

  Basically, what I want to do, is to have a skin of advertising that the background (maybe just a dummy container div to serve in the background) of my site, while he fills the area outside the container div of my sites and opens a link if clicked.

  Anyone know how I can do this?

  This can be done relatively easily, but it's not very pretty. You will need to use a full great for the background image, unless you plan to repeat, and then assign the clickable containing exactly this size. See code and screenshot below. Tested in FF, Chrome and IE9.

  

• Help with background image

  I am one of those old creators shaped 'table' who decided to try the new way, CSS sites.

  I tried to enter a background image to a page and put a table on the top. It did not work because when I added another table inside the main table it reproduces the background which was attached to the page image and not the table.

  So I decided to do it in CSS and strange, this duplication thing happened here as well. When you hit the enter diplicates a band thin of the background of the page.

  I have attached two screenshots. The first is what it looks like in DreamWeaver CS4 and the other in the browser.

  

  

  The CSS looks like this:
  

  body, p

  {

  margin-left: 0px;

  margin-top: 0px;

  background-attachment: fixed;

  background-repeat: no-repeat;

  background-position: left top;

  background-image: url(images/Agtergrond2S.jpg);

  }

  #container {}

  }

  {#headerarea}

  padding: 10px;

  height: 20px;

  width: 800px;

  left: 260px;

  top: 141px;

  position: absolute;

  are-family: Arial, Helvetica, without serif.

  are-size: 16px;

  make-weight: bold;

  color: #FFF;

  }

  {#leftarea}

  padding: 10px;

  height: 600px;

  width: 250px;

  position: absolute;

  left: 0px;

  top: 141px;

  }

  {#mainbodytext}

  padding: 10px;

  height: 100%;

  width: 700px;

  position: absolute;

  left: 260px;

  top: 220px;

  are-family: Arial, Helvetica, without serif.

  are-size: 12px;

  make-style: normal;

  color: #FFF;

  text-align: left;

  background-image: url(images/trans-test.png);

  background-repeat: repeat;

  }

  #header {}

  padding: 10px;

  height: 20px;

  width: 700px;

  position: absolute;

  left: 260px;

  top: 170px;

  are-family: Arial, Helvetica, without serif.

  -font size: 24 PX.

  make-weight: bold;

  color: #FFF;

  }

  {#footerarea}

  padding: 10px;

  height: 30px;

  width: 1280px.

  position: absolute;

  left: 0px;

  top: 800px;

  }

  a,

  a: visited,

  a: link {}

  color: #424242;

  are-family: Arial, Helvetica;

  are-size: 12px;

  text-decoration: underline;

  make-weight: bold;

  }

  a: hover {}

  color: #666666;

  are-family: Arial, Helvetica;

  text-decoration: highlighted underscore;

  are-size: 12px;

  make-weight: bold;

  }

  a: {for more information

  color: #oooooo;

  do-family: Arial, Helvetica;

  text-decoration: underline;

  do-size: 12px;

  make-weight: bold;

       }

  . {To header

  are-family: Arial, Helvetica, without serif.

  are-size: 18px;

  make-style: normal;

  make-weight: bold;

  color: #cc0000;

  }

  . OPPORTUNITY {}

  are-family: Arial, Helvetica, without serif.

  -font size: 13px;

  make-style: normal;

  make-weight: normal;

  are-variant: normal;

  }

  And the page itself looks like this

  < html >

  < head >

  < title > < /title > African surveyors

  < meta http-equiv = "Content-Type" content = text/html"; charset = iso-8859-1 ">"

  < META name = "Description" content = "engineering and topographic surveyors, surveyors African," > ""

  < META name = "Keywords" content = "surveyors, African, African, topographic surveyors in engineering, land surveyors" >

  < META name = "robots" content = "ALL" >

  < META name = "copyright" content = "" >

  < META name = "rating" content = "Général" >

  < META name = "revisit-after" content = "14" >

  < META name = "language" content = "EN" >

  < META name = 'distribution' content = 'Global' >

  < meta http-equiv = "Content-Type" content = text/html"; charset = iso-8859-1 ">"

  < link href = "style.css" rel = "stylesheet" type = "text/css" > "

  < script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "

  < link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" > "

  < / head >

  < body >

  < div id = "container" >

  < div id = "headerarea" >

  < ul id = "MenuBar1" class = "MenuBarHorizontal" >

  < li > < a href = "#" > about us < /a > < /li >

  < li > < a href = "#" > contact us < /a > < /li >

  < li > < a href = "#" class = "MenuBarItemSubmenu" > Services < /a >

  < ul >

  < li > < a href = "#" > rendering 3D < /a > < /li >

  < li > < a href = "#" > example 3 < /a > < /li >

  < /ul >

  < /li >

  < li > < a class = "MenuBarItemSubmenu" href = "#" > point 3 < /a >

  < ul >

  < li > < a class = "MenuBarItemSubmenu" href = "#" > point 3.1 < /a >

  < ul >

  < li > < a href = "#" > section 3.1.1 < /a > < /li >

  < li > < a href = "#" > 3.1.2 < /a > < /li >

  < /ul >

  < /li >

  < li > < a href = "#" > point 3.2 < /a > < /li >

  < li > < a href = "#" > point 3.3 < /a > < /li >

  < /ul >

  < /li >

  < li > < a href = "#" > point 4 < /a > < /li >

  < /ul >

  < / div >

  < div id = "leftarea" >

  < p > the left connect domain < /p >

  < / div >

  < div id = "mainbodytext" >

  < class p 'Body_text' = > place the body of the text here < /p >

  < class p = 'Body_text' > and several body text here < /p >

  < class p = 'Body_text' > < / p >

  < / div >

  < div id = "footerarea" >

  < p > < /p > footer area

  < / div >

  < / div >

  < div id = "header" >

  < h1 class = "Header" > African surveyors < / h1 >

  < / div >

  < script type = "text/javascript" >

  <!--

  var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})

  ->

  < /script >

  < / body >

  < / html >

  Hello:

  You have a class css as follows:

  body, p

  {

  left margin: 0px;

  margin-top: 0px;

  background-attachment: fixed;

  background-repeat: no-repeat;

  background-position: left top;

  background-image: url(images/Agtergrond2S.jpg);

  }

  This applies to the body and p tag.

  So when you enter, you generate one

  tag and, therefore, this image is applied due to the class above as a backdrop.

  I hope I am on the right track...

  Thank you

  Vinay

• Alignment of header with background image

  I have problems trying to align my header with my background image image. I created a table with a width of 100%. The height of my image is 108px. I can't get the cell as 108px also.
  
  I get the error message "the value you entered would make this table becomes lower than its minimum size.» It will be reduced to a size valed. »
  
  So basically my background image starts a couple px before my image and therrfore dosent align correctly.
  
  Any ideas?

  Thank you so much Michael! I didn't know that a white in the cellular space, padding box does not mean 0. I put in zeros and problem solved!

• Problem with background Images and scrolling

  I had to face for a while to get background pictures are working properly. Here's what I do:

  VFM VerticalFieldManager = new VerticalFieldManager();

  Card of bitmap = Bitmap.getBitmapResource ("MyImage.jpg");

  Background bg = BackgroundFactory.createBitmapBackground (map);

  vfm.setBackground (bg);

  This works, but has entrapment. First of all, he painted only as much as you have fields too much room, so I have to add empty fields just to occupy vertical space. However, on a page with something like a listField, where the height is variable, this can lead to what the background image are starting to repeat and to allow scrolling.

  What I want to do is to block all the scrolling and have the training exactly fill the screen with no scrolling or white empty places.

  I'll just on this wrong? Would really love to help...

  Hello

  Hope this will help you.

  class LoginScreen extends MainScreen {    //Manager        private VerticalFieldManager _manager;
  
      LoginScreen() {        //Set Background image            _manager = (VerticalFieldManager)getMainManager();            Background bg = BackgroundFactory.createBitmapBackground(Bitmap.getBitmapResource("back.png"));            _manager.setBackground(bg);
  
     }}
  

  Add this manageron your screen don't add any component in this handler.

  You add fields in the Manager of the other, and adds that the Manager on the screen.

  Let me know if this solves your problem or not.

• Text single line with background Image field

  Hello

  I have the following requirement for a small number of topics on BasicEditField, but I couldn't find answers to my requirement, so post to the same

  My requirement

  1 must be the only editor of line text field with a width and a predefined height.

  2. If a background Image(For better look-rounded edge image like in Broswer)

  3. If the number of characters exceeds the single line, it has scroll horizontally right and from characters to scroll left with the appropriate property of the ellipse.

  4. in entering an Enter key (Center of select navigation Keys), it should call my method to perform an action.

  Enjoy a quick help on this

  Thanks in advance

  Q1. BasicEditField.NO_NEWLINE will stop people pressing enter and get a new line.

  Regarding your second question, I recommend that you check out the two videos on screens and area managers.

  As a general rule, a field is laid out (i.e. tells his manager what size he needs and then this rectangle is placed), then painted.  Exhibitor is managed by managers and put sublayout on the page for the fields.  The more important than sublayout and put thing in page do is specify the scope (width and height) they need, which fiddles and managers to make using the measure.

  Once all fields was laid out, then the visible parts of each field are painted using paint.  I've never used subpaint.

  I hope this helps.

• Puzzle pieces filled with background image?

  Hello community, there.
  On exactly 0:21 of this video: https://www.YouTube.com/watch?v=HTT6aaoq-OS ; the guy selects the pieces of the puzzle and then proceeds to copy them into a new layer. But the new pieces of the puzzle are now filled with the image of the background. Could you recognize this specific effect/technique or direct me to the shortcuts he used? Any help is greatly appreciated, friends

  PS. I think that it is a variant of the clipping mask - I tried with the clipping mask, but I can't get the search results

  After selecting the pieces of the puzzle, he selects the bg layer and press ctrl/cmd-J.

• Please help: content still is not fixed with background image when I resize the browser window

  I am designing a Web site and want my content appear in the same location relative to the background image, regardless of whether or not the browser window is resized. How can I do this? (the content always moves when I preview the page)

  You can pin the object on the page so that it remains in the same position with any size of the screen.

  Thank you

  Sanjit

• Border problems with background image

  Hello

  I have a problem with my background image. I have fillings of browser size the original value and activated scale option in the middle. The image has a resolution of 1920x1080px. But when I now change the size of my browser I get a white border on the left or on the right size.

  
  

  Small to large size of Office Office:
  

  https://DL.dropboxusercontent.com/u/84237067/kleinzugross.PNG

  Large size of small office desktop:

  https://DL.dropboxusercontent.com/u/84237067/grosszuklein.PNG

  Hope you understand me, my English for this specific part is not perfect it.

  Greetings

  Marcel

  I checked out the site but don't see any white space on the page with large screens, I think that you have already solved the problem?

  Thank you

  Sanjit

• Using tracing image, and then replacing with background image

  I am very new to Dreamweaver and am trying to put together a very simple site.

  I use image tracing for the mode of disposal table - and it am followed exactly. However, when I put it off to test it in my browser,

  nothing aligns how it shows in my work environment.

  Am I missing something obvious 'very '? Thank you.

  (1) never use the mode table layout. It's a terrible way to build web pages.

  (2) no matter how hard you try, you can't make things stick to a large background image.  It's like trying to nail Jell-o to a wall.

  Have a look at the following tutorials. These will get on the right track.

  Tables to CSS Web Design part 1-
  http://www.Adobe.com/devnet/Dreamweaver/articles/table_to_css_pt1.html

  Tables to CSS Web Design part 2-
  http://www.Adobe.com/devnet/Dreamweaver/articles/table_to_css_pt2.html
  

  Post back if you have problems.

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB
  http://ALT-Web.blogspot.com

• The Spry menu bar personalized with background Images

  Hello

  Is there a way to make a spry menu horizontal bar by using an image of different background of a different width for each item?  In other words, the format individually each menu item.  I'm doing a bar with drop down menus using custom images, that I created in Photoshop, but have only been able to use the same image for all the items in the menu.  Thank you.

  Each menu item will require that this is the style and the name of the class of its own.

  Each class will have to be applied to each following anchor tag:

  • Point 1
  • Point 2
  • Point 3

  http://ALT-Web.com/demos/multi-colored-list-menu.shtml

  Nancy O.

  ALT-Web Design & Publishing

  Web | Graphics | Print | Media specialists

  http://ALT-Web.com/

• How to insert a background image in VGroup in Flex Mobile

  I want to insert a background image for the VGroup. Help out me. I'm new to Flex!

  I use this code in the Flex Mobile Application *.

  < s:VGroup height = "100%" width = "100%".

  paddingTop = "10" paddingBottom = "10" paddingLeft = "10" paddingRight = "10" >

  < s:List id = "homeList" height = "100%".

  labelField = "title".

  dataProvider = "{Homearticles}" >

  < s:layout >

  < s:TileLayout requestedColumnCount = '1 '.

  verticalGap = "5" / >

  < / s:layout >

  < s:itemRenderer >

  < fx:Component >

  < s:ItemRenderer >

  < s:VGroup >

  < s:BitmapImage source = "{data.source}" / >

  < s:Label text = "{data.title}" / > "

  < / s:VGroup >

  < / s:ItemRenderer >

  < / fx:Component >

  < / s:itemRenderer >

  < / s:List >

  < / s:VGroup >

  I don't think that you can add a background image to a VGroup directly, or VGroup can be skinned.

  As much as I know there are probably 2 solutions

  (1) use a SkinnableContainer skin rather the container to have a background image and set its layout to VerticalLayout

  (2) place the VGroup one group with a BasicLayout. You can then add a background image for the Group and the overlay VGroup

• Expand the background Image to cover across the region title

  I have a region title that contains an image and it has a height of 2 rows, but the background image (blue image) is not growing in the region (the css contains repetition for background). The application uses the theme 2. Can anyone help?
  
  CSS:

  .rc-title {
      background: url("../images/bg-region-blue-l.gif") repeat scroll 0 0 transparent;
      float: left;
      width: 100%;
  }
  div.rc-blue-top
  {
      background: url("../images/bg-region-blue-l.gif") repeat scroll 0 0 transparent;
      float: left;
      width: 100%;
  }

  I created the application on the APEX. ORACLE.COM:
  Workspace: RGWORK
  User: TESTER
  Password: test123
  Application: CSRSR (33558)
  
  Select view from the menu (only choice).
  
  You will see that the tabular forms a dog tags and an image, another tabular form has a picture but no text (nameplates), even if it is there. I live blue to cover the image and the text.
  
  Help, please
  
  DB: 10g
  APEX 4.1
  
  4.2 APEX (APEX. ORACLE.COM) works the same way.
  
  Robert
  http://apexjscss.blogspot.com

  sect55 wrote:
  fac586,
  I would like to try the second option:
  >
  Another option would be to eliminate the problem by moving images of the nameplate on the titles of the region. There is a horizontal space within the regions that will allow these images to be rotated to the left of tabular form, that would look OK. But how to refer to the horizontal space within the regions? I looked at the model for the region:

  
  
  #TITLE#
  #CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#
  
  #BODY#
  
  
  
  
  

  and could not put the image in horizontal space.

  Can you please help me by providing the details?

  There are two options, depending on the role you see images of the plate by playing on the page. I used the two regions to give an example of each.

  * 1. Nameplate as eye-candy: * If there is sufficient information on the region, contained region title and labels of items to make the images of the nameplate of the superfluous by providing information to the user and you are just using them to improve the appearance of the page, then they can only be applied using CSS.

  /* Nameplate image as CSS eye-candy */
  #nameplates-ndc div[id$="catch"] {
    min-height: 36px;
    padding-left: 113px;
    background: transparent url(#WORKSPACE_IMAGES#nameplate_ndc.gif) top left no-repeat;
    background-size: 103px;
  }
  

  Note the use of the CSS3 background-size property to resize the image. If the application needs to work in browsers that do not support this so you will have to drop it and create an image of the exact size required for use in the bottom rule.

  * 2. Nameplate as content: * If the plate images are necessary to provide information to the user, then they should be included in the region (and they must have an alt attribute, providing an alternative representation of the information contained in the image).

  Put the image in the header area:

  and it floats so it sits next to the form:

  /* Nameplate image as page content */
  #nameplates-name .rc-content-main img {
    float: left;
    margin-right: 10px;
  }