• 0

Adding Two Background Images Using CSS


Question

Here's some information:

Background image is 3840w x 1h (I may chop this down to something more suitable but at 2.7Kb it isn't exactly slow at loading)

Grass image is currently 3840w x 145h (I'll be looking to significantly change this so it's a lot smaller)

What I want is the background image to be displayed but at the very bottom of the page, the grass is shown on top. This is the code I used, but it only shows the grass.

Sorry it's messy, I sort of borrowed code from another page example I had and hoped it would work :p

<style type="text/css">
body
{ 
background-image:url('grass.png');
background-repeat:repeat-x;
background-attachment:fixed;
background-position:bottom; 
}
</style>
</head>
<body topmargin="0" leftmargin="0" background="backgroundNEW.jpg">

I know I have set the background image twice, but I am unsure how I can get a fixed position image using CSS that isn't the background image?

Thanks for any pointers (Y)

16 answers to this question

Recommended Posts

  • 0

That is because the CSS loads after the HTML and overrides the HTML background tag since they are both the same thing.

When I do this I tend to use a seperate div for the grass.

QUICK e.g

<style type="text/css">
#page {
width: 100%;
height 768px;
}
#grass
{ 
background-image:url('grass.png');
background-repeat:repeat-x;
position: relative;                                   \\I think
top: (pixels of page minus pixels of image)
height: (Height of image)px;
}
</style>
</head>
<body topmargin="0" leftmargin="0" background="backgroundNEW.jpg">;div id="page">
<div id="grass"></div>
Lorem Ipsum blah blah
</div>

Lool I dunno if this will work at all actually but the idea should work eventually.

Edit: You'd probably need to 'padding-bottom' the page div and probably think up a way to be able to use the 100% height in the page div and still have the grass work. Tweak around until it works.

  • 0

Hmm, can this work for any amount of images?

I have figured a better way to display the images to be a bit friendlier on bandwidth. SO the main background image is the same.

Then I have one image which I need at the bottom of the page (IE, grass) which I need repeating the whole width of the page (obviously dependent on the screen resolution. (can I have this coming from the bottom right, but set in by 100 pixels or so?).

I have a separate image I want above the grass and background image for the bottom right. Again, whatever the resolution, this image needs to be in the bottom right, then the grass image comes off of this.

I can provide a quick image to explain what I mean if needed?

It doesn't have to be done with CSS, I just need an easy way to do it that won't break any other CSS. If I can do it with HTML and it's still regarded as acceptable, then that's fine with me.

Thank you :)

  • 0

Well, like I say, I don't need them all in the background tag, I just don't know any other way to do it that is acceptable coding these days.

This is sort of what I want:

post-39459-0-03024500-1301644997.jpg

So we have the blue background, easy to do that.

Then along the bottom, a smaller image that is repeated but in the bottom right another image which would overlay the green ones at the bottom. I'm not sure if they will blend or if the green images at the bottom could start, let's say 100 pixels from the bottom right hand corner (or whatever the width of the red image is).

Tried with the coding above but I am back in the loop of one or the other, I can't have both the green and blue (haveb't even tried the red yet!).

  • 0

When you want different background images (read background as the background property in css) you need to either use CSS3 and multiple background (which as stated above, does not work with IE8 and lower) or start adding divs as lunamonkey mentioned, basically you want empty divs that you will apply backgrounds to those, and the position em where you want, say for the layout you posted above, your blue background would be the body bg probably, and then you would have two more divs at the bottom, one that has the grass and one for the red box, the bottom images will need to be positioned absolutely probably so they stick to the bottom and so you can overlap the red square.

  • 0

Does the latest Firefox, Chrome and Opera support CSS-3?

If so, I'll look into that as most people will be using IE 8 or above by now (except for businesses), I'd rather stick to standards than using DIVs - although I'll probably end up using DIVs as it'll just be easier.

I can easily make it in Photoshop to show what I want, I'll try and split the elements so you can see what images are what.

But for a good example, the W3 Schools website has the fading grey at the bottom of the page. Let's suggest the white background is actually an image. It's about getting the while background (image) and the fading grey image at the bottom together on the same page.

See, this is where if I was using tables, then I'd have done what I wanted in 5 minutes. Although it would only look good on my monitor!

  • 0

For those that want an actual shot:

post-39459-0-82464500-1301687940.jpg

My MS Paint version wasn't bad :p

I have split where the images split up in white, so:

The blue background is an 800w x 1h image (for the example sake) which is repeated all the way down the page. The blue in this image is one colour, the actual image is different.

The grass elements at the bottom are about 300w x 80h. Those would be repeated starting from the bottom right.

The grass in the bottom right (possibly mirrored to the left too if the design looks good?) needs to be on the top really, but that is a separate image from the rest.

DIVs are the way to go then.

Does someone have an example tag? I tried with this:

<head><style type="text/css">

grass {
background-image:url('grass_grass.png');
background-repeat:repeat-x;
position:right bottom;
}

</style></head>


<div id="grass"><p><br />Grass Here<br /></p></div>

But the grass isn't shown :s

  • 0

Here is how I would do it...

CSS

html {

height: 100%;

background: blue image

}

body {

min-height: 100%;
background: green image repeat-x right bottom

}

#page {

min-height: 100%;
background: green grass corner image no-repeat right bottom

}

HTML

<html>

<head>
</head>

<body>
<div id="page">

<div id="container">
page content goes here...
</div>

</div>
</body>

</html>

  • 0

This is what annoys me to the highest of being annoyed.

Websites have all sorts of images all over the place and I can't even seem to make it work even close!

<HEAD>
<META http-equiv=Content-Style-Type content=text/css>
<style type="text/css">

html {
	height: 100%;
	background: v3_bg.jpg;
	 }

body {
	min-height: 100%;
	background: v3_grass.png repeat-x right bottom;
	 }

#page {
	min-height: 100%;
	background: v3_grass_right.png no-repeat right bottom;
	  }

mid {
	vertical-align: middle;
	 }

</style>
</head>
<body topmargin="0" leftmargin="0">
	<div id="page">
		<p align="center">
			<img class="mid" border="0" src="update_mid.png" width="575" height="197" alt="Please visit again in a few minutes">
		</p>

		<div id="test">
			<p>this is a test</p>
		</div>
	</div>

</body>

This gives a while page (IE no background) with the logo at the top. I don't get why the valign won't work to get the logo in the middle of the page? I don't want it to care what resolution the screen is in, I simply want the logo to appear in the middle. FFS :(

I guess this doesn't matter that I am linking to images on my desktop (where the page is too).

I want to learn but seriously, it's times like this where I read how to do it and can do it in the editor, but when it comes to my page, it won't render :angry:

  • 0

AHHHH - why does it work on the W3Schools site, but not on my page:

<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.middle {vertical-align:middle;}
</style>
</head>

<body>

<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p> <br />

<p>THIS IS <img class="middle" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" />THIS IMAGE IN THE CENTRE OF THE TEXT</p>  <br />

<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>

</body>
</html>

So, with the above code, the image site nicely in the centre of the text. Although my page doesn't have text, it's in the middle, that is what counts. Yet with mine:

<style type="text/css">

html {
	height: 100%;
	background-image:url('v3_bg.jpg');
	 }

body {
	min-height: 100%;
	background-image:url('v3_grass.png') repeat-x right bottom;
	 }

#page {
	min-height: 100%;
	background-image:url('v3_grass_right.png') no-repeat right bottom;
	  }

img.mid {
	vertical-align:middle;
		}

</style>

</head>

<body topmargin="0" leftmargin="0">
	<div id="page">
		<p align="center">
			<img class="mid" border="0" src="update_mid.png" width="575" height="197" alt="Please visit again in a few minutes">
		</p>

		<div id="test">
			<p>this is a test</p>
		</div>
	</div>

No, the image sits at the top in the middle, not the middle of the page. Is the p align over writing the CSS? If so, how the hell do I get an image in the centre of the page.

Come to think of it, why doesn't the command "valign=middle" work if I put it next to the paragraph tag? Who the hell designed a language that makes it so complicated to centre an image in the centre of the page?

At this point I'd be willing to part with money if someone can provide the code for all of this as it's just making me want to give up :(

Why part with money? Because I have wasted, WASTED the last hour moving text around, putting a . here or a # there hoping it will just work like you guys are saying it should.

EDIT:

Even better now, following this tutorial I can get the image in the middle vertically, but horizontally, no, it's now stuck on the left.

#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:1em; margin-top:-5em; }



</style>

</head>

<body topmargin="0" leftmargin="0">
	<div id="page">
	</div>

	<div id="myoutercontainer">
		<div id="myinnercontainer">
				<img src="update_mid.png" width="575" height="197" alt="Please visit again in a few minutes">
		</div>
	</div>

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.