Need help with HTML/CSS/jQuery

I have an image that looks like this. And I want to put it on my site BUT I DON'T want it to be an image. I only want the image part of it to be an image, and all the other images/text that you see below should be 'added' onto the main background image using html/css. BUT I am having extreme difficulty understanding how to do it!! :( I've re开发者_如何学Goad 6 tutorials, and just don't get it.

Main BG image:

and here's what it should look like, once I've added images and text to it using HTML/CSS. But this is what I can't figure out how to do. I just don't understand how to place everything on it where I want them to be!:

Please help, any help at all is much appreciated.

Thank you

You need to use a background image on a containing element. Here is a quick example using your image as a background: http://jsfiddle.net/q8QJv/1/

You could create a div and set its background-image CSS property to be that image.

You're going to need to do a bunch of work to make everything else line up properly within it, but it should be manageable.

I would recommend that you use ems as your length unit, as opposed to pixels, in case users scale your page... it should help keep things lined up at most normal scales.

You can feasibly avoid using your image at all here using CSS border-radius.

Three of the corners will be dead easy to do using border-radius.

The fourth corner is more tricky. border-radius is flexible enough that you should be able to achieve the effect you've designed using it, or at least something close.

Something like the following:

.mybox {
  -moz-border-radius: 8px 8px 8px 20px;
  border-radius: 8px 8px 8px 20px;
}

Even more complex shapes are possible. However with odd shapes like that it can get a bit tricky to make border-radius work consistently between various browsers. It also obviously won't do the button you're putting in the corner.

For this reason, I'd suggest using a simple border-radius style to make all the corners rounded in the same way, and then place a single image layered on top of it in the bottom left corner do to your special corner.

Of course, you can stick with the image you have, in which case others have already suggested workable solutions, so I won't repeat them here. But hopefully you'll consider the border-radius option as an alternative.

Here's a page with a good overview of some border-radius tricks (and some other fun CSS stuff): http://www.the-art-of-web.com/css/border-radius/

One big caveat to all this is that border-radius doesn't work in Internet Explorer. The good news though is that there is an excellent work-around for this in the shape of CSS3Pie.

You need some markup like:

<div id="container">
<header>
<h2>text title</h2>
<img src="top_right_image.png"/>
</header>
<p>Main body text</p>
<footer>
<a href="clickable location"><img src="clickable image" /></a>
</footer>
</div>

You can then style away using:

background-image for the "container" div. You can sent the location absolutely for the heading, right image, body text and so on.

Here's my take:

HTML:

<div class="boxWrap">
    <div class="boxHead">
        <h2>Some text here <img src="logo.png" /></h2>
    </div>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <div class="clickable"><a href="#"><img src="triangleImg.png" /></a></div>
</div>

CSS:

.boxWrap {
    min-width: 50%;
    background-color: #000;
    padding: 0.5em;
}

.boxWrap .boxHead {
    background-color: #fff;
    border-radius: 1em 1em 0 0;
    padding: 0.5em 0.75em;
}

.boxHead h2 {
    font-size: 1.5em;
}

.boxHead img {
    float: right;
}

.boxWrap p {
    margin: 0;
    padding: 0 0.5em;
    background-color: #fff;
}
.boxWrap .clickable {
    background-color: #fff;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 1em 0;

}

.boxWrap .clickable img {
    height: 50px;
    width: 50px;
    margin: 0;
    padding: 0;
    float: left;
}

JS Fiddle demo.

I've not substituted in any real images for either the logo (in the h2 element), or the bottom left corner. But this should be easily adaptable for your needs, obviously if you need any help adapting this, or need explanation of what I've done (or why), leave comments and I'll do my best to help as I can.

Looks like you could have a container div that would be centered, set the background-image to point to your bg image, set the proper amount of padding and would contain all other elements. It could have a relative position. Text title looks like an h1 to me. Top right image would be an image floated to the right. Your paragraph would be inside a p. Clickable image could have an absolute position with left and bottom set to the proper amount.

Something like this:

<div id="container">
    <h1>text title</h1>
    <img src="/someImage" alt="" />
    <p>a paragraph</p>
    <a href="/aLink">clickable button</a>
</div>

Fiddle demo with css applied