I found these forums by accident after a Google search to problem solve an issue I was having with my website build. I’ve learnt so much already - thank you!
As my user name suggests, I’m an amateur at web design and so forgive me if this question seems extraordinarily dumb to some of you and also I apologise in advance for the non-technical language but I hope to convey what I am trying to achieve! (I did search the forums before posting but didn’t find what I was looking for).
So I have a body background image set for my design in my css file and also a background image for the container, which I intend all my text and images to sit within. The background image has a height of 1100px. For most of my pages this is perfectly adequate but for a couple the text overshoots the image.
So I wondered if it was possible to extend the background image somehow? I did think about repeating it but it has curved edges and a border so I can’t see how this would work.
The only work-around my pea brain can think of (other than reducing the text!) would be to create another [bigger] image and creating a separate div id for those pages with more text than fits within the 1100px container.
Any other suggestions, please? (You may have to speak slowly as I’m a bit slow at this )
I would assume that the background image is in an outer container and the text is somewhere within that outer container. Somewhat like this diagram.
A background-image can be assigned to any of these divs or even the paragraph in CSS.
<div class="outer">
<div class="content">
<p>text is in here.</p>
</div>
</div>
I’m afraid that without seeing the actual code, the best I can do is guess.
If you can provide a link to the site, that would be great. If not, then perhaps you can prepare a valid standalone page that demonstrates the problem and paste the code in a post. You can click the link at the bottom of my post and find information about posting code and images.
It doesn’t sound like a tough problem, but we need to see the code to give sound advice.
#container {
background: url("../images/container980.gif") no-repeat 0 0;
[B] background-size:100% 100%;
height:auto;/* never give a fixed height to fluid height containers that hold text */[/B]
margin-left: auto;
margin-right: auto;
[B] padding: 0 0 25px;[/B]
position: relative;
text-align: left;
}
Background-size is only supported in IE9+ so if you need older browsers support you would need to do either of these things.
Slice the image into three parts. A top, a repeating middle section and a base. The top and bottom top and tail the layout while the middle section is a repeating gif of the two lines. This is the old fasioned way and will support old browsers but is a pain to code.
Use CSS borders and border-radius for the round corners (IE9+) and let older browsers have square borders. No images required. Old browsers just get square layout elements.
Note that generally you would not give a height to elements that hold content like text. The reason is that you never know what size text the user has defined (or zoomed) so your layout may be twice as tall on someone else’s computer. text containers should have their height defined by their content so you have to create your backgrounds with that in mind and not use fixed width and height backgrounds where there is a chance that the content will change.
Here’s an example using border-radius and no images.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
body {
background:#ff2ed1;
padding:45px 0 25px;
}
.outer {
width:80%;
max-width:1170px;
min-width:320px;
margin:auto;
background:#fff;
position:relative;
border:5px solid #aa66b2;
border-radius:25px;
padding:10px;
box-shadow:10px 10px 10px rgba(0,0,0,0.3), inset 2px 2px 2px rgba(0,0,0,0.3);
}
.logo {
width:200px;
height:200px;
text-align:center;
position:relative;
line-height:200px;
float:left;
margin:-40px 20px 20px -40px;
display:inline;/* ie6 hack */
border:4px solid #aa66b2;
background:#fff;
border-radius:50%;
}
</style>
</head>
<body>
<div class="outer">
<h1 class="logo">Logo</h1>
<p>Colonies culture shores of the cosmic ocean made in the interiors of collapsing stars emerged into consciousness, radio telescope, rings of Uranus of brilliant syntheses rich in mystery the sky calls to us. The ash of stellar alchemy a billion trillion bits of moving fluff the only home we've ever known! Euclid Hypatia take root and flourish laws of physics quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident colonies. Worldlets the sky calls to us, not a sunrise but a galaxyrise the sky calls to us radio telescope the ash of stellar alchemy Cambrian explosion with pretty stories for which there's little good evidence, another world Sea of Tranquility.</p>
<p>Vanquish the impossible trillion kindling the energy hidden in matter, something incredible is waiting to be known. Bits of moving fluff the carbon in our apple pies the ash of stellar alchemy consectetur adipisicing elit, hundreds of thousands how far away adipisci velit the ash of stellar alchemy vastness is bearable only through love extraplanetary consciousness, stirred by starlight radio telescope. Star stuff harvesting star light colonies preserve and cherish that pale blue dot light years paroxysm of global death vastness is bearable only through love are creatures of the cosmos astonishment venture. Quasar, culture Vangelis, the </p>
</div>
</body>
</html>
)