css 2 backgrounds - HTML / CSS

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.

Feb 7 '08 #1

Subscribe Post Reply

1859

Death Slaught

1,137

1GB

Please post your code or a link to a test site if you have one.

^_^ Thanks, Death

Feb 7 '08 #2

drhowarddrfine

7,435

Expert 4TB

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.

Feb 7 '08 #3

mars505

right now I have this code

Expand|Select|Wrap|Line Numbers

 
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=20);

)

html looks like this [html]
<html>
<head>
<link rel=.... href="mystylesheet.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.

Feb 7 '08 #4

mars505

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.

Feb 7 '08 #5

mars505

I have now just a vertical scroll , which is a step int he correct direction. The lines I added :

Expand|Select|Wrap|Line Numbers

 
#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 . :/

Feb 7 '08 #6

drhowarddrfine

7,435

Expert 4TB

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.

Feb 7 '08 #7

mars505

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">

Feb 7 '08 #8

drhowarddrfine

7,435

Expert 4TB

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.

Feb 7 '08 #9

mars505

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.

Feb 7 '08 #10

drhowarddrfine

7,435

Expert 4TB

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.

Feb 8 '08 #11

hdanw

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.

Feb 8 '08 #12

Similar topics

why backgrounds and bgcolors not print?

by: RoDzZzZ | last post by:

when i try print (ctrl +p) my webpage, my printer not print the backgrounds and bgcolors of my tables.... what i need make to show the backgrounds and bgcolors in my paper when the user print...

Javascript

bitmap backgrounds?

by: Greg Locke | last post by:

Hi All I am programming MFC Visual C++ using Microsoft Visual Studio.net 2003 under Windows XP professional. I have developed some bitmaps as graphic overlays for buttons. I had trouble finding...

C / C++

I cannot seem to get around solid backgrounds on logo images I paste into Access 97 forms

by: MLH | last post by:

I have a logo image that I can paste into MS Paint as an image with clear background. Think of the logo as a black circle in a white, rectangular background. When I paste into Paint, the white...

Microsoft Access / VBA

Print Report with 2 subreports while maintaining different image backgrounds

by: ghadley_00 | last post by:

Hi, Have created 2 seperate reports that have different images as backgrounds. Would like to have both pages print out as 1 print job (so duplex printer will make each report page on opposite...

Microsoft Access / VBA

TextBox backgrounds yellow (some of them)

by: Rik Brooks | last post by:

I'm developing Web Applications with C# code behind. I have found that, because of the particular nuances of my company, I am stuck with positioning the items on the page with tables. No problem...

C# / C Sharp

particle effects / moving backgrounds

by: gregerly | last post by:

I'm a total flash / actionscript newbie. I have a question about how to create a flash background as seen here: Adobe MAX I don't expect a detailed explanation. I'm just looking for some info...

Flash / Actionscript

Divs within Divs and backgrounds

by: alice | last post by:

I'm trying to have a background image in a div, then have several divs within that div that have black backgrounds. The problem I'm finding is that in Firefox and Safari, the first background image...

HTML / CSS

IE7 not rendering 100% wide or high DIV backgrounds beyond viewable area

by: matturn | last post by:

Is there any way to get IE7 to render the whole viewpoint without forcing a page reload? If you set a DIV to 100% wide or high, and give it a background; that background will not be rendered if it...

HTML / CSS

2 Backgrounds with CSS - Problem with IE6

by: duhcoolies | last post by:

I have a table-cell (width=!00%) with a background (BG1), and within this table-cell I have another table-cell (again width=100%) with another background (BG2). BG1 needs to be tiled horizontally...

HTML / CSS

Multiple backgrounds

by: Johan | last post by:

I can set/change a background with: document.getElementById("photodiv").style.background = "#282828 url(../img/pict_1.jpg)"; How do I set/change multiple backgrounds using javascript?

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice