Jump to content

Can I Have 2 Background Images?


migroo
 Share

Recommended Posts

Hi I am building a fan site and I have a background images that is fixed but I also want to have an image that will duplicate down the page as needed. I want to put my content on the second image.Can someone tell me where I can go to find out how to do this or give me some pointers on displaying an image this way?

Link to comment
Share on other sites

you can look up background-image and find out about repeating images over the space of the div. With padding, you can push your content in any direction within the same div.

Link to comment
Share on other sites

Thanks for the tip! Now, I have only used the div tag one time before so I don't really know what I am doing. I tried this and it doesn't display my picture can you help me?The code in the css:

div.back1  {				position:absolute;				left:135px;				top:109px;				background-image:url('/images/backg2.png');				background-repeat:repeat-y;				}

And here is the part I put under the body tag:

<div class="back1" width="1200"></div>

Is it because I am only putting my second image in a div tag or is it because I am misusing the dive tag?

Link to comment
Share on other sites

Thanks for the tip! Now, I have only used the div tag one time before so I don't really know what I am doing. I tried this and it doesn't display my picture can you help me?The code in the css:
div.back1  {				position:absolute;				left:135px;				top:109px;				background-image:url('/images/backg2.png');				background-repeat:repeat-y;				}

And here is the part I put under the body tag:

<div class="back1" width="1200"></div>

Is it because I am only putting my second image in a div tag or is it because I am misusing the dive tag?

You have only created one div you can try creating floating 2 <div>s' next to each other like so:
div.back1  {				position:absolute;				left:135px;				top:109px;				background-image:url('/images/backg2.png');				background-repeat:repeat-y;				float:left;				clear:none;				}div.back2{				  float:right;				  clear:none;}

<div class="back1" width="1200"></div><div class="back2" width="?"></div>

Style the second div class accordingly.

Link to comment
Share on other sites

Hi I am building a fan site and I have a background images that is fixed but I also want to have an image that will duplicate down the page as needed. I want to put my content on the second image.Can someone tell me where I can go to find out how to do this or give me some pointers on displaying an image this way?
body {background-image: URL(image 1);background-repeat: y;}.content{background-image: URL(image2);}<body><div></div></body>just add your other css. Edited by ApocalypeX
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...