/    Sign up×
Community /Pin to ProfileBookmark

CSS3 causing me grief. Two background images. Can anyone assist please?

Copy linkTweet thisAlerts:
May 02.2012

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;
[/CODE]

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 six 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.

[URL=”http://bayimg.com/haOMgaadF”]http://bayimg.com/haOMgaadF[/URL]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@TheAliveWinnerMay 02.2012 — [I]I checked your code and it works fine in Chrome 18, FF 8 & Opera 11.60 (...but not in IE 9!).[/I]

Try this (...keep your fingers crossed!) >>>
[code=html]
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;
[/code]
?
Copy linkTweet thisAlerts:
@CaliburnauthorMay 02.2012 — [I]I checked your code and it works fine in Chrome 18, FF 8 & Opera 11.60 (...but not in IE 9!).[/I]

Try this (...keep your fingers crossed!) >>>
[code=html]
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;
[/code]
?[/QUOTE]

Yeah that doesn't work either. This is what I used:


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;
[/QUOTE]

:mad:
Copy linkTweet thisAlerts:
@TheAliveWinnerMay 02.2012 — [I]Then it might be browser rendering problem because the code is fully CSS3 compliant![/I]
Copy linkTweet thisAlerts:
@CaliburnauthorMay 02.2012 — [I]Then it might be browser rendering problem because the code is fully CSS3 compliant![/I][/QUOTE]

I am encountering the same problem in both Google Chrome 18.0.1 and Mozilla Firefox 12.0 and Internet Explorer 9.0.8 and it is the same problem. I am at a total and complete loss here, guys.

I'm going to include the full CSS:

[CODE]/*
This is the main style sheet for the INDEX WELCOME page. This style is
seperate from the MASTER STYLE
*/

body {
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;
font-family: 'Tangerine', sans-serif;
color: #FFF;
font-size: 60px;
text-shadow: 4px 4px 4px #000;
margin-right: 180px;
margin-top: 100px;
padding: 0px;
text-align: right;
}

#the_mistress {
background: url("../imgs/divbg.png") repeat-y;
width: 800px;
height: 400px;
border: none;
border-radius: 25px;
}[/CODE]

The above CSS3 validates. Now the HTML 4.01 Strict framework I wrote:

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

[/CODE]

The HTML 4.01 validates Strict. I am also including the images:
Copy linkTweet thisAlerts:
@CaliburnauthorMay 02.2012 — [B]Update[/B]: I was able to resolve this situation with some CSS correction thanks to a very helpful person. One div was over 400px high and the body was not expanding properly.
×

Success!

Help @Caliburn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.14,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...