Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Noob bg image question Re: Noob bg image question

#54074
Rob MacKay
Participant

This is something everyone does now and again… check below

Code:
.blog_box_top {
background: url(images/blog_bg_mid) center repeat-y;
text-align: left;
margin:10px 0;
width: 647px;
}

.blog_box_top h3, p {
background: url(images/blog_bg_mid) center repeat-y;
text-align: center;
margin: 10px 10px;
}

Notice you missed off the file extention… blog_bg_mid.png

Also you have not specified the correct path. it should be ../images/blog_bg_mid.png

After fixing that – I can say that it still dosnt work properly – what I would recommend is stucture it either within 3 blocks like this:

<div class="boxtop"> </div>
<div class="boxmid"> <h2>Title for interesting stuff</h2> <p>interesting content</p> </div>
<div class="boxbot"> </div>

Set the background image of the div class’ boxtop and bottom with the corner sections you have, and dont link them in with the <img> tag. then set the background image of your boxmid class with the blog_bg_mid.png.

If you wanted to try something easyer you could have a single box and use the rounded corners JS code – you can find that here: http://malsup.com/jquery/corner/ There are many others, google just gave me that one first.

most browsers support a rounded corner css code – except of course IE…

There are many ways to achieve it, here are some useful tutorials.

http://www.cssjuice.com/25-rounded-corn … -with-css/

The site is coming on well! keep going! :D