Topic: CSS3 Issue I am having - DRIVING ME BATSHIT INSANE Pages that link to <a href="https://ozoneasylum.com/backlink?for=32598" title="Pages that link to Topic: CSS3 Issue I am having - DRIVING ME BATSHIT INSANE" rel="nofollow" >Topic: CSS3 Issue I am having - DRIVING ME BATSHIT INSANE\
 
Author Thread
Caliburn
Nervous Wreck (II) Inmate

From: Las Vegas, NV
Insane since: Sep 2009

 IP logged posted posted 05-02-2012 13:11 Edit Quote

Fellow inmates,

It's been quite some time since I've posted here. I lurk quite often tho. I find myself running into a small little CSS3 wall that I cannot seem to overcome. I hope you guys can help me out a little bit. Here is the relevant CSS

code:
background-color: #550909;
  background-image: url("../imgs/bg.jpg"), url("../imgs/bg-bottomright.jpg");
  background-position: left top, right bottom;
  background-repeat: no-repeat;



Long story short... I have two background images I want to use. I want one in the top left and one on the bottom right. However the bottom right image is not going to the bottom! It's on the right side of the screen but will NOT go to the bottom right like I want it to! It's frustrating me. What am I doing wrong? I spent the last three hours going over a CSS3 book I have and I am not having any luck what-so-ever! Can you guys help me out?

I have included a visual aid of the page. Please ignore the middle DIV background. Focus on the flowers on the right hand side. Lol. Also... I am testing this in Google Chrome! In theory it should be working.

Image Example Of Problem: http://bayimg.com/haOMgaadF

I have copy and pasted the actual HTML below although I highly doubt any of the HTML coding is causing the problem. Its fresh. But on the off chance... cause I am at a total loss...

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
			
<html lang="en-US" dir="ltr"><!-- Begin HTML Document -->
	<head><!-- Begin Header -->
	
		<title>The Lounge.</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="author" content="Dustin R. Sanchez">
		<meta name="copyright" content="2012-2013 Dustin R. Sanchez">
		
		<!-- Begin Lounge Specific CSS -->
		<link rel="stylesheet" type="text/css" href="styles/lounge.css" media="screen">
		<!-- End Lounge Specific CSS; Begin Google Fonts CSS -->
		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine"> <!-- FFSansSerif -->
		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Alice"> <!-- FFSerif -->
		<!-- End Google Fonts CSS -->
		
	</head><!-- End Header -->
	
	<body><!-- Begin Main Body -->
		<div id="the_master"><!-- Begin Master Wrapper -->
	
			<div id="the_mistress"><!-- Begin Mistress Wrapper -->
			</div><!-- End Mistress Wrapper -->
	
		</div><!-- End Master Wrapper -->
	</body><!-- End Main Body -->
	
</html><!-- End HTML Document -->
Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

 IP logged posted posted 05-03-2012 11:07 Edit Quote

Now, I have no clue about CSS3... have you tried simply reversing the images?

This example: http://www.css3.info/preview/multiple-backgrounds/ works for me and it looks oh so similar to yours...

I don't get it either

Caliburn
Nervous Wreck (II) Inmate

From: Las Vegas, NV
Insane since: Sep 2009

 IP logged posted posted 05-07-2012 05:02 Edit Quote

I was able to resolve it. Why is this forum so damn slow? The Asylum used to be pretty busy. =(
Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

 IP logged posted posted 05-07-2012 11:14 Edit Quote

because we moved on with our lives .

And back in the day, people would actually tell how they resolved it, not leave the next guy stuck...
Caliburn
Nervous Wreck (II) Inmate

From: Las Vegas, NV
Insane since: Sep 2009

 IP logged posted posted 05-08-2012 15:17 Edit Quote

LOL fair enough Tyberius. It had to add the following to the CSS3:

code:
html, body {
	height: 100%;
	margin: 0%;
	padding: 0%;
	color: #fff;
	font: 60px 'Tangerine', sans-serif;
}

body {
	height: 100%;
	background-color: #550909;
	background-image: url("../imgs/bg.jpg"), url("../imgs/bg-bottomright.jpg");
	background-position: left top, right bottom;
	background-repeat: no-repeat, no-repeat;
	margin: 0%;
	padding: 0%;
	text-align: center;
}



It was missing the "height: 100%;" part of the CSS. Anyhow does Doc even post anymore? Will the Ozone ever return to it's former glory? Will you ever re-code it? Haha.

Tao
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Nov 2003

 IP logged posted posted 05-09-2012 03:20 Edit Quote
quote:
because we moved on with our lives


Hmmm. Lives you say. I'll have to give that a try TP



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail