css 2 backgrounds

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mars505
    New Member
    • Feb 2008
    • 6
    #1

    css 2 backgrounds

    I've been reading the overwhelmingly arrogant replies to why people "need to control" their content without having to remove scoll bars... There was an invention a few years back ... it is called the "wide screen ,monitor"

    With this new piece of hardware we have a entirely different way to set up how a second image should interact with a css layout.

    If I want to create an image that is 1440px wide, I want to have the image be absolute in it's position , , the problem is even in Fire fox the image width and height cause the page to display 2 scroll bars. If the user is not using a resolution of the set background which is opaque to lay over the tiled image why should it be scrolled ?

    The idea is to give different window sizes content in the background so when someone is at a very high resolution on a wide screen monitor the back ground has something in it.

    I have gotten the opacity to work on both IE and Firefox but now I am stuck on how to keep the second background from scrolling as well as having it clipped off because of the size of the initial window size, with out using a java script.

    IF css is such a all in wonder fro layouts why is there so many differences in how it interacts with a variety of web browsers....

    The problem, creating a layout that scrolls when needed on vertical information , retains the second background image in full size whether it is in the windows frame and displays as whole when scrolled vertically, eliminating horizontal scroll bar for a single <div> .

    I'm open to suggestion, and I hope the introduction of the widescreen and how people are designing for it is a awake call to the arrogant folk who think css is perfect.
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      Please post your code or a link to a test site if you have one.

      ^_^ Thanks, Death

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          Originally posted by mars505

          IF css is such a all in wonder fro layouts why is there so many differences in how it interacts with a variety of web browsers....
          The only browser that has issues with CSS is Internet Explorer. All versions of IE are 10 years behind web standards. Modern browsers, Firefox, Opera, Safari, etc., have relatively few issues with CSS.

          As Death said, without a link or the complete markup, we can only guess what your issue is.

            Comment

            • mars505
              New Member
              • Feb 2008
              • 6
              #4
              right now I have this code

              [code=css]
              body {
              margin-top:0;
              margin-bottom:0;
              margin-left: 0;
              margin-right:0;
              background-image: url('images/mygb.gif');
              )

              #bg {
              background-image: url('images/myimage2.gif');
              height:1024px;
              width:1440px;
              margin: 0;
              padding: 0;
              position: absolute;
              -moz-opacity: .1;
              filter: alpha(opacity=2 0);
              )
              [/code]

              html looks like this [html]
              <html>
              <head>
              <link rel=.... href="mystylesh eet.css">
              </head>
              <body>
              <div id="bg">
              </div>
              </body>
              </html>
              [/html]
              That is all I have , I need to solve the problem at hand before continuing my design. Should say everything is functioning the way I want except for the scroll bars following the height and width rule set in my bg div.

              I guess what I need is for the image to be set to display at that exact size without having it scroll. So when there is enough content in my containers to make the page scroll the back ground will display at the full capacity without getting cut off because of only rending the windows initial view.

                Comment

                • mars505
                  New Member
                  • Feb 2008
                  • 6
                  #5
                  Originally posted by drhowarddrfine
                  The only browser that has issues with CSS is Internet Explorer. All versions of IE are 10 years behind web standards. Modern browsers, Firefox, Opera, Safari, etc., have relatively few issues with CSS.

                  As Death said, without a link or the complete markup, we can only guess what your issue is.
                  Firefox is mirroring the exact same behavior as IE with what I'm trying to achieve.

                    Comment

                    • mars505
                      New Member
                      • Feb 2008
                      • 6
                      #6
                      I have now just a vertical scroll , which is a step int he correct direction. The lines I added :
                      Code:
                      #bg {
background-image: url('images/mypic2.gif');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 10% 10%;
height: 1024px;
width: 100%;
margin: 0;
padding: 0;
position: absolute;
-moz-opacity: .1;
filter: alpha(opacity=20);
overflow: visible;
}
                      Think what I will do , which I really didnt want to do is change the height to fit at 768px which kind of ruines the illusion I wanted . :/

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          Originally posted by mars505
                          Firefox is mirroring the exact same behavior as IE with what I'm trying to achieve.
                          If you write to web standards, then all browsers generally do fine. Eventually you will run into IE problems. Always keep in mind to first test in Firefox or Opera to make sure your markup is right and the page is doing what you want. Then look in IE to see if it manages to do the same.

                          You do not show if you are using a doctype. A doctype is required of all pages and IE won't attempt to act like modern browsers without one. New pages should always use this one:

                          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                          "http://www.w3.org/TR/html4/strict.dtd">

                          In CSS, modern browsers know the 'opacity' property (not IE) so it is not necessary to use -moz-opacity. From what you've written, I assume you know that 'filters' are IE only and non-standard.

                            Comment

                            • mars505
                              New Member
                              • Feb 2008
                              • 6
                              #8
                              A gif doesn't reproduce the opacity when exported . IE can't deal with png's so I use a gif which works. I've tried a few of the "IE png fixes" and they didn't work with IE6. I figure if I can get it all to work on IE6 , anything above IE6 should be ok....

                              The standard for my doc is <"....-//W3C//DTD HTML 4.01 Transitional//EN">

                                Comment

                                • drhowarddrfine
                                  Recognized Expert Expert
                                  • Sep 2006
                                  • 7434
                                  #9
                                  Originally posted by mars505
                                  A gif doesn't reproduce the opacity when exported .
                                  Don't know what you mean.
                                  I figure if I can get it all to work on IE6 , anything above IE6 should be ok....
                                  IE6 does not work the same as IE7. And IE7 doesn't work like anything else so there will be issues. I'm talking about html/css.
                                  The standard for my doc is <"....-//W3C//DTD HTML 4.01 Transitional//EN">
                                  There is no need for the transitional doctype for any new web pages. It is only there to allow web sites to continue to validate old, deprecated markup which you shouldn't be using anyway. All new web pages should always use a 'strict' doctype.

                                    Comment

                                    • mars505
                                      New Member
                                      • Feb 2008
                                      • 6
                                      #10
                                      Is there any point where you may actually give some helpful information , or is this the ego trip section.

                                      Think you have given absolutely no useful information in this entire discussion.
                                      ho cares what your "opinion" is about what I or anyone else should be using, what I use has no difference in how css functions, from notepad to dreamweaver, what is your point ?

                                      "Export" out of a image editor. A gif does not have the same opacity as what I designed so I have to use the opacity setting in the css to get the desired effect.

                                      I will be rude and say from almost all of Dr's post , they are pretty much flame bait and useless.

                                        Comment

                                        • drhowarddrfine
                                          Recognized Expert Expert
                                          • Sep 2006
                                          • 7434
                                          #11
                                          Originally posted by mars505
                                          Is there any point where you may actually give some helpful information , or is this the ego trip section.
                                          Your statements show a lack of knowledge on your part. I'm trying to educate you on your misinformation.
                                          [quote]
                                          Think you have given absolutely no useful information in this entire discussion.
                                          ho cares what your "opinion" is about what I or anyone else should be using[quote]I rarely give opinion. I'm informing your of standards and best practices.
                                          what I use has no difference in how css functions
                                          As I said, you are misinformed.
                                          I will be rude and say from almost all of Dr's post , they are pretty much flame bait and useless.
                                          As moderator, I hardly encourage flame baiting.

                                          Remember that it is you that is having the problem, not me. I don't have the problems you are having because I know what I'm doing. You have the opportunity to learn from that or continue to stumble along on your own. I'm not trying to give you information that won't help you and I don't have to tell you anything at all. Nobody's paying me to do this.

                                            Comment

                                            • hdanw
                                              New Member
                                              • Feb 2008
                                              • 61
                                              #12
                                              When you specify a width and hieght you are telling the browser that something exists at point x, y.

                                              The scrool bar is there so you can find the content you said was there.

                                              Try taking your hieght and width completely out of the CSS file completely and let the picture run at its normal attitude.

                                                Comment

                                                Previous template Next
                                                Working...