How to start one div where another ends

B

brightside

New Member
Hi there, I am a total newbie, currently in the trial-and-error process of learning HTML & CSS to create a personal website. To give a little background, my site will be based on art & photography, so preserving the resolution & aspect ratio of my images is very important.

For my homepage, I am trying to set a background image to have a fixed height, to always grow and shrink with the size of the page, and to be anchored in the upper left corner. It NEEDS to maintain its aspect ratio, meaning that depending on the size of the window, there may be dead space to the right.

I am OK with this, and I would like to create divs repeating horizontally RELATIVE to where my original background image ends. This way I know just where the repeating image(s) starts & can feather the transition in Photoshop to be seamless (essentially repeating the edge of the main image to infinity). Since My main image is based on a percentage of the height, I don't know exactly where it will end in the window.

How do I create a repeating div that always STARTS where the main picture ends? (preferably dealing with percentages rather than pixels)

Here is my code. I tried using the background element to set these pictures, but had trouble with this as well, so I tried using div ID's and seemed to have more control. Any advice would be GREATLY appreciated. Thanks!!

(FYI):
#background-1 will be the repeating image
#background-2 is the image that I'd like to preserve.

_________________



<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Carolyn Pender</title>
<style type="text/css">

html, body {margin: 0; padding: 0; height:100%}


#background-1 {position:fixed; top:0; left:0; width:100%; height:92%;z-index: 1;}
#background-2 {position:fixed; top:0; left:0; height:92%; z-index: 2;}
#footer {position: fixed; bottom: 0; left: 0; width:100%; height: 8%; z-index: 3; background: #333366;}

</style>
</head>
<body>
<div id="background-1">
<img style="height: 100%; width: 100%;" src="bgtest1.jpg;" alt="test;">
<div id="background-2"><img style="height: 100%;"
src="background_index.jpg;" alt="Background;"></div>
</div>
<div id="footer"><style="bottom: 10%;="" left:="" 0;="" width:=""
100%;="" background:="#333366"></style="bottom:></div>
<br>
<br>
</body>
:confused::confused::confused:
 
CaldwellYSR

CaldwellYSR

Member
You shouldn't have img tags in your divs to use as background images. The way it should be is...

HTML: 
<head>
    <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
    <title>Carolyn Pender</title>
    <style type="text/css">

        html, body {margin: 0; padding: 0; height:100%}

        #wrapper {
          /* Set up background image in the top left with no repeat replace #000 with whatever color you need to repeat AFTER the image ends */
          background: #000 url("bgtest1.jpg") top left no-repeat;
        }

    </style>
</head>
<body>
    <div id="wrapper">
      <!-- CONTENT -->
    </div>
</body>

The wrapper div will not stretch around that image though unless you set a width an height. Also the image will stay the same size at all times instead of changing to match the window. Maybe this isn't what you want but using this type of CSS is the way you need to be going.
 
B

brightside

New Member
Taking a step back

OK, well that's good to know that it's not necessarily good 'form' to put background images in div elements - the frustrating part is that I can't get the page to resize the background the same way when I use the background element!! Perhaps I'm simply using the wrong code?

This doesn't seem to be working:

body {background-image:url('background_index.jpg');background-position:fixed; top:0; left:0; background-height:100%}
...
<body
style="background-image: url(background_index.jpg); background-repeat: no-repeat;"
background-position:="fixed" background-height:="100%">



So now I have to figure that out before I can address the #wrapper - when I do that, does it contain all the "background" info that would have been by itself in the head? And, in your example, could the "#000" be replaced by an image? Rather than having a color repeating after the main, image, I would like a DIFFERENT image repeating.

Thanks for your patience & the quick reply, my head's swimming a bit : )
 
CaldwellYSR

CaldwellYSR

Member
Quick answer is no, I don't think the #000 can be replace by another image. To do that you could have two divs, with two different background images, the inner div (the one that would show on top) being the main image, and the outer div having the one to be repeated. As for the resizing... I'm not quite sure, this is something I've never really encountered. Sorry
 
CaldwellYSR

CaldwellYSR

Member
After a bit of research it doesn't look like there's a way to do this without using an img tag. What I would do is set up an img tag (sorry I know I said not to but what can ya do sometimes? lol) It would look like this...

HTML: 
<head>
    <style>
      #wrapper {
        background: url("path/to/repeated/image") repeat;
      }
      #bg-image {
        position: absolute;
        top: 0;
        left: 0;
        height: XX%; /* XX = whatever percentage you need */
      }
    </style>
</head>
<body>
    <div id="wrapper">
        <img id="bg-image" src="path/to/file" alt="Background image" />
    </div>
</body>

This way your image scales and the background image repeats behind it...
 
B

brightside

New Member
Almost!!

OK wonderful, so this is making more sense... I looked & looked, and tried all sorts of things but could not get the background element to work either.

So what I have NOW is:
z-index:1 repeating, anchored at the top left, width 100%, heigh 100%
z-index:2 once, anchored at the top left, 100%, and it resizes nicely.

What I would LIKE is:
To begin the "z-index:1" (the repeating image) to BEGIN repeating when the other image ends, so I can control (blend) the transition from one to the next. In other words, to make it look seamless.



Any ideas??



Thanks so much again for the time, attention & effort : ) It makes a HUGE difference!!
 
B

brightside

New Member
I tried that code but still running into problems with that background element. It seems that I can't control the height of it as a percentage of the page size. I was thinking that I could do something similar to my original plan, and in photoshop make an image that's say, twice as long and just as high as the original image, and I will know exactly where the first will end.

Then again, I feel like I'd be "tricking" the code... and it will require some more work on my part...

any "correct" method?
 
Phreaddee

Phreaddee

Super Moderator
Staff member
why dont you just try to make a full screen image that retains proportion and aspect and fills all available space.
if the viewport aspect changes beyond what the original image is meant to be it simply works around the centre of the image, so it trims the edges.
it would look neater, and more professional, particularly for photography/art

If you view the link in my signature, you'll see a full screen background image that resizes as you resize the screen, if that is like what you are after
then I'd suggest you try a "supersized"
http://www.buildinternet.com/project/supersized/
 
B

brightside

New Member
A good option!

Hi Phreadee,

This looks like a very good option for me - after hours of searching I still wasn't happy with what I found for full-page images, as many solutions will contort the images or cut them off. Was your 'headspace' website made with the supersized jquery? Also, is it only for slideshows or can it be used for normal images? Do you have the script handy?


Lastly, how would this type of thing work if I want to have flash-animated buttons- do they grow and shrink as well?

Thanks for the help : )
 
Phreaddee

Phreaddee

Super Moderator
Staff member
the main image on the landing page uses the supersized jquery plugin.

the images on the portfolio page are essentially responsive images, so they will resize dependant in the screen size. this is just css.

the supersized plugin can indeed do just one image (as i've used on my website) or a slideshow of sorts.

no it wont affect the flash buttons, although I'd make them not flash buttons...
 
You must log in or register to reply here.
Top